<template>
  <div class="risk-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="risk-content">
      <!-- 风险事件展示 -->
      <div class="events-section">
        <h3>风险事件</h3>
        <div class="events-grid">
          <div 
            v-for="(event, index) in riskEvents" 
            :key="index" 
            class="event-card"
            :class="event.level"
          >
            <div class="event-header">
              <div class="event-icon">
                <span v-if="event.level === 'high'">🔴</span>
                <span v-else-if="event.level === 'medium'">🟠</span>
                <span v-else>🟡</span>
              </div>
              <div class="event-title">{{ event.title }}</div>
              <div class="event-time">{{ event.time }}</div>
            </div>
            <div class="event-body">
              <div class="event-desc">{{ event.desc }}</div>
              <div class="event-location">位置: {{ event.location }}</div>
            </div>
            <div class="event-footer">
              <div class="event-status">{{ event.status }}</div>
              <div class="event-type">{{ event.type }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 预警信息推送 -->
      <div class="alerts-section">
        <h3>预警信息</h3>
        <div class="alerts-list">
          <div 
            v-for="(alert, index) in riskAlerts" 
            :key="index" 
            class="alert-item"
            :class="alert.level"
          >
            <div class="alert-content">
              <div class="alert-title">{{ alert.title }}</div>
              <div class="alert-desc">{{ alert.desc }}</div>
            </div>
            <div class="alert-actions">
              <button class="subscribe-btn" @click="subscribeAlert(alert)">
                {{ alert.subscribed ? '已订阅' : '订阅通知' }}
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 风险趋势分析 -->
      <div class="trend-section">
        <h3>风险趋势分析</h3>
        <div class="chart-container">
          <div ref="trendChart" class="chart-placeholder" style="width: 100%; height: 300px;"></div>
        </div>
      </div>
      
      <!-- 风险地图 -->
      <div class="map-section">
        <h3>风险地图</h3>
        <div class="map-container">
          <div ref="riskMap" class="map-placeholder" style="width: 100%; height: 400px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'Risk',
  setup() {
    const riskEvents = ref([]);
    const riskAlerts = ref([]);
    const loading = ref(true);
    const error = ref(false);
    const trendChart = ref(null);
    const riskMap = ref(null);
    
    let trendChartInstance = null;
    let mapInstance = null;
    
    // 风险事件数据
    riskEvents.value = [
      { 
        level: 'high', 
        title: '疫病风险', 
        time: '2023-08-20 15:30', 
        desc: '某牧场发现疑似口蹄疫病例', 
        location: '锡市牧场A', 
        status: '处理中', 
        type: '健康风险' 
      },
      { 
        level: 'medium', 
        title: '市场风险', 
        time: '2023-08-20 14:20', 
        desc: '牛肉价格波动较大', 
        location: '全盟范围', 
        status: '监测中', 
        type: '市场风险' 
      },
      { 
        level: 'low', 
        title: '自然灾害风险', 
        time: '2023-08-20 10:15', 
        desc: '局部地区有暴雨预警', 
        location: '东乌旗', 
        status: '预警中', 
        type: '自然灾害' 
      },
      { 
        level: 'high', 
        title: '环境风险', 
        time: '2023-08-20 09:45', 
        desc: '某区域氨气浓度超标', 
        location: '西乌旗牧场B', 
        status: '处理中', 
        type: '环境风险' 
      }
    ];
    
    // 预警信息数据
    riskAlerts.value = [
      { 
        level: 'high', 
        title: '疫病预警', 
        desc: '全盟范围内口蹄疫预警，需加强防疫措施', 
        subscribed: true 
      },
      { 
        level: 'medium', 
        title: '市场预警', 
        desc: '牛肉价格波动预警，请关注市场动态', 
        subscribed: false 
      },
      { 
        level: 'low', 
        title: '天气预警', 
        desc: '局部地区暴雨预警，请注意防范', 
        subscribed: true 
      }
    ];

    // 订阅预警通知
    const subscribeAlert = (alert) => {
      alert.subscribed = !alert.subscribed;
      // 这里可以添加实际的订阅逻辑
    };

    // 初始化趋势分析图表
    const initTrendChart = () => {
      if (trendChart.value) {
        trendChartInstance = echarts.init(trendChart.value);
        trendChartInstance.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['疫病风险', '市场风险', '环境风险']
          },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '疫病风险',
              type: 'line',
              stack: '总量',
              data: [12, 15, 8, 10, 14, 9],
              itemStyle: { color: '#f44336' }
            },
            {
              name: '市场风险',
              type: 'line',
              stack: '总量',
              data: [8, 10, 12, 9, 11, 7],
              itemStyle: { color: '#ff9800' }
            },
            {
              name: '环境风险',
              type: 'line',
              stack: '总量',
              data: [5, 7, 6, 8, 9, 6],
              itemStyle: { color: '#4CAF50' }
            }
          ]
        });
      }
    };
    
    // 初始化风险地图
    const initRiskMap = () => {
      if (riskMap.value) {
        mapInstance = echarts.init(riskMap.value);
        mapInstance.setOption({
          title: {
            text: '风险分布图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          geo: {
            map: 'china',
            roam: false,
            zoom: 1.2,
            center: [116.0, 44.0], // 锡林郭勒盟位置
            itemStyle: {
              areaColor: '#e7e8ea'
            }
          },
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize: 20,
              data: [
                { name: '锡市牧场A', value: [116.08, 43.95], itemStyle: { color: '#f44336' } },
                { name: '东乌旗', value: [116.95, 45.55], itemStyle: { color: '#ff9800' } },
                { name: '西乌旗牧场B', value: [117.60, 44.60], itemStyle: { color: '#f44336' } },
                { name: '镶黄旗', value: [114.20, 42.25], itemStyle: { color: '#4CAF50' } }
              ]
            }
          ]
        });
      }
    };

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

    onMounted(() => {
      loading.value = false;
      initTrendChart();
      initRiskMap();
      window.addEventListener('resize', resizeCharts);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeCharts);
      if (trendChartInstance) {
        trendChartInstance.dispose();
      }
      if (mapInstance) {
        mapInstance.dispose();
      }
    });

    return {
      riskEvents,
      riskAlerts,
      loading,
      error,
      trendChart,
      riskMap,
      subscribeAlert
    };
  }
};
</script>

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

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

