<template>
  <div class="simulation-panel">
    <div class="left-sidebar">
      <div class="data-card">
        <div class="card-header">
          <h3 class="card-title">预演场景</h3>
        </div>
        <div class="card-body">
          <div class="scene-list">
            <div class="scene-item active">
              <div class="scene-name">暴雨红色预警</div>
              <div class="scene-desc">模拟100mm/24h暴雨</div>
            </div>
            <div class="scene-item">
              <div class="scene-name">水库泄洪</div>
              <div class="scene-desc">模拟小塔山泄洪</div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header">
          <h3 class="card-title">预演参数</h3>
        </div>
        <div class="card-body">
          <div class="param-list">
            <div class="param-item">
              <div class="param-name">预演时长</div>
              <div class="param-value">72小时</div>
            </div>
            <div class="param-item">
              <div class="param-name">时间步长</div>
              <div class="param-value">1小时</div>
            </div>
            <div class="param-item">
              <div class="param-name">计算精度</div>
              <div class="param-value">高精度</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-sidebar">
      <div class="data-card">
        <div class="card-header">
          <h3 class="card-title">预演结果</h3>
        </div>
        <div class="card-body">
          <div class="result-list">
            <div class="result-item">
              <div class="result-label">最高洪峰</div>
              <div class="result-value">4.8m</div>
            </div>
            <div class="result-item">
              <div class="result-label">最大流量</div>
              <div class="result-value">85.2m³/s</div>
            </div>
            <div class="result-item">
              <div class="result-label">影响范围</div>
              <div class="result-value">3个行政村</div>
            </div>
            <div class="result-item">
              <div class="result-label">预计损失</div>
              <div class="result-value warning">中</div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header">
          <h3 class="card-title">预演进度</h3>
        </div>
        <div class="card-body">
          <div class="progress-container">
            <div class="progress-bar">
              <div class="progress-fill" style="width: 75%"></div>
            </div>
            <div class="progress-text">75%</div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header">
          <h3 class="card-title">水库调度情景预报</h3>
        </div>
        <div class="card-body">
          <div class="chart-box">
            <canvas id="scenarioComparisonChart" width="300" height="120"></canvas>
          </div>
          <div class="chart-box mt-10">
            <canvas id="scenarioBarChart" width="300" height="120"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataCard from './DataCard.vue'
import * as echarts from 'echarts'

export default {
  name: 'HydrologySimulationPanel',
  components: {
    DataCard
  },
  data() {
    return {
      scenarioComparisonChart: null,
      scenarioBarChart: null
    }
  },
  mounted() {
    setTimeout(() => {
      this.initCharts()
    }, 100)
  },
  beforeUnmount() {
    this.destroyCharts()
  },
  methods: {
    initCharts() {
      this.initScenarioComparisonChart()
      this.initScenarioBarChart()
    },
    destroyCharts() {
      if (this.scenarioComparisonChart) {
        this.scenarioComparisonChart.dispose()
      }
      if (this.scenarioBarChart) {
        this.scenarioBarChart.dispose()
      }
    },
    initScenarioComparisonChart() {
      if (document.getElementById('scenarioComparisonChart')) {
        if (this.scenarioComparisonChart) {
          this.scenarioComparisonChart.dispose()
        }
        this.scenarioComparisonChart = echarts.init(document.getElementById('scenarioComparisonChart'))
        const option = {
          animation: false,
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['常规调度', '优化调度', '应急调度'],
            textStyle: {
              color: '#7bbef6',
              fontSize: 9
            },
            bottom: '0%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '06:00', '12:00', '18:00', '次日00:00'],
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            }
          },
          yAxis: {
            type: 'value',
            name: '水位(m)',
            nameTextStyle: {
              color: '#7bbef6',
              fontSize: 10
            },
            min: 16,
            max: 22,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(123, 190, 246, 0.2)'
              }
            }
          },
          series: [
            {
              name: '常规调度',
              type: 'line',
              data: [18.2, 18.3, 18.5, 18.6, 18.5],
              lineStyle: {
                color: '#62f6fb',
                width: 2
              },
              itemStyle: {
                color: '#62f6fb'
              }
            },
            {
              name: '优化调度',
              type: 'line',
              data: [18.2, 18.4, 18.7, 18.8, 18.6],
              lineStyle: {
                color: '#ffd93d',
                width: 2
              },
              itemStyle: {
                color: '#ffd93d'
              }
            },
            {
              name: '应急调度',
              type: 'line',
              data: [18.2, 18.5, 19.0, 19.2, 18.8],
              lineStyle: {
                color: '#f97316',
                width: 2
              },
              itemStyle: {
                color: '#f97316'
              }
            }
          ]
        }
        this.scenarioComparisonChart.setOption(option)
      }
    },
    initScenarioBarChart() {
      if (document.getElementById('scenarioBarChart')) {
        if (this.scenarioBarChart) {
          this.scenarioBarChart.dispose()
        }
        this.scenarioBarChart = echarts.init(document.getElementById('scenarioBarChart'))
        const option = {
          animation: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['常规调度', '优化调度', '应急调度'],
            textStyle: {
              color: '#7bbef6',
              fontSize: 9
            },
            bottom: '0%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '20%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['最高水位', '最大泄洪', '总弃水'],
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            }
          },
          yAxis: {
            type: 'value',
            name: '数值',
            nameTextStyle: {
              color: '#7bbef6',
              fontSize: 10
            },
            min: 0,
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6',
              fontSize: 10
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(123, 190, 246, 0.2)'
              }
            }
          },
          series: [
            {
              name: '常规调度',
              type: 'bar',
              data: [18.6, 45, 32],
              itemStyle: {
                color: '#62f6fb'
              }
            },
            {
              name: '优化调度',
              type: 'bar',
              data: [18.8, 52, 25],
              itemStyle: {
                color: '#ffd93d'
              }
            },
            {
              name: '应急调度',
              type: 'bar',
              data: [19.2, 65, 18],
              itemStyle: {
                color: '#f97316'
              }
            }
          ]
        }
        this.scenarioBarChart.setOption(option)
      }
    }
  }
}
</script>

<style scoped>
.simulation-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;
}

.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;
  padding: 6px 20px 0;
}

.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;
}

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

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

.scene-item {
  padding: 12px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.scene-name {
  color: #e0fcff;
  font-size: 15px;
  font-weight: bold;
}

.scene-desc {
  color: #7bbef6;
  font-size: 13px;
  margin-top: 4px;
}

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

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

.param-name {
  color: #7bbef6;
  font-size: 14px;
}

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

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

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

.result-label {
  color: #7bbef6;
  font-size: 14px;
}

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

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

.progress-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #62f6fb);
  border-radius: 10px;
  transition: width 0.5s ease;
}

.progress-text {
  color: #62f6fb;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.chart-box {
  padding: 0;
}

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

.mt-20 {
  margin-top: 20px;
}
</style>
