<template>
  <div class="app-container">
    <el-row :gutter="20" class="mb8">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <span>危险源总数</span>
          </template>
          <div class="stat-card">
            <div class="stat-value">{{ portalData.totalHaz || 0 }}</div>
            <div class="stat-label">一般: {{ portalData.ybHaz || 0 }} | 重大: {{ portalData.zdHaz || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <span>已验收危险源</span>
          </template>
          <div class="stat-card">
            <div class="stat-value">{{ (portalData.yxYbHaz || 0) + (portalData.yxZdHaz || 0) }}</div>
            <div class="stat-label">一般: {{ portalData.yxYbHaz || 0 }} | 重大: {{ portalData.yxZdHaz || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <span>管控危险源</span>
          </template>
          <div class="stat-card">
            <div class="stat-value">{{ (portalData.ybGkHaz || 0) + (portalData.zdGkHaz || 0) }}</div>
            <div class="stat-label">一般: {{ portalData.ybGkHaz || 0 }} | 重大: {{ portalData.zdGkHaz || 0 }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <span>工程数量</span>
          </template>
          <div class="stat-card">
            <div class="stat-value">{{ portalData.engNum || 0 }}</div>
            <div class="stat-label">已辨识: {{ portalData.alrEngNum || 0 }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mb8">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <span>危险源分布</span>
          </template>
          <div ref="pieChartRef" style="height: 350px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <span>管控状态</span>
          </template>
          <div ref="controlChartRef" style="height: 350px;"></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 :data="warmList" style="width: 100%">
            <el-table-column label="预警等级" align="center" prop="warmLevel">
              <template #default="scope">
                <dict-tag :options="warm_level" :value="scope.row.warmLevel" />
              </template>
            </el-table-column>
            <el-table-column label="内容" align="center" prop="content" :show-overflow-tooltip="true" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
          </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="类型" align="center" prop="type" />
            <el-table-column label="内容" align="center" prop="content" :show-overflow-tooltip="true" />
            <el-table-column label="状态" align="center" prop="status" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="HazardPortal">
import { listTBusiHazUi } from "@/api/slaj/hazard"
import { listTBusiHazardWarm } from "@/api/slaj/hazard"
import * as echarts from "echarts"

const { proxy } = getCurrentInstance()
const { warm_level } = proxy.useDict("warm_level")

const portalData = ref({})
const warmList = ref([])
const todoList = ref([])
const pieChartRef = ref(null)
const controlChartRef = ref(null)

/** 获取门户数据 */
function getPortalData() {
  listTBusiHazUi({ pageNum: 1, pageSize: 1 }).then(res => {
    if (res.rows && res.rows.length > 0) {
      portalData.value = res.rows[0]
      initCharts()
    }
  })
}

/** 获取预警列表 */
function getWarmList() {
  listTBusiHazardWarm({ pageNum: 1, pageSize: 5 }).then(res => {
    warmList.value = res.rows
  })
}

/** 初始化图表 */
function initCharts() {
  // 饼图 - 危险源分布
  if (pieChartRef.value) {
    const chart = echarts.init(pieChartRef.value)
    chart.setOption({
      tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
      legend: { orient: 'vertical', left: 'left' },
      series: [
        {
          name: '危险源分布',
          type: 'pie',
          radius: '50%',
          data: [
            { value: portalData.value.ybHaz || 0, name: '一般危险源' },
            { value: portalData.value.zdHaz || 0, name: '重大危险源' }
          ],
          emphasis: {
            itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
          }
        }
      ]
    })
  }

  // 柱状图 - 管控状态
  if (controlChartRef.value) {
    const chart = echarts.init(controlChartRef.value)
    chart.setOption({
      tooltip: { trigger: 'axis' },
      legend: { data: ['一般', '重大'] },
      xAxis: { type: 'category', data: ['已验收', '管控中', '已销号'] },
      yAxis: { type: 'value' },
      series: [
        {
          name: '一般',
          type: 'bar',
          data: [
            portalData.value.yxYbHaz || 0,
            portalData.value.ybGkHaz || 0,
            portalData.value.yxYbGk || 0
          ]
        },
        {
          name: '重大',
          type: 'bar',
          data: [
            portalData.value.yxZdHaz || 0,
            portalData.value.zdGkHaz || 0,
            portalData.value.yxZdGk || 0
          ]
        }
      ]
    })
  }
}

onMounted(() => {
  getPortalData()
  getWarmList()
})
</script>

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