<template>
  <module-page-shell title="评估任务">
    <div class="workbench-task-page" v-loading="loading">
      <workbench-summary :cards="summaryCards" />

      <section class="panel">
        <div class="panel__header">
          <h3>评估任务</h3>
        </div>

        <div class="task-tabs">
          <el-button :type="activeTab === 'pending' ? 'primary' : 'default'" @click="activeTab = 'pending'">待处理</el-button>
          <el-button :type="activeTab === 'done' ? 'primary' : 'default'" @click="activeTab = 'done'">已完成</el-button>
        </div>

        <el-table :data="displayRows" size="small">
          <el-table-column label="评估项" prop="taskName" min-width="220" />
          <el-table-column label="评估师" prop="assessorName" min-width="120" />
          <el-table-column label="截止时间" prop="deadline" min-width="120" />
          <el-table-column label="状态" prop="status" min-width="120" />
          <el-table-column label="评分" min-width="100">
            <template slot-scope="scope">
              {{ scope.row.score === null ? '-' : scope.row.score }}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button
                v-if="activeTab === 'pending'"
                size="mini"
                @click="openEvaluateDialog(scope.row)"
              >
                填写评估
              </el-button>
              <el-button
                v-else
                size="mini"
                @click="openViewDialog(scope.row)"
              >
                查看结果
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>

      <el-dialog
        :visible.sync="dialogOpen"
        width="680px"
        append-to-body
        :close-on-click-modal="false"
      >
        <span slot="title" class="dialog-title">{{ dialogMode === 'edit' ? '填写评估' : '查看评估结果' }}</span>
        <el-form
          ref="taskFormRef"
          :model="taskForm"
          :rules="taskRules"
          label-position="top"
        >
          <el-form-item label="评估项" prop="taskName">
            <el-input v-model="taskForm.taskName" disabled />
          </el-form-item>
          <el-form-item label="评估师" prop="assessorName">
            <el-input v-model="taskForm.assessorName" disabled />
          </el-form-item>
          <el-form-item label="评分" prop="score">
            <el-input-number
              v-model="taskForm.score"
              :min="1"
              :max="10"
              :disabled="dialogMode === 'view'"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="评估结论" prop="content">
            <el-input
              v-model="taskForm.content"
              type="textarea"
              :rows="5"
              :disabled="dialogMode === 'view'"
              placeholder="请输入评估结论"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogOpen = false">{{ dialogMode === 'view' ? '关闭' : '取消' }}</el-button>
          <el-button v-if="dialogMode === 'edit'" type="primary" @click="submitTaskResult">提交评估</el-button>
        </div>
      </el-dialog>
    </div>
  </module-page-shell>
</template>

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

export default {
  name: 'RiskWorkbenchTask',
  components: {
    ModulePageShell,
    WorkbenchSummary
  },
  data() {
    return {
      loading: false,
      summaryCards: [],
      currentProject: {},
      taskRows: [],
      activeTab: 'pending',
      dialogOpen: false,
      dialogMode: 'edit',
      activeRow: null,
      taskForm: {
        taskName: '',
        assessorName: '',
        score: 8,
        content: ''
      },
      taskRules: {
        score: [{ required: true, message: '请先填写评分', trigger: 'change' }],
        content: [{ required: true, message: '请先填写评估结论', trigger: 'blur' }]
      }
    }
  },
  computed: {
    pendingRows() {
      return this.taskRows.filter(item => item.status !== '已完成')
    },
    doneRows() {
      return this.taskRows.filter(item => item.status === '已完成')
    },
    displayRows() {
      return this.activeTab === 'pending' ? this.pendingRows : this.doneRows
    }
  },
  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
      } finally {
        this.loading = false
      }
    },
    openEvaluateDialog(row) {
      this.dialogMode = 'edit'
      this.activeRow = row
      this.taskForm = {
        taskName: row.taskName,
        assessorName: row.assessorName,
        score: 8,
        content: ''
      }
      this.dialogOpen = true
      this.$nextTick(() => {
        this.$refs.taskFormRef && this.$refs.taskFormRef.clearValidate()
      })
    },
    openViewDialog(row) {
      this.dialogMode = 'view'
      this.activeRow = row
      this.taskForm = {
        taskName: row.taskName,
        assessorName: row.assessorName,
        score: row.score,
        content: row.conclusion
      }
      this.dialogOpen = true
    },
    submitTaskResult() {
      this.$refs.taskFormRef.validate(async valid => {
        if (!valid || !this.activeRow) {
          return
        }
        submitAssessment(this.currentProject, this.activeRow, {
          assessorName: this.taskForm.assessorName,
          score: this.taskForm.score,
          content: this.taskForm.content
        })
        this.$message.success('评估结果已提交')
        this.dialogOpen = false
        this.activeTab = 'done'
        await this.loadPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.workbench-task-page {
  display: flex;
  flex-direction: column;
}

.panel {
  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;
}

.task-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
</style>
