<template>
  <div>
    <h1>无纸化防疫管理</h1>
    
    <!-- 统计卡片 -->
    <a-row gutter={24} style="margin-bottom: 16px;">
      <a-col :span="6">
        <a-statistic title="防疫机构数量" :value="agencyCount" suffix="个" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="本月防疫记录" :value="monthlyRecords" suffix="条" :valueStyle="{ color: '#52c41a' }" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="在库疫苗数量" :value="vaccineCount" suffix="种" :valueStyle="{ color: '#1890ff' }" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="本月防疫活动" :value="monthlyActivities" suffix="场" />
      </a-col>
    </a-row>

    <!-- 趋势图表 -->
    <a-card title="防疫工作趋势统计" style="margin-bottom: 16px;">
      <div style="height: 300px;" ref="trendChartRef"></div>
    </a-card>

    <!-- 快捷入口卡片 -->
    <a-row gutter={24}>
      <a-col :span="6">
        <a-card 
          hoverable 
          @click="goToAgencyManagement"
          :body-style="{ padding: '24px', cursor: 'pointer', textAlign: 'center' }"
        >
          <a-icon type="bank" style="fontSize: 48px; color: '#1890ff'; marginBottom: '16px'" />
          <h3 style="marginBottom: '8px'">防疫机构管理</h3>
          <p style="color: '#8c8c8c'">查看和管理防疫机构信息</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card 
          hoverable 
          @click="goToRecordManagement"
          :body-style="{ padding: '24px', cursor: 'pointer', textAlign: 'center' }"
        >
          <a-icon type="file-text" style="fontSize: 48px; color: '#52c41a'; marginBottom: '16px'" />
          <h3 style="marginBottom: '8px'">防疫记录管理</h3>
          <p style="color: '#8c8c8c'">查看和管理防疫记录信息</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card 
          hoverable 
          @click="goToVaccineManagement"
          :body-style="{ padding: '24px', cursor: 'pointer', textAlign: 'center' }"
        >
          <a-icon type="medicine-box" style="fontSize: 48px; color: '#faad14'; marginBottom: '16px'" />
          <h3 style="marginBottom: '8px'">疫苗管理</h3>
          <p style="color: '#8c8c8c'">查看和管理疫苗库存信息</p>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card 
          hoverable 
          @click="goToActivityManagement"
          :body-style="{ padding: '24px', cursor: 'pointer', textAlign: 'center' }"
        >
          <a-icon type="schedule" style="fontSize: 48px; color: '#f5222d'; marginBottom: '16px'" />
          <h3 style="marginBottom: '8px'">防疫活动管理</h3>
          <p style="color: '#8c8c8c'">查看和管理防疫活动信息</p>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { message } from 'ant-design-vue'

const router = useRouter()

// 统计数据
const agencyCount = ref(25)
const monthlyRecords = ref(568)
const vaccineCount = ref(12)
const monthlyActivities = ref(18)

// 图表引用
const trendChartRef = ref(null)

// 导航到子页面
const goToAgencyManagement = () => {
  router.push('/paperless/epidemic/agency')
}

const goToRecordManagement = () => {
  router.push('/paperless/epidemic/record')
}

const goToVaccineManagement = () => {
  router.push('/paperless/epidemic/vaccine')
}

const goToActivityManagement = () => {
  router.push('/paperless/epidemic/activity')
}

// 初始化趋势图表
const initTrendChart = () => {
  if (trendChartRef.value) {
    const chart = echarts.init(trendChartRef.value)
    
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['防疫记录', '疫苗接种', '防疫活动']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '防疫记录',
          type: 'line',
          stack: '总量',
          data: [400, 450, 520, 480, 550, 580, 620, 650, 690, 720, 750, 780],
          itemStyle: {
            color: '#1890ff'
          }
        },
        {
          name: '疫苗接种',
          type: 'line',
          stack: '总量',
          data: [200, 230, 280, 260, 300, 320, 350, 380, 420, 450, 480, 520],
          itemStyle: {
            color: '#52c41a'
          }
        },
        {
          name: '防疫活动',
          type: 'line',
          stack: '总量',
          data: [10, 15, 18, 22, 25, 28, 32, 35, 38, 42, 45, 50],
          itemStyle: {
            color: '#faad14'
          }
        }
      ]
    }
    
    chart.setOption(option)
    
    // 响应式调整
    window.addEventListener('resize', () => {
      chart.resize()
    })
  }
}

// 组件挂载时初始化
onMounted(() => {
  initTrendChart()
})
</script>

<style scoped>
  h1 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
  }
</style>