.events-section,
.alerts-section,
.trend-section,
.map-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.events-section h3,
.alerts-section h3,
.trend-section h3,
.map-section h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

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

.event-card {
  border-radius: 8px;
  padding: 15px;
  border-left: 4px solid #ccc;
}

.event-card.high {
  background-color: #ffebee;
  border-left-color: #f44336;
}

.event-card.medium {
  background-color: #fff3e0;
  border-left-color: #ff9800;
}

.event-card.low {
  background-color: #e8f5e9;
  border-left-color: #4CAF50;
}

.event-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.event-icon {
  font-size: 20px;
  margin-right: 10px;
}

.event-title {
  font-weight: bold;
  flex: 1;
}

.event-time {
  font-size: 12px;
  color: #666;
}

.event-body {
  margin-bottom: 10px;
}

.event-desc {
  margin-bottom: 5px;
}

.event-location {
  font-size: 12px;
  color: #666;
}

.event-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.event-status {
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #e0e0e0;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #ccc;
}

.alert-item.high {
  background-color: #ffebee;
  border-left-color: #f44336;
}

.alert-item.medium {
  background-color: #fff3e0;
  border-left-color: #ff9800;
}

.alert-item.low {
  background-color: #e8f5e9;
  border-left-color: #4CAF50;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.alert-desc {
  font-size: 14px;
  color: #666;
}

.alert-actions {
  margin-left: 15px;
}

.subscribe-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

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

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

.error-message {
  color: #ff4d4f;
}

@media (max-width: 768px) {
  .risk-container {
    padding: 10px;
  }
  
  .events-grid {
    grid-template-columns: 1fr;
  }
  
  .alert-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .alert-actions {
    margin-left: 0;
    margin-top: 10px;
  }
}
</style>