<template>
  <module-page-shell title="提交记录">
    <div class="workbench-submission-page" v-loading="loading">
      <workbench-summary :cards="summaryCards" />

      <section class="panel query-list-panel">
        <div class="panel__header">
          <h3>提交记录查询</h3>
        </div>

        <div class="project-filter-bar">
          <div class="project-filter-bar__field project-filter-bar__field--medium">
            <el-input v-model="queryParams.submitter" placeholder="提交人" clearable />
          </div>
          <div class="project-filter-bar__field project-filter-bar__field--keyword">
            <el-input v-model="queryParams.keyword" placeholder="提交编号/评估项关键词" clearable />
          </div>
          <div class="project-filter-bar__field project-filter-bar__field--narrow">
            <el-select v-model="queryParams.status" placeholder="状态：全部" clearable>
              <el-option label="全部" value="" />
              <el-option label="已提交" value="已提交" />
              <el-option label="待复核" value="待复核" />
            </el-select>
          </div>
          <div class="project-filter-bar__field project-filter-bar__field--date">
            <el-date-picker
              v-model="queryParams.submitDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="年 / 月 / 日"
            />
          </div>
          <div class="project-filter-bar__actions">
            <el-button type="primary" class="project-filter-bar__button" @click="applyQuery">查询</el-button>
            <el-button class="project-filter-bar__button" @click="resetQuery">重置</el-button>
          </div>
        </div>

        <el-table :data="filteredRows" size="small">
          <el-table-column label="提交编号" prop="submissionNo" min-width="170" />
          <el-table-column label="评估项" prop="taskName" min-width="200" />
          <el-table-column label="状态" prop="status" min-width="120" />
          <el-table-column label="提交时间" prop="submitTime" min-width="160" />
          <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="100">
            <template slot-scope="scope">
              <el-button size="mini" @click="openDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>

      <el-dialog :visible.sync="detailOpen" width="680px" append-to-body>
        <span slot="title" class="dialog-title">提交详情</span>
        <el-form label-position="top" :model="detailForm">
          <el-form-item label="提交编号">
            <el-input v-model="detailForm.submissionNo" disabled />
          </el-form-item>
          <el-form-item label="提交人">
            <el-input v-model="detailForm.submitter" disabled />
          </el-form-item>
          <el-form-item label="评估项">
            <el-input v-model="detailForm.taskName" disabled />
          </el-form-item>
          <el-form-item label="评分">
            <el-input v-model="detailForm.score" disabled />
          </el-form-item>
          <el-form-item label="提交内容">
            <el-input v-model="detailForm.content" type="textarea" :rows="5" disabled />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailOpen = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </module-page-shell>
</template>

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

export default {
  name: 'RiskWorkbenchSubmission',
  components: {
    ModulePageShell,
    WorkbenchSummary
  },
  data() {
    return {
      loading: false,
      summaryCards: [],
      allRows: [],
      queryParams: {
        submitter: DEFAULT_ASSESSOR_NAME,
        keyword: '',
        status: '',
        submitDate: ''
      },
      detailOpen: false,
      detailForm: {
        submissionNo: '',
        submitter: '',
        taskName: '',
        score: '',
        content: ''
      }
    }
  },
  computed: {
    filteredRows() {
      const submitter = (this.queryParams.submitter || '').trim().toLowerCase()
      const keyword = (this.queryParams.keyword || '').trim().toLowerCase()
      return this.allRows.filter(item => {
        const hitSubmitter = !submitter || `${item.submitter || ''}`.toLowerCase().includes(submitter)
        const hitKeyword = !keyword ||
          `${item.submissionNo || ''}`.toLowerCase().includes(keyword) ||
          `${item.taskName || ''}`.toLowerCase().includes(keyword)
        const hitStatus = !this.queryParams.status || item.status === this.queryParams.status
        const hitDate = !this.queryParams.submitDate || `${item.submitTime || ''}`.startsWith(this.queryParams.submitDate)
        return hitSubmitter && hitKeyword && hitStatus && hitDate
      })
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    async loadPage() {
      this.loading = true
      try {
        const snapshot = await loadWorkbenchSnapshot()
        this.summaryCards = snapshot.summaryCards
        this.allRows = snapshot.submissionRows
      } finally {
        this.loading = false
      }
    },
    applyQuery() {
      this.allRows = this.allRows.slice()
    },
    resetQuery() {
      this.queryParams = {
        submitter: DEFAULT_ASSESSOR_NAME,
        keyword: '',
        status: '',
        submitDate: ''
      }
    },
    openDetail(row) {
      this.detailForm = {
        submissionNo: row.submissionNo,
        submitter: row.submitter,
        taskName: row.taskName,
        score: row.score,
        content: row.content
      }
      this.detailOpen = true
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/project-filter-bar.scss";
@import "~@/styles/query-list-panel.scss";

.workbench-submission-page {
  display: flex;
  flex-direction: column;
}

.panel {
  padding: 12px 14px 14px;
  border: 1px solid #e4e8ef;
  border-radius: 6px;
  background: #fff;
}
</style>
