<template>
  <module-page-shell title="评分汇总">
    <div class="project-score-page">
      <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--project">
            <el-select v-model="queryForm.projectName" filterable placeholder="请选择项目">
              <el-option
                v-for="item in projectOptions"
                :key="item.projectId"
                :label="item.projectName"
                :value="item.projectName"
              />
            </el-select>
          </div>
          <div class="project-filter-bar__actions">
            <el-button type="primary" class="project-filter-bar__button" @click="applyProject">查询</el-button>
            <el-button class="project-filter-bar__button" @click="resetProject">重置</el-button>
          </div>
        </div>

        <div class="field-card">项目名称{{ activeProjectName || '-' }}</div>
        <div class="field-card">任务完成{{ completedCount }}/{{ scoreRows.length }}</div>

        <div class="summary-card">
          <div class="summary-card__title">报告项总分汇总</div>
          <el-table :data="scoreRows" class="score-table">
            <el-table-column label="报告项名称" prop="label" min-width="300" />
            <el-table-column label="总分" min-width="160">
              <template slot-scope="scope">
                {{ formatScore(scope.row.score) }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="summary-actions">
          <el-button type="warning" @click="handleCalculate">执行汇总计算</el-button>
        </div>
      </section>
    </div>
  </module-page-shell>
</template>

<script>
import ModulePageShell from '@/components/ModulePageShell'
import { listProject } from '@/api/risk/project'
import {
  buildScoreRows,
  formatScore,
  getProjectTasks,
  readTaskStore
} from '@/views/project/shared/workbench'

export default {
  name: 'ProjectScoreSummary',
  components: {
    ModulePageShell
  },
  data() {
    return {
      projectOptions: [],
      taskStore: {},
      queryForm: {
        projectName: ''
      },
      activeProjectName: ''
    }
  },
  computed: {
    currentTasks() {
      return getProjectTasks(this.taskStore, this.activeProjectName)
    },
    scoreRows() {
      return buildScoreRows(this.currentTasks)
    },
    completedCount() {
      return this.scoreRows.filter(item => typeof item.score === 'number' && !Number.isNaN(item.score)).length
    }
  },
  created() {
    this.refreshData()
  },
  activated() {
    this.refreshData()
  },
  methods: {
    formatScore,
    resolvePreferredProjectName(currentProjectName = '') {
      const routeProjectName = `${this.$route.query.projectName || ''}`.trim()
      const names = this.projectOptions.map(item => item.projectName)
      if (routeProjectName && names.includes(routeProjectName)) {
        return routeProjectName
      }
      if (currentProjectName && names.includes(currentProjectName)) {
        return currentProjectName
      }
      return this.projectOptions[0] ? this.projectOptions[0].projectName : ''
    },
    async refreshData() {
      const response = await listProject({ pageNum: 1, pageSize: 1000 })
      this.projectOptions = (response.rows || []).map(item => ({
        projectId: item.projectId,
        projectName: item.projectName || ''
      }))
      this.taskStore = readTaskStore()
      this.queryForm.projectName = this.resolvePreferredProjectName(this.queryForm.projectName)
      this.applyProject()
    },
    applyProject() {
      this.taskStore = readTaskStore()
      this.activeProjectName = this.queryForm.projectName
    },
    resetProject() {
      this.queryForm.projectName = this.projectOptions[0] ? this.projectOptions[0].projectName : ''
      this.applyProject()
    },
    handleCalculate() {
      this.taskStore = readTaskStore()
      this.$message.success(`已完成 ${this.activeProjectName || '当前项目'} 的评分汇总计算`)
    }
  }
}
</script>

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

.project-score-page {
  display: flex;
  flex-direction: column;
}

.project-score-page .project-filter-bar__field--project {
  flex: 0 1 280px;
  max-width: 320px;
  min-width: 220px;
}

.panel {
  border: 1px solid #e4e8ef;
  border-radius: 8px;
  background: #fff;
  padding: 14px 16px 16px;
}

.panel__header {
  margin-bottom: 12px;
}

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

.panel__header p {
  margin: 8px 0 0;
  color: #98a2b3;
  font-size: 13px;
}

.summary-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.field-card,
.summary-card {
  border: 1px solid #e4e8ef;
  border-radius: 6px;
  background: #fff;
}

.field-card {
  padding: 12px 14px;
  margin-bottom: 10px;
  color: #303133;
}

.summary-card {
  padding: 12px 14px 10px;
}

.summary-card__title {
  margin-bottom: 10px;
  font-weight: 600;
  color: #303133;
}

.score-table {
  width: 100%;
}

.summary-actions {
  margin-top: 10px;
}

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