<template>
  <div class="forecast-panel">
    <div class="left-sidebar">
      <div class="data-card">
        <div class="card-header" @click="toggleDistrictRainfall">
          <h3 class="card-title">分区降雨预报</h3>
          <div class="header-actions">
            <span class="update-time">{{ rainfallDateRange }}</span>
            <span class="toggle-btn">{{ districtRainfallExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="districtRainfallExpanded" class="card-body">
          <div class="district-rainfall-content">
            <div class="rainfall-map-container">
              <img :src="rainfallMapImage" alt="连云港降雨分布图" class="rainfall-map-image">
            </div>
            <div class="rainfall-legend">
              <div class="legend-item">
                <div class="legend-color level-0"></div>
                <span class="legend-text">0~10</span>
              </div>
              <div class="legend-item">
                <div class="legend-color level-1"></div>
                <span class="legend-text">10~25</span>
              </div>
              <div class="legend-item">
                <div class="legend-color level-2"></div>
                <span class="legend-text">25~50</span>
              </div>
              <div class="legend-item">
                <div class="legend-color level-3"></div>
                <span class="legend-text">50~100</span>
              </div>
              <div class="legend-item">
                <div class="legend-color level-4"></div>
                <span class="legend-text">100~250</span>
              </div>
              <div class="legend-item">
                <div class="legend-color level-5"></div>
                <span class="legend-text">&gt;=250</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header" @click="toggleHydrologyForecast">
          <h3 class="card-title">水位预报</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ hydrologyForecastExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="hydrologyForecastExpanded" class="card-body">
          <div class="forecast-content">
            <div class="chart-box">
              <div class="chart-container-wrapper">
                <div class="chart-header">
                  <div class="chart-title">未来24小时水位预报</div>
                  <div class="station-dropdown">
                    <div class="dropdown-toggle" @click="toggleDropdown">
                      <span class="selected-text">{{ selectedStation === 'heilin' ? '黑林' : '小塔山' }}</span>
                      <span class="dropdown-arrow">{{ dropdownOpen ? '▲' : '▼' }}</span>
                    </div>
                    <div v-if="dropdownOpen" class="dropdown-menu" @click.stop>
                      <div 
                        class="dropdown-item" 
                        :class="{ active: selectedStation === 'heilin' }"
                        @click="selectStation('heilin')"
                      >
                        黑林水文站
                      </div>
                      <div 
                        class="dropdown-item" 
                        :class="{ active: selectedStation === 'xiaotaishan' }"
                        @click="selectStation('xiaotaishan')"
                      >
                        小塔山水库
                      </div>
                    </div>
                  </div>
                </div>
                <canvas id="forecastWaterLevelChart" width="300" height="180"></canvas>
              </div>
              <div class="extreme-water-level">
                <div class="extreme-item">
                  <div class="extreme-title">预报水位极值</div>
                  <div class="station-row">
                    <div class="station-name">黑林水文站</div>
                    <div class="extreme-values">
                      <div class="extreme-value">
                        <span class="extreme-label">最高</span>
                        <span class="extreme-number">4.2m</span>
                        <span class="extreme-time">(18:00)</span>
                      </div>
                      <div class="extreme-value">
                        <span class="extreme-label">最低</span>
                        <span class="extreme-number">2.5m</span>
                        <span class="extreme-time">(00:00)</span>
                      </div>
                    </div>
                  </div>
                  <div class="station-divider"></div>
                  <div class="station-row">
                    <div class="station-name">小塔山水库</div>
                    <div class="extreme-values">
                      <div class="extreme-value">
                        <span class="extreme-label">最高</span>
                        <span class="extreme-number">18.8m</span>
                        <span class="extreme-time">(18:00)</span>
                      </div>
                      <div class="extreme-value">
                        <span class="extreme-label">最低</span>
                        <span class="extreme-number">18.2m</span>
                        <span class="extreme-time">(00:00)</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header" @click="toggleFlowForecast">
          <h3 class="card-title">流量预报</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ flowForecastExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="flowForecastExpanded" class="card-body">
          <div class="flow-forecast-content">
            <div class="chart-box">
              <div class="chart-title">未来72小时流量预报</div>
              <canvas id="forecastFlowChart" width="300" height="180"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-sidebar">
      <div class="sidebar-wrapper">
        <div class="time-range-dropdown">
          <div class="dropdown-toggle" @click="toggleTimeRangeDropdown">
            <span class="selected-text">{{ selectedTimeRange === '24h' ? '24h' : '72h' }}</span>
            <span class="dropdown-arrow">{{ timeRangeDropdownOpen ? '▲' : '▼' }}</span>
          </div>
          <div v-if="timeRangeDropdownOpen" class="dropdown-menu" @click.stop>
            <div 
              class="dropdown-item" 
              :class="{ active: selectedTimeRange === '24h' }"
              @click="selectTimeRange('24h')"
            >
              24h
            </div>
            <div 
              class="dropdown-item" 
              :class="{ active: selectedTimeRange === '72h' }"
              @click="selectTimeRange('72h')"
            >
              72h
            </div>
          </div>
        </div>
        <div class="data-card">
        <div class="card-header">
          <h3 class="card-title">水库水文预报</h3>
        </div>
        <div class="card-body">
          <div class="reservoir-section">
            <div class="section-title">入库流量预报</div>
            <div class="chart-box">
              <canvas id="inflowForecastChart" width="300" height="150"></canvas>
            </div>
          </div>

          <div class="reservoir-section mt-15">
            <div class="section-title">出库流量预报</div>
            <div class="chart-box">
              <canvas id="outflowCombinedChart" width="300" height="150"></canvas>
            </div>
          </div>

          <div class="reservoir-section mt-15">
            <div class="section-title">水库蓄水量、库容变化</div>
            <div class="chart-box">
              <canvas id="storageCapacityChart" width="300" height="120"></canvas>
            </div>
            <div class="chart-box mt-10">
              <canvas id="capacityPieChart" width="300" height="180"></canvas>
            </div>
            <div class="forecast-info">
              预报 {{ selectedTimeRange === '24h' ? '24h' : '72h' }} 后蓄水量 {{ selectedTimeRange === '24h' ? '235' : '242' }} 万 m³，占用库容 {{ selectedTimeRange === '24h' ? '78' : '81' }}%
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataCard from './DataCard.vue'
import * as echarts from 'echarts'
import rainfallMapImage from '../assets/images/连云港降雨分布图1.png'

export default {
  name: 'HydrologyForecastPanel',
  components: {
    DataCard
  },
  data() {
    return {
      rainfallDateRange: '',
      hydrologyForecastExpanded: true,
      districtRainfallExpanded: true,
      flowForecastExpanded: true,
      warningLevelExpanded: true,
      forecastStationsExpanded: true,
      forecastSummaryExpanded: true,
      selectedStation: 'heilin',
      dropdownOpen: false,
      selectedTimeRange: '24h',
      timeRangeDropdownOpen: false,
      forecastWaterLevelChart: null,
      forecastFlowChart: null,
      inflowForecastChart: null,
      outflowCombinedChart: null,
      storageCapacityChart: null,
      capacityPieChart: null,
      rainfallMapImage: rainfallMapImage,
      stationData: {
        heilin: {
          data: [2.5, 2.8, 3.5, 4.2, 3.8],
          warningLevel: 4.5,
          max: 5,
          min: 0
        },
        xiaotaishan: {
          data: [18.2, 18.3, 18.5, 18.8, 18.6],
          warningLevel: 19.5,
          max: 22,
          min: 16
        }
      },
      warningLevels: [
        { name: '蓝色预警', desc: '水位接近警戒', class: 'blue' },
        { name: '黄色预警', desc: '水位超过警戒', class: 'yellow' },
        { name: '橙色预警', desc: '水位接近保证', class: 'orange' },
        { name: '红色预警', desc: '水位超过保证', class: 'red' }
      ],
      forecastStations: [
        { name: '黑林站', value: 3.8, status: 'normal' },
        { name: '小塔山站', value: 18.6, status: 'normal' },
        { name: '吴山站', value: 2.9, status: 'normal' },
        { name: '陡沟站', value: 3.2, status: 'warning' }
      ]
    }
  },
  mounted() {
    const now = new Date()
    const month = now.getMonth() + 1
    const day = now.getDate()
    this.rainfallDateRange = `${month}月${day}日至今`
    
    setTimeout(() => {
      this.initCharts()
    }, 100)
    
    document.addEventListener('click', this.handleOutsideClick)
  },
  beforeUnmount() {
    this.destroyCharts()
    document.removeEventListener('click', this.handleOutsideClick)
  },
  methods: {
    toggleHydrologyForecast() {
      this.hydrologyForecastExpanded = !this.hydrologyForecastExpanded
      if (this.hydrologyForecastExpanded) {
        setTimeout(() => {
          this.initForecastWaterLevelChart()
        }, 100)
      }
    },
    toggleDistrictRainfall() {
      this.districtRainfallExpanded = !this.districtRainfallExpanded
    },
    toggleFlowForecast() {
      this.flowForecastExpanded = !this.flowForecastExpanded
      if (this.flowForecastExpanded) {
        setTimeout(() => {
          this.initForecastFlowChart()
        }, 100)
      }
    },
    toggleWarningLevel() {
      this.warningLevelExpanded = !this.warningLevelExpanded
    },
    toggleForecastStations() {
      this.forecastStationsExpanded = !this.forecastStationsExpanded
    },
    toggleForecastSummary() {
      this.forecastSummaryExpanded = !this.forecastSummaryExpanded
    },
    toggleDropdown(event) {
      event.stopPropagation()
      this.dropdownOpen = !this.dropdownOpen
    },
    handleOutsideClick() {
      this.dropdownOpen = false
      this.timeRangeDropdownOpen = false
    },
    toggleTimeRangeDropdown(event) {
      event.stopPropagation()
      this.timeRangeDropdownOpen = !this.timeRangeDropdownOpen
    },
    selectTimeRange(timeRange) {
      this.selectedTimeRange = timeRange
      this.timeRangeDropdownOpen = false
      setTimeout(() => {
        this.initForecastWaterLevelChart()
        this.initForecastFlowChart()
        this.initInflowForecastChart()
        this.initOutflowCombinedChart()
        this.initStorageCapacityChart()
        this.initCapacityPieChart()
      }, 100)
    },
    selectStation(station) {
      this.selectedStation = station
      this.dropdownOpen = false
      setTimeout(() => {
        this.initForecastWaterLevelChart()
      }, 100)
    },
    initCharts() {
      this.initForecastWaterLevelChart()
      this.initForecastFlowChart()
      this.initInflowForecastChart()
      this.initOutflowCombinedChart()
      this.initStorageCapacityChart()
      this.initCapacityPieChart()
    },
    destroyCharts() {
      if (this.forecastWaterLevelChart) {
        this.forecastWaterLevelChart.dispose()
      }
      if (this.forecastFlowChart) {
        this.forecastFlowChart.dispose()
      }
      if (this.inflowForecastChart) {
        this.inflowForecastChart.dispose()
      }
      if (this.outflowCombinedChart) {
        this.outflowCombinedChart.dispose()
      }
      if (this.storageCapacityChart) {
        this.storageCapacityChart.dispose()
      }
      if (this.capacityPieChart) {
        this.capacityPieChart.dispose()
      }
    },
    initForecastWaterLevelChart() {
      if (document.getElementById('forecastWaterLevelChart')) {
        if (this.forecastWaterLevelChart) {
          this.forecastWaterLevelChart.dispose()
        }
        this.forecastWaterLevelChart = echarts.init(document.getElementById('forecastWaterLevelChart'))
        const currentData = this.stationData[this.selectedStation]
        
        const is24h = this.selectedTimeRange === '24h'
        
        const xAxisData24h = ['00:00', '06:00', '12:00', '18:00', '次日00:00']
        const xAxisData72h = ['00:00', '12:00', '24:00', '36:00', '48:00', '60:00', '72:00']
        
        const heilinData24h = [2.5, 2.8, 3.5, 4.2, 3.8]
        const heilinData72h = [2.5, 2.8, 3.5, 4.2, 3.9, 3.5, 3.2]
        
        const xiaotaishanData24h = [18.2, 18.3, 18.5, 18.8, 18.6]
        const xiaotaishanData72h = [18.2, 18.3, 18.5, 18.8, 18.7, 18.5, 18.4]
        
        let waterLevelData
        if (this.selectedStation === 'heilin') {
          waterLevelData = is24h ? heilinData24h : heilinData72h
        } else {
          waterLevelData = is24h ? xiaotaishanData24h : xiaotaishanData72h
        }
        
        const warningLevelData = is24h 
          ? [currentData.warningLevel, currentData.warningLevel, currentData.warningLevel, currentData.warningLevel, currentData.warningLevel]
          : [currentData.warningLevel, currentData.warningLevel, currentData.warningLevel, currentData.warningLevel, currentData.warningLevel, currentData.warningLevel, currentData.warningLevel]
        
        const option = {
          animation: false,
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: is24h ? xAxisData24h : xAxisData72h,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6'
            }
          },
          yAxis: {
            type: 'value',
            name: '水位(m)',
            nameTextStyle: {
              color: '#7bbef6'
            },
            min: currentData.min,
            max: currentData.max,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(123, 190, 246, 0.2)'
              }
            }
          },
          series: [
            {
              name: '预报水位',
              type: 'line',
              data: waterLevelData,
              lineStyle: {
                color: '#62f6fb',
                width: 2
              },
              itemStyle: {
                color: '#62f6fb'
              },
              areaStyle: {
                color: 'rgba(98, 246, 251, 0.2)'
              }
            },
            {
              name: '警戒水位',
              type: 'line',
              data: warningLevelData,
              symbol: 'none',
              lineStyle: {
                color: '#ff6b6b',
                width: 2,
                type: 'dashed'
              }
            }
          ]
        }
        this.forecastWaterLevelChart.setOption(option)
      }
    },
    initForecastFlowChart() {
      if (document.getElementById('forecastFlowChart')) {
        if (this.forecastFlowChart) {
          this.forecastFlowChart.dispose()
        }
        this.forecastFlowChart = echarts.init(document.getElementById('forecastFlowChart'))
        
        const is24h = this.selectedTimeRange === '24h'
        
        const xAxisData24h = ['00:00', '06:00', '12:00', '18:00', '次日00:00']
        const xAxisData72h = ['00:00', '12:00', '24:00', '36:00', '48:00', '60:00', '72:00']
        
        const flowData24h = [45.2, 52.8, 68.5, 62.3, 58.0]
        const flowData72h = [45.2, 52.8, 68.5, 62.3, 55.7, 48.2, 42.5]
        
        const option = {
          animation: false,
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: is24h ? xAxisData24h : xAxisData72h,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6'
            }
          },
          yAxis: {
            type: 'value',
            name: '流量(m³/s)',
            nameTextStyle: {
              color: '#7bbef6'
            },
            min: 0,
            max: 100,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(123, 190, 246, 0.2)'
              }
            }
          },
          series: [
            {
              name: '预报流量',
              type: 'line',
              data: is24h ? flowData24h : flowData72h,
              lineStyle: {
                color: '#00d4ff',
                width: 2
              },
              itemStyle: {
                color: '#00d4ff'
              },
              areaStyle: {
                color: 'rgba(0, 212, 255, 0.2)'
              }
            }
          ]
        }
        this.forecastFlowChart.setOption(option)
      }
    },
    initInflowForecastChart() {
      if (document.getElementById('inflowForecastChart')) {
        if (this.inflowForecastChart) {
          this.inflowForecastChart.dispose()
        }
        this.inflowForecastChart = echarts.init(document.getElementById('inflowForecastChart'))
        
        const is24h = this.selectedTimeRange === '24h'
        
        const xAxisData24h = ['00:00', '06:00', '12:00', '18:00']
        const xAxisData72h = ['00:00', '12:00', '24:00', '36:00', '48:00', '60:00', '72:00']
        
        const totalInflowData24h = [45.2, 52.8, 68.5, 62.3]
        const totalInflowData72h = [45.2, 52.8, 68.5, 62.3, 58.4, 52.1, 46.8]
        
        const rainfallRunoff24h = [25, 30, 40, 36]
        const rainfallRunoff72h = [25, 30, 40, 36, 34, 30, 27]
        
        const undergroundRunoff24h = [12, 14, 16, 14]
        const undergroundRunoff72h = [12, 14, 16, 14, 15, 14, 13]
        
        const intervalRunoff24h = [8.2, 8.8, 12.5, 12.3]
        const intervalRunoff72h = [8.2, 8.8, 12.5, 12.3, 9.4, 8.1, 6.8]
        
        const option = {
          animation: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          title: {
            text: '流量(m³/s)',
            left: '10%',
            top: -3,
            textStyle: {
              color: '#7bbef6',
              fontSize: 10
            }
          },
          legend: {
            data: ['总入库', '降雨径流', '地下径流', '区间汇流'],
            textStyle: {
              color: '#7bbef6',
              fontSize: 9
            },
            bottom: '0%'
          },
          grid: {
            left: '12%',
            right: '4%',
            bottom: '22%',
            top: '18%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: is24h ? xAxisData24h : xAxisData72h,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            }
          },
          yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(123, 190, 246, 0.2)'
              }
            }
          },
          series: [
            {
              name: '总入库',
              type: 'line',
              data: is24h ? totalInflowData24h : totalInflowData72h,
              lineStyle: {
                color: '#62f6fb',
                width: 2
              },
              itemStyle: {
                color: '#62f6fb'
              },
              areaStyle: {
                color: 'rgba(98, 246, 251, 0.2)'
              }
            },
            {
              name: '降雨径流',
              type: 'bar',
              stack: 'total',
              barWidth: '35%',
              data: is24h ? rainfallRunoff24h : rainfallRunoff72h,
              itemStyle: {
                color: '#62f6fb'
              }
            },
            {
              name: '地下径流',
              type: 'bar',
              stack: 'total',
              barWidth: '35%',
              data: is24h ? undergroundRunoff24h : undergroundRunoff72h,
              itemStyle: {
                color: '#38bdf8'
              }
            },
            {
              name: '区间汇流',
              type: 'bar',
              stack: 'total',
              barWidth: '35%',
              data: is24h ? intervalRunoff24h : intervalRunoff72h,
              itemStyle: {
                color: '#3b82f6'
              }
            }
          ]
        }
        this.inflowForecastChart.setOption(option)
      }
    },
    initOutflowCombinedChart() {
      if (document.getElementById('outflowCombinedChart')) {
        if (this.outflowCombinedChart) {
          this.outflowCombinedChart.dispose()
        }
        this.outflowCombinedChart = echarts.init(document.getElementById('outflowCombinedChart'))
        
        const is24h = this.selectedTimeRange === '24h'
        
        const xAxisData24h = ['00:00', '06:00', '12:00', '18:00']
        const xAxisData72h = ['00:00', '12:00', '24:00', '36:00', '48:00', '60:00', '72:00']
        
        const totalOutflowData24h = [38.5, 45.2, 55.8, 50.3]
        const totalOutflowData72h = [38.5, 45.2, 55.8, 50.3, 46.2, 42.1, 38.5]
        
        const powerGen24h = [12, 15, 18, 16]
        const powerGen72h = [12, 15, 18, 16, 15, 14, 12]
        
        const irrigation24h = [18, 20, 22, 20]
        const irrigation72h = [18, 20, 22, 20, 19, 18, 18]
        
        const ecology24h = [5, 6, 7, 6]
        const ecology72h = [5, 6, 7, 6, 6, 6, 5]
        
        const floodDischarge24h = [3.5, 4.2, 8.8, 8.3]
        const floodDischarge72h = [3.5, 4.2, 8.8, 8.3, 6.2, 4.1, 3.5]
        
        const option = {
          animation: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          title: {
            text: '流量(m³/s)',
            left: '10%',
            top: -3,
            textStyle: {
              color: '#7bbef6',
              fontSize: 10
            }
          },
          legend: {
            data: ['总出库', '发电', '灌溉', '生态', '泄洪'],
            textStyle: {
              color: '#7bbef6',
              fontSize: 9
            },
            bottom: '0%'
          },
          grid: {
            left: '12%',
            right: '4%',
            bottom: '22%',
            top: '18%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: is24h ? xAxisData24h : xAxisData72h,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            }
          },
          yAxis: {
            type: 'value',
            min: 0,
            max: 80,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(123, 190, 246, 0.2)'
              }
            }
          },
          series: [
            {
              name: '总出库',
              type: 'line',
              data: is24h ? totalOutflowData24h : totalOutflowData72h,
              lineStyle: {
                color: '#00d4ff',
                width: 2
              },
              itemStyle: {
                color: '#00d4ff'
              },
              areaStyle: {
                color: 'rgba(0, 212, 255, 0.2)'
              }
            },
            {
              name: '发电',
              type: 'bar',
              stack: 'total',
              barWidth: '35%',
              data: is24h ? powerGen24h : powerGen72h,
              itemStyle: {
                color: '#62f6fb'
              }
            },
            {
              name: '灌溉',
              type: 'bar',
              stack: 'total',
              barWidth: '35%',
              data: is24h ? irrigation24h : irrigation72h,
              itemStyle: {
                color: '#38bdf8'
              }
            },
            {
              name: '生态',
              type: 'bar',
              stack: 'total',
              barWidth: '35%',
              data: is24h ? ecology24h : ecology72h,
              itemStyle: {
                color: '#3b82f6'
              }
            },
            {
              name: '泄洪',
              type: 'bar',
              stack: 'total',
              barWidth: '35%',
              data: is24h ? floodDischarge24h : floodDischarge72h,
              itemStyle: {
                color: '#f97316'
              }
            }
          ]
        }
        this.outflowCombinedChart.setOption(option)
      }
    },
    initStorageCapacityChart() {
      if (document.getElementById('storageCapacityChart')) {
        if (this.storageCapacityChart) {
          this.storageCapacityChart.dispose()
        }
        this.storageCapacityChart = echarts.init(document.getElementById('storageCapacityChart'))
        
        const is24h = this.selectedTimeRange === '24h'
        
        const xAxisData24h = ['00:00', '06:00', '12:00', '18:00', '次日00:00']
        const xAxisData72h = ['00:00', '12:00', '24:00', '36:00', '48:00', '60:00', '72:00']
        
        const waterLevelData24h = [18.2, 18.3, 18.5, 18.8, 18.6]
        const waterLevelData72h = [18.2, 18.3, 18.5, 18.8, 18.7, 18.5, 18.4]
        
        const storageData24h = [220, 225, 230, 235, 232]
        const storageData72h = [220, 225, 230, 235, 242, 240, 238]
        
        const option = {
          animation: false,
          tooltip: {
            trigger: 'axis'
          },
          title: [
            {
              text: '水位(m)',
              left: '10%',
              top: -3,
              textStyle: {
                color: '#ffd93d',
                fontSize: 10
              }
            },
            {
              text: '蓄水量(万m³)',
              right: '15%',
              top: -3,
              textStyle: {
                color: '#62f6fb',
                fontSize: 10
              }
            }
          ],
          legend: {
            data: ['水位', '蓄水量'],
            textStyle: {
              color: '#7bbef6',
              fontSize: 9
            },
            bottom: '0%'
          },
          grid: {
            left: '12%',
            right: '15%',
            bottom: '20%',
            top: '18%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: is24h ? xAxisData24h : xAxisData72h,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            }
          },
          yAxis: [
            {
              type: 'value',
              min: 16,
              max: 22,
              axisLine: {
                lineStyle: {
                  color: '#ffd93d'
                }
              },
              axisLabel: {
                color: '#ffd93d',
                fontSize: 10
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(123, 190, 246, 0.2)'
                }
              }
            },
            {
              type: 'value',
              min: 0,
              max: 300,
              position: 'right',
              axisLine: {
                lineStyle: {
                  color: '#62f6fb'
                }
              },
              axisLabel: {
                color: '#62f6fb',
                fontSize: 10
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '水位',
              type: 'line',
              yAxisIndex: 0,
              data: is24h ? waterLevelData24h : waterLevelData72h,
              lineStyle: {
                color: '#ffd93d',
                width: 2
              },
              itemStyle: {
                color: '#ffd93d'
              }
            },
            {
              name: '蓄水量',
              type: 'line',
              yAxisIndex: 1,
              data: is24h ? storageData24h : storageData72h,
              lineStyle: {
                color: '#62f6fb',
                width: 2
              },
              itemStyle: {
                color: '#62f6fb'
              }
            }
          ]
        }
        this.storageCapacityChart.setOption(option)
      }
    },
    initCapacityPieChart() {
      if (document.getElementById('capacityPieChart')) {
        if (this.capacityPieChart) {
          this.capacityPieChart.dispose()
        }
        this.capacityPieChart = echarts.init(document.getElementById('capacityPieChart'))
        
        const is24h = this.selectedTimeRange === '24h'
        
        const forecastStorage24h = 235
        const forecastStorage72h = 242
        
        const option = {
          animation: false,
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}万m³ ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 5,
            top: 'center',
            textStyle: {
              color: '#7bbef6',
              fontSize: 9
            },
            itemWidth: 10,
            itemHeight: 10
          },
          grid: {
            right: '30%'
          },
          series: [
            {
              name: '库容结构',
              type: 'pie',
              radius: ['40%', '72%'],
              center: ['35%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderColor: 'rgba(0, 30, 60, 0.6)',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 12,
                  fontWeight: 'bold',
                  color: '#e0fcff'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: 50,
                  name: '死库容',
                  itemStyle: {
                    color: 'rgba(123, 190, 246, 0.3)'
                  }
                },
                {
                  value: is24h ? forecastStorage24h : forecastStorage72h,
                  name: '已预报蓄水量',
                  itemStyle: {
                    color: '#62f6fb'
                  }
                },
                {
                  value: is24h ? 80 : 73,
                  name: '兴利库容剩余',
                  itemStyle: {
                    color: '#38bdf8'
                  }
                },
                {
                  value: is24h ? 35 : 30,
                  name: '防洪库容剩余',
                  itemStyle: {
                    color: '#f97316'
                  }
                }
              ]
            }
          ]
        }
        this.capacityPieChart.setOption(option)
      }
    }
  }
}
</script>

