<template>
  <module-page-shell title="工作台">
    <div class="assessor-dashboard" v-loading="loading">
      <workbench-summary :cards="summaryCards" />

      <div class="dashboard-grid">
        <section class="panel">
          <div class="panel__header">
            <h3>评估师快捷操作</h3>
          </div>
          <div class="quick-actions">
            <el-button @click="goTo('/risk/material')">查看资料</el-button>
            <el-button @click="goTo('/risk/task')">填写评估</el-button>
            <el-button @click="goTo('/risk/submission')">查看提交</el-button>
          </div>
          <div class="info-block">当前项目{{ projectLabel }}</div>
          <div class="info-block">我的待处理任务{{ pendingCount }} 条</div>
          <div class="info-block">我的已提交记录{{ submissionCount }} 条</div>
        </section>

        <section class="panel">
          <div class="panel__header">
            <h3>最新动态</h3>
          </div>
          <el-table :data="activities" size="small">
            <el-table-column label="时间" prop="time" min-width="150" />
            <el-table-column label="操作人" prop="operator" min-width="100" />
            <el-table-column label="动作" prop="action" min-width="180" show-overflow-tooltip />
            <el-table-column label="项目" prop="projectCode" min-width="130" />
          </el-table>
        </section>
      </div>
    </div>
  </module-page-shell>
</template>

<script>
import ModulePageShell from '@/components/ModulePageShell'
import WorkbenchSummary from './components/WorkbenchSummary'
import { loadWorkbenchSnapshot } from './shared'

export default {
  name: 'RiskWorkbenchDashboard',
  components: {
    ModulePageShell,
    WorkbenchSummary
  },
  data() {
    return {
      loading: false,
      summaryCards: [],
      currentProject: {},
      taskRows: [],
      submissionRows: [],
      activities: []
    }
  },
  computed: {
    projectLabel() {
      if (!this.currentProject.projectCode) {
        return '--'
      }
      return `${this.currentProject.projectCode} ${this.currentProject.projectName}`
    },
    pendingCount() {
      return this.taskRows.filter(item => item.status !== '已完成').length
    },
    submissionCount() {
      return this.submissionRows.length
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    async loadPage() {
      this.loading = true
      try {
        const snapshot = await loadWorkbenchSnapshot()
        this.summaryCards = snapshot.summaryCards
        this.currentProject = snapshot.currentProject
        this.taskRows = snapshot.taskRows
        this.submissionRows = snapshot.submissionRows
        this.activities = snapshot.activities
      } finally {
        this.loading = false
      }
    },
    goTo(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.assessor-dashboard {
  display: flex;
  flex-direction: column;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}

.panel {
  min-height: 320px;
  padding: 12px 14px;
  border: 1px solid #e4e8ef;
  border-radius: 6px;
  background: #fff;
}

.panel__header {
  margin-bottom: 12px;
}

.panel__header h3 {
  margin: 0;
  color: #2f3542;
  font-size: 16px;
}

.quick-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.info-block {
  min-height: 40px;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid #d8e0eb;
  border-radius: 4px;
  color: #4b5563;
  line-height: 20px;
}

@media screen and (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .quick-actions {
    flex-direction: column;
  }
}
</style>
