<template>
  <div>
    <h1>无纸化检疫管理</h1>
    
    <!-- 统计卡片 -->
    <a-row gutter={24} style="margin-bottom: 16px;">
      <a-col :span="6">
        <a-statistic title="检疫申报数量" :value="declarationCount" suffix="件" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="今日检疫数量" :value="todayQuarantineCount" suffix="件" :valueStyle="{ color: '#52c41a' }" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="合格数量" :value="qualifiedCount" suffix="件" :valueStyle="{ color: '#1890ff' }" />
      </a-col>
      <a-col :span="6">
        <a-statistic title="不合格数量" :value="unqualifiedCount" suffix="件" :valueStyle="{ color: '#f5222d' }" />
      </a-col>
    </a-row>

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

    <!-- 检疫类型分布 -->
    <a-card title="检疫类型分布" style="margin-bottom: 16px;">
      <div style="height: 300px;" ref="distributionChartRef"></div>
    </a-card>

    <!-- 快捷操作 -->
    <a-card title="快捷操作">
      <div style="display: flex; flex-wrap: wrap; gap: 16px;">
        <a-button type="primary" size="large" style="width: 200px;">
          <a-icon type="file-add" />
          新增检疫申报
        </a-button>
        <a-button type="primary" size="large" style="width: 200px;">
          <a-icon type="search" />
          查询检疫记录
        </a-button>
        <a-button type="primary" size="large" style="width: 200px;">
          <a-icon type="export" />
          导出检疫报表
        </a-button>
        <a-button type="primary" size="large" style="width: 200px;">
          <a-icon type="setting" />
          检疫配置管理
        </a-button>
      </div>
    </a-card>
  </div>
</template>

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

// 统计数据
const declarationCount = ref(1254)
const todayQuarantineCount = ref(48)
const qualifiedCount = ref(1189)
const unqualifiedCount = ref(65)

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

// 初始化趋势图表
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: [95, 120, 135, 110, 145, 160, 175, 150, 180, 200, 210, 225],
          itemStyle: {
            color: '#1890ff'
          }
        },
        {
          name: '检疫完成',
          type: 'line',
          stack: '总量',
          data: [90, 115, 130, 105, 140, 155, 170, 145, 175, 195, 205, 220],
          itemStyle: {
            color: '#52c41a'
          }
        },
        {
          name: '合格数量',
          type: 'line',
          stack: '总量',
          data: [85, 110, 125, 100, 135, 150, 165, 140, 170, 190, 200, 215],
          itemStyle: {
            color: '#faad14'
          }
        },
        {
          name: '不合格数量',
          type: 'line',
          stack: '总量',
          data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
          itemStyle: {
            color: '#f5222d'
          }
        }
      ]
    }
    
    chart.setOption(option)
    
    // 响应式调整
    window.addEventListener('resize', () => {
      chart.resize()
    })
  }
}

// 初始化分布图表
const initDistributionChart = () => {
  if (distributionChartRef.value) {
    const chart = echarts.init(distributionChartRef.value)
    
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '检疫类型',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 450, name: '出栏检疫', itemStyle: { color: '#1890ff' } },
            { value: 320, name: '运输检疫', itemStyle: { color: '#52c41a' } },
            { value: 280, name: '屠宰检疫', itemStyle: { color: '#faad14' } },
            { value: 150, name: '市场检疫', itemStyle: { color: '#722ed1' } },
            { value: 54, name: '其他检疫', itemStyle: { color: '#f5222d' } }
          ]
        }
      ]
    }
    
    chart.setOption(option)
    
    // 响应式调整
    window.addEventListener('resize', () => {
      chart.resize()
    })
  }
}

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

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