<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb8">
      <el-col :span="4" v-for="card in statCards" :key="card.key">
        <el-card shadow="hover">
          <template #header><span>{{ card.label }}</span></template>
          <div class="stat-card">
            <div class="stat-value" :style="{ color: card.color }">{{ summaryData[card.key] ?? 0 }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mb8">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header><span>上报率进度</span></template>
          <div style="display:flex;align-items:center;gap:20px;padding:10px 0;">
            <span>已上报: {{ progress.reported || 0 }}</span>
            <el-progress :percentage="Number(progress.rate) || 0" :stroke-width="20" />
            <span>未上报: {{ progress.unreported || 0 }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header><span>最新事故</span></template>
          <el-table v-loading="loading" :data="latestList" style="width: 100%">
            <el-table-column label="事故名称" align="center" prop="acciName" :show-overflow-tooltip="true" />
            <el-table-column label="等级" align="center" prop="acciGrad" width="80">
              <template #default="scope"><dict-tag :options="acci_grad" :value="scope.row.acciGrad" /></template>
            </el-table-column>
            <el-table-column label="发生时间" align="center" prop="occuTime" width="160" />
            <el-table-column label="地点" align="center" prop="occuLoc" :show-overflow-tooltip="true" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header><span>待办事项</span></template>
          <el-table :data="todoList" style="width: 100%">
            <el-table-column label="事故名称" prop="acciName" :show-overflow-tooltip="true" />
            <el-table-column label="发生时间" prop="occuTime" width="180" />
            <el-table-column label="状态" align="center" width="100">
              <template #default="scope">
                <dict-tag :options="rep_stat" :value="scope.row.repStat" />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt8">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header><span>通知公告</span></template>
          <el-table :data="noticeList" style="width: 100%">
            <el-table-column label="标题" prop="noticeTitle" :show-overflow-tooltip="true" />
            <el-table-column label="内容" prop="noticeContent" :show-overflow-tooltip="true" />
            <el-table-column label="发送时间" prop="createTime" width="180" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="AcciPortal">
import { ref, onMounted } from 'vue'
import { listObjAcci, getAcciSummary, getAcciTodoList, getReportProgress } from "@/api/slaj/acci"

// 业务说明: 统计卡片 — 依据《生产安全事故报告和调查处理条例》将事故划分为四个等级。一般(绿)→较大(橙)→重大(红)→特别重大(深红)
const statCards = [
  { key: 'total', label: '事故总数', color: '#409eff' },
  { key: 'general', label: '一般事故', color: '#67c23a' },
  { key: 'larger', label: '较大事故', color: '#e6a23c' },
  { key: 'major', label: '重大事故', color: '#f56c6c' },
  { key: 'special', label: '特别重大事故', color: '#b22222' },
]

const summaryData = ref({})
const latestList = ref([])
const todoList = ref([])
const progress = ref({})
const noticeList = ref([])
const loading = ref(false)

function fetchSummary() {
  getAcciSummary().then(res => {
    summaryData.value = res.data ?? res ?? {}
  })
}

function fetchLatest() {
  loading.value = true
  listObjAcci({ pageNum: 1, pageSize: 5 }).then(res => {
    latestList.value = res.rows ?? []
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 业务说明: 获取待办事项 — 待办数据来源于未上报状态的事故记录，提示用户哪些事故尚未完成上报流程，需及时处理
function fetchTodo() {
  getAcciTodoList().then(res => {
    todoList.value = Array.isArray(res.data) ? res.data : (res.rows || [])
  })
}

// 业务说明: 获取上报率进度 — 上报率 = 已上报数量 / 事故总数 × 100%。已上报指状态为"已上报"或"已审核"的事故，未上报指状态为"未上报"的事故
function fetchProgress() {
  getReportProgress().then(res => {
    progress.value = res.data || {}
  })
}

function fetchNotice() {
  listObjAcci({ pageNum: 1, pageSize: 10 }).then(res => {
    noticeList.value = (res.rows || []).map(item => ({
      noticeTitle: item.acciName + ' - ' + (item.acciGrad || '未分级'),
      noticeContent: '发生时间: ' + (item.occuTime || '') + ' 地点: ' + (item.occuLoc || ''),
      createTime: item.collTime || item.occuTime
    }))
  })
}

onMounted(() => {
  fetchSummary()
  fetchLatest()
  fetchTodo()
  fetchProgress()
  fetchNotice()
})
</script>

<style scoped>
.stat-card {
  text-align: center;
  padding: 20px 0;
}
.stat-value {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
