<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :xs="24" :sm="6">
        <el-card shadow="never" class="stats-card">
          <div class="stats-item">
            <div class="stats-icon" style="background: #409EFF">
              <el-icon :size="28" color="#fff"><DataAnalysis /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-num">{{ stats.reservoirCount }}</div>
              <div class="stats-label">水库（座）</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="6">
        <el-card shadow="never" class="stats-card">
          <div class="stats-item">
            <div class="stats-icon" style="background: #67C23A">
              <el-icon :size="28" color="#fff"><TrendCharts /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-num">{{ stats.dikeCount }}</div>
              <div class="stats-label">堤防（条）</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="6">
        <el-card shadow="never" class="stats-card">
          <div class="stats-item">
            <div class="stats-icon" style="background: #E6A23C">
              <el-icon :size="28" color="#fff"><Switch /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-num">{{ stats.pustCount }}</div>
              <div class="stats-label">水闸（座）</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="6">
        <el-card shadow="never" class="stats-card">
          <div class="stats-item">
            <div class="stats-icon" style="background: #F56C6C">
              <el-icon :size="28" color="#fff"><Setting /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-num">{{ stats.wagaCount }}</div>
              <div class="stats-label">泵站（座）</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="mt-16">
      <el-col :xs="24" :lg="10">
        <el-card shadow="never">
          <template #header><div class="card-header"><span>工程分类统计</span></div></template>
          <div ref="pieChartRef" style="height:280px;width:100%"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="14">
        <el-card shadow="never">
          <template #header><div class="card-header"><span>工程分类列表</span></div></template>
          <el-table :data="categoryList" stripe>
            <el-table-column prop="type" label="编码" width="80" />
            <el-table-column prop="name" label="工程类别" width="120" />
            <el-table-column prop="count" label="数量" width="100" />
            <el-table-column label="操作" min-width="150">
              <template #default="scope">
                <el-button type="primary" link @click="goCategory(scope.row.type)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="mt-16">
      <el-col :xs="24" :lg="24">
        <el-card shadow="never">
          <template #header><div class="card-header"><span>最近更新</span></div></template>
          <el-timeline>
            <el-timeline-item v-for="(item, idx) in recentList" :key="idx" :timestamp="item.updDate" placement="top">
              <div class="recent-item">
                <span class="recent-name">{{ item.stnm }}</span>
                <el-tag size="small" type="info">{{ item.type }}</el-tag>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Gc">
import { TrendCharts, Switch, Setting, DataAnalysis } from '@element-plus/icons-vue'
import { getStats, getCategoryList, getRecentList } from '@/api/slgc/gc/index'
import * as echarts from 'echarts'

const router = useRouter()
const stats = ref({ reservoirCount: 0, dikeCount: 0, pustCount: 0, wagaCount: 0 })
const categoryList = ref([])
const recentList = ref([])
const pieChartRef = ref(null)

function goCategory(type) {
  const map = { B: 'reservoir', D: 'dike', K: 'pust', '4': 'waga' }
  const path = map[type]
  if (path) router.push('/slgc/' + path)
}

function initPieChart() {
  getCategoryList().then(res => {
    categoryList.value = res.data
    const chart = echarts.init(pieChartRef.value)
    const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
    chart.setOption({
      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
      series: [{
        type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: true,
        itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
        label: { show: true, formatter: '{b}\n{d}%' },
        data: res.data.map((d, i) => ({ value: d.count, name: d.name, itemStyle: { color: colors[i] } }))
      }]
    })
    window.addEventListener('resize', () => chart.resize())
  })
}

onMounted(() => {
  getStats().then(res => { stats.value = res.data })
  getRecentList().then(res => { recentList.value = res.data })
  initPieChart()
})
</script>

<style scoped>
.stats-card { margin-bottom: 16px; }
.stats-item { display: flex; align-items: center; }
.stats-icon { width: 56px; height: 56px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stats-info { margin-left: 16px; }
.stats-num { font-size: 28px; font-weight: 700; color: #333; line-height: 1.2; }
.stats-label { font-size: 14px; color: #999; margin-top: 4px; }
.mt-16 { margin-top: 16px; }
.card-header { font-weight: 600; font-size: 16px; }
.recent-item { display: flex; align-items: center; gap: 8px; }
.recent-name { font-weight: 500; }
</style>
