<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'

// 业务说明: 统计卡片 — 依据《生产安全事故报告和调查处理条例》将事故划分为四个等级。一般(绿)→较大(橙)→重大(红)→特别重大(深红)
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() {
  summaryData.value = { total: 128, general: 85, larger: 30, major: 10, special: 3 }
}

function fetchLatest() {
  loading.value = true; setTimeout(() => {
    latestList.value = [
      { acciName: '坝体渗漏事故', acciGrad: '1', occuTime: '2025-03-15', occuLoc: '于桥水库主坝' },
      { acciName: '施工坍塌事故', acciGrad: '3', occuTime: '2025-05-10', occuLoc: '永定新河堤防段' },
      { acciName: '泵站电气火灾', acciGrad: '2', occuTime: '2025-06-02', occuLoc: '海河泵站' }
    ]; loading.value = false
  }, 200)
}

// 业务说明: 获取待办事项 — 待办数据来源于未上报状态的事故记录，提示用户哪些事故尚未完成上报流程，需及时处理
function fetchTodo() {
  todoList.value = [{ title: '坝体渗漏事故', type: '未上报', time: '2025-03-15' }, { title: '闸门启闭故障', type: '待审核', time: '2025-04-20' }]
}

// 业务说明: 获取上报率进度 — 上报率 = 已上报数量 / 事故总数 × 100%。已上报指状态为"已上报"或"已审核"的事故，未上报指状态为"未上报"的事故
function fetchProgress() {
  progress.value = { reported: 98, total: 128, rate: 76.6 }
}

function fetchNotice() {
  noticeList.value = [{ noticeTitle: '关于做好汛期安全生产工作的通知', noticeContent: '请各单位加强汛期事故隐患排查', createTime: '2025-06-01' }]
}

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>