<style scoped>
.forecast-panel {
  width: 100%;
  height: 100%;
}

.left-sidebar {
  position: absolute;
  left: 20px;
  top: 120px;
  width: 350px;
  z-index: 5;
}

.right-sidebar {
  position: absolute;
  right: 20px;
  top: 120px;
  width: 350px;
  z-index: 5;
}

.sidebar-wrapper {
  position: relative;
}

.mt-20 {
  margin-top: 20px;
}

.data-card {
  width: 100%;
  background: rgba(0, 20, 40, 0.7);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.card-header {
  height: 50px;
  background-image: url('/src/assets/images/数据小标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 20px 0;
  cursor: pointer;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #e0fcff;
  margin: 0;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  padding-left: 20px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 5px;
}

.update-time {
  color: #62f6fb;
  font-size: 14px;
  font-family: monospace;
}

.toggle-btn {
  color: #e0fcff;
  font-size: 14px;
  cursor: pointer;
}

.card-body {
  padding: 12px;
  min-height: auto;
  font-size: 16px;
  line-height: 1.6;
  margin-top: -10px;
}

.chart-box {
  padding: 0;
}

.chart-container-wrapper {
  padding: 0;
  margin-bottom: 0px;
}

.chart-title {
  color: #7bbef6;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
  text-align: left;
}

.five-day-rainfall {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 10px;
}

.rainfall-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 2px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  flex: 1;
  min-width: 50px;
}

.rainfall-icon {
  font-size: 24px;
}

.day-name {
  color: #7bbef6;
  font-size: 12px;
  font-weight: bold;
  margin-top: 2px;
}

.rainfall-value {
  color: #62f6fb;
  font-size: 11px;
  font-weight: bold;
  margin-top: 4px;
}

.warning-levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warning-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.warning-indicator {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.warning-indicator.blue {
  background-color: #3b82f6;
}

.warning-indicator.yellow {
  background-color: #ffd93d;
}

.warning-indicator.orange {
  background-color: #f97316;
}

.warning-indicator.red {
  background-color: #ef4444;
}

.warning-info {
  flex: 1;
}

.warning-name {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
}

.warning-desc {
  color: #7bbef6;
  font-size: 12px;
  margin-top: 2px;
}

.stations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.station-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.station-name {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
}

.station-value {
  font-size: 14px;
  font-weight: bold;
}

.station-value.normal {
  color: #62f6fb;
}

.station-value.warning {
  color: #ffd93d;
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
}

.summary-label {
  color: #7bbef6;
  font-size: 13px;
}

.summary-value {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
}

.summary-value.warning {
  color: #3b82f6;
}

.district-rainfall-content {
  display: flex;
  gap: 12px;
}

.rainfall-map-container {
  flex: 1;
  height: 140px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rainfall-map-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.rainfall-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 1px;
}

.legend-color.level-0 {
  background-color: #4ade80;
}

.legend-color.level-1 {
  background-color: #22c55e;
}

.legend-color.level-2 {
  background-color: #38bdf8;
}

.legend-color.level-3 {
  background-color: #3b82f6;
}

.legend-color.level-4 {
  background-color: #f472b6;
}

.legend-color.level-5 {
  background-color: #9f1239;
}

.legend-text {
  color: #e0fcff;
  font-size: 10px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.chart-header .chart-title {
  margin-bottom: 0;
}

.station-dropdown {
  position: relative;
}

.dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(0, 20, 40, 0.5);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 3px;
  color: #e0fcff;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 4px;
}

.dropdown-toggle:hover {
  border-color: #62f6fb;
  background: rgba(98, 246, 251, 0.1);
}

.dropdown-arrow {
  color: #62f6fb;
  font-size: 10px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: rgba(0, 20, 40, 0.95);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 3px;
  z-index: 10;
  overflow: hidden;
  min-width: 100px;
}

.dropdown-item {
  padding: 6px 10px;
  color: #7bbef6;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dropdown-item:hover {
  background: rgba(98, 246, 251, 0.15);
  color: #e0fcff;
}

.dropdown-item.active {
  background: rgba(98, 246, 251, 0.2);
  color: #e0fcff;
}

.extreme-water-level {
  margin-top: 2px;
}

.extreme-title {
  color: #62f6fb;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.extreme-item {
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 10px 12px;
}

.station-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.station-row .station-name {
  color: #e0fcff;
  font-size: 13px;
  font-weight: bold;
}

.station-divider {
  height: 1px;
  background: rgba(0, 212, 255, 0.2);
  margin: 6px 0;
}

.extreme-values {
  display: flex;
  gap: 20px;
}

.extreme-value {
  display: flex;
  align-items: center;
  gap: 4px;
}

.extreme-label {
  color: #7bbef6;
  font-size: 12px;
  font-weight: bold;
}

.extreme-number {
  color: #62f6fb;
  font-size: 14px;
  font-weight: bold;
}

.extreme-time {
  color: #7bbef6;
  font-size: 11px;
}

.reservoir-section {
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 8px;
}

.section-title {
  color: #62f6fb;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.mt-15 {
  margin-top: 15px;
}

.mt-10 {
  margin-top: 10px;
}

.forecast-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(98, 246, 251, 0.1);
  border: 1px solid rgba(98, 246, 251, 0.3);
  border-radius: 4px;
  color: #62f6fb;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.time-range-dropdown {
  position: absolute;
  top: 0;
  left: -70px;
  z-index: 10;
}
</style>
