<template>
  <div class="gov-container">
    <h1>政府监管</h1>
    <div v-if="loading" class="loading-indicator">数据加载中...</div>
    <div v-if="error" class="error-message">数据加载失败，请稍后重试。</div>
    <div v-if="!loading && !error" class="gov-content">
      <!-- 监管数据总览 -->
      <div class="overview-section">
        <h3>监管数据总览</h3>
        <div class="overview-grid">
          <div class="overview-card" v-for="(item, index) in overviewData" :key="index">
            <div class="card-icon">{{ item.icon }}</div>
            <div class="card-info">
              <div class="card-title">{{ item.title }}</div>
              <div class="card-value">{{ item.value }}</div>
              <div class="card-desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 合规性检查结果 -->
      <div class="compliance-section">
        <h3>合规性检查结果</h3>
        <div class="compliance-content">
          <div class="compliance-chart">
            <h4>合规牧场比例</h4>
            <div ref="complianceChart" class="chart-placeholder" style="width: 100%; height: 300px;"></div>
          </div>
          <div class="violations-table">
            <h4>违规事件统计</h4>
            <a-table :dataSource="violationsData" :columns="violationsColumns" :pagination="false" />
          </div>
        </div>
      </div>
      
      <!-- 政策执行效果分析 -->
      <div class="policy-section">
        <h3>政策执行效果分析</h3>
        <div class="policy-content">
          <div class="policy-chart">
            <div ref="policyChart" class="chart-placeholder" style="width: 100%; height: 300px;"></div>
          </div>
        </div>
      </div>
      
      <!-- 监管报告 -->
      <div class="report-section">
        <h3>监管报告</h3>
        <div class="report-content">
          <div class="report-summary">
            <h4>月度监管报告摘要</h4>
            <div class="summary-content">
              <p>本月共检查牧场120家，合规率92.5%，较上月提升1.2%。</p>
              <p>发现违规事件9起，已全部处理完毕。</p>
              <p>发放补贴资金¥280万元，惠及养殖户85户。</p>
            </div>
            <div class="report-actions">
              <button class="export-btn">导出PDF报告</button>
            </div>
          </div>
          <div class="report-chart">
            <h4>监管报告可视化</h4>
            <div ref="reportChart" class="chart-placeholder" style="width: 100%; height: 200px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'Gov',
  setup() {
    const overviewData = ref([]);
    const violationsData = ref([]);
    const loading = ref(true);
    const error = ref(false);
    const complianceChart = ref(null);
    const policyChart = ref(null);
    const reportChart = ref(null);
    
    let complianceChartInstance = null;
    let policyChartInstance = null;
    let reportChartInstance = null;
    
    // 监管数据总览
    overviewData.value = [
      { icon: '✅', title: '防疫完成率', value: '98.6%', desc: '较上月 +2.1%' },
      { icon: '💰', title: '补贴发放', value: '¥280万', desc: '惠及85户养殖户' },
      { icon: '📋', title: '检查牧场', value: '120家', desc: '合规率92.5%' },
      { icon: '⚠️', title: '违规事件', value: '9起', desc: '已全部处理' }
    ];
    
    // 违规事件表格列定义
    const violationsColumns = ref([
      { title: '事件编号', dataIndex: 'id', key: 'id' },
      { title: '牧场名称', dataIndex: 'farm', key: 'farm' },
      { title: '违规类型', dataIndex: 'type', key: 'type' },
      { title: '发生时间', dataIndex: 'time', key: 'time' },
      { title: '处理状态', dataIndex: 'status', key: 'status' },
    ]);
    
    // 违规事件数据
    violationsData.value = [
      { key: '1', id: 'V202308001', farm: '锡市牧场A', type: '环境不达标', time: '2023-08-15', status: '已处理' },
      { key: '2', id: 'V202308002', farm: '东乌旗牧场B', type: '防疫记录不全', time: '2023-08-18', status: '处理中' },
      { key: '3', id: 'V202308003', farm: '西乌旗牧场C', type: '饲料来源不明', time: '2023-08-20', status: '已处理' },
    ];

    // 初始化合规性检查图表
    const initComplianceChart = () => {
      if (complianceChart.value) {
        complianceChartInstance = echarts.init(complianceChart.value);
        complianceChartInstance.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            bottom: '0'
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              data: [
                { value: 92.5, name: '合规牧场' },
                { value: 7.5, name: '违规牧场' }
              ],
              itemStyle: {
                color: function(params) {
                  const colorList = ['#4CAF50', '#f44336'];
                  return colorList[params.dataIndex];
                }
              }
            }
          ]
        });
      }
    };
    
    // 初始化政策执行效果图表
    const initPolicyChart = () => {
      if (policyChart.value) {
        policyChartInstance = echarts.init(policyChart.value);
        policyChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['防疫政策', '补贴政策', '环保政策']
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '防疫政策',
              type: 'line',
              data: [85, 87, 89, 91, 93, 94],
              itemStyle: { color: '#4CAF50' }
            },
            {
              name: '补贴政策',
              type: 'line',
              data: [78, 80, 82, 85, 87, 88],
              itemStyle: { color: '#2196F3' }
            },
            {
              name: '环保政策',
              type: 'line',
              data: [70, 72, 75, 78, 80, 82],
              itemStyle: { color: '#FF9800' }
            }
          ]
        });
      }
    };
    
    // 初始化监管报告图表
    const initReportChart = () => {
      if (reportChart.value) {
        reportChartInstance = echarts.init(reportChart.value);
        reportChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: ['检查数', '合规数', '违规数', '处理数']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 111, 9, 9],
              type: 'bar',
              itemStyle: {
                color: function(params) {
                  const colorList = ['#2196F3', '#4CAF50', '#f44336', '#FF9800'];
                  return colorList[params.dataIndex];
                }
              }
            }
          ]
        });
      }
    };

    // 窗口大小改变时重绘图表
    const resizeCharts = () => {
      if (complianceChartInstance) complianceChartInstance.resize();
      if (policyChartInstance) policyChartInstance.resize();
      if (reportChartInstance) reportChartInstance.resize();
    };

    onMounted(() => {
      loading.value = false;
      initComplianceChart();
      initPolicyChart();
      initReportChart();
      window.addEventListener('resize', resizeCharts);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeCharts);
      if (complianceChartInstance) complianceChartInstance.dispose();
      if (policyChartInstance) policyChartInstance.dispose();
      if (reportChartInstance) reportChartInstance.dispose();
    });

    return {
      overviewData,
      violationsData,
      violationsColumns,
      loading,
      error,
      complianceChart,
      policyChart,
      reportChart
    };
  }
};
</script>

<style scoped>
.gov-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.gov-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.overview-section,
.compliance-section,
.policy-section,
.report-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.overview-section h3,
.compliance-section h3,
.policy-section h3,
.report-section h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.overview-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.card-icon {
  font-size: 24px;
  margin-right: 15px;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.card-value {
  font-size: 20px;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 5px;
}

.card-desc {
  font-size: 12px;
  color: #999;
}

.compliance-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.compliance-chart h4,
.violations-table h4 {
  margin-top: 0;
  color: #333;
}

.policy-chart {
  padding: 20px 0;
}

.report-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.report-summary {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.report-summary h4 {
  margin-top: 0;
  color: #333;
}

.summary-content p {
  color: #666;
  line-height: 1.6;
}

.report-actions {
  margin-top: 20px;
}

.export-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.export-btn:hover {
  background-color: #45a049;
}

.report-chart h4 {
  margin-top: 0;
  color: #333;
}

.loading-indicator,
.error-message {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #666;
}

.error-message {
  color: #ff4d4f;
}

@media (max-width: 768px) {
  .gov-container {
    padding: 10px;
  }
  
  .overview-grid,
  .compliance-content,
  .report-content {
    grid-template-columns: 1fr;
  }
}
</style>