<template>
  <div class="water-allocation-container">
    <div class="secondary-title-container">
      <div 
        class="secondary-title" 
        :class="{ active: activeSecondaryTab === '调配基础数据' }"
        @click="selectSecondaryTab('调配基础数据')"
      >
        <span>调配基础数据</span>
      </div>
      <div 
        class="secondary-title" 
        :class="{ active: activeSecondaryTab === '供水关系分析' }"
        @click="selectSecondaryTab('供水关系分析')"
      >
        <span>供水关系分析</span>
      </div>
      <div 
        class="secondary-title" 
        :class="{ active: activeSecondaryTab === '需水优化建议' }"
        @click="selectSecondaryTab('需水优化建议')"
      >
        <span>需水优化建议</span>
      </div>
      <div 
        class="secondary-title" 
        :class="{ active: activeSecondaryTab === '调配效果预演' }"
        @click="selectSecondaryTab('调配效果预演')"
      >
        <span>调配效果预演</span>
      </div>
    </div>

    <div class="left-sidebar">
      <div class="data-card">
        <div class="card-header" @click="toggleBasicData">
          <h3 class="card-title">基础数据</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ basicDataExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="basicDataExpanded" class="card-body">
          <div class="basic-data-content">
            <div class="data-item">
              <div class="data-label">当前库容</div>
              <div class="data-value">2350.8 万m³</div>
            </div>
            <div class="data-item">
              <div class="data-label">可用水量</div>
              <div class="data-value">1820.5 万m³</div>
            </div>
            <div class="data-item">
              <div class="data-label">日均需水</div>
              <div class="data-value">85.2 万m³</div>
            </div>
            <div class="data-item">
              <div class="data-label">日均供水</div>
              <div class="data-value">82.6 万m³</div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header" @click="toggleReservoirStatus">
          <h3 class="card-title">水库状态</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ reservoirStatusExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="reservoirStatusExpanded" class="card-body">
          <div class="reservoir-list">
            <div class="reservoir-item" v-for="(res, index) in reservoirs" :key="index">
              <div class="reservoir-name">{{ res.name }}</div>
              <div class="reservoir-level" :class="res.level > res.capacity * 0.8 ? 'warning' : 'normal'">
                {{ res.level.toFixed(1) }}m
              </div>
              <div class="reservoir-capacity">
                {{ (res.level / res.capacity * 100).toFixed(0) }}%
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header" @click="toggleAllocationPlan">
          <h3 class="card-title">调配方案</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ allocationPlanExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="allocationPlanExpanded" class="card-body">
          <div class="allocation-content">
            <div class="chart-box">
              <div class="chart-title">今日水资源分配</div>
              <canvas id="allocationChart" width="300" height="180"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-sidebar">
      <div class="data-card">
        <div class="card-header" @click="toggleDemandAnalysis">
          <h3 class="card-title">需水分析</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ demandAnalysisExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="demandAnalysisExpanded" class="card-body">
          <div class="demand-list">
            <div class="demand-item" v-for="(demand, index) in demands" :key="index">
              <div class="demand-name">{{ demand.name }}</div>
              <div class="demand-value">{{ demand.value }} 万m³</div>
              <div class="demand-percent">{{ demand.percent }}%</div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header" @click="toggleOptimization">
          <h3 class="card-title">优化建议</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ optimizationExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="optimizationExpanded" class="card-body">
          <div class="suggestion-list">
            <div class="suggestion-item" v-for="(sug, index) in suggestions" :key="index">
              <div class="suggestion-icon">{{ sug.icon }}</div>
              <div class="suggestion-text">{{ sug.text }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="data-card mt-20">
        <div class="card-header" @click="toggleEffectPreview">
          <h3 class="card-title">效果预演</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ effectPreviewExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="effectPreviewExpanded" class="card-body">
          <div class="preview-content">
            <div class="preview-stats">
              <div class="stat-row">
                <div class="stat-label">预计节水</div>
                <div class="stat-value">+12.5%</div>
              </div>
              <div class="stat-row">
                <div class="stat-label">供水保证率</div>
                <div class="stat-value">98.2%</div>
              </div>
              <div class="stat-row">
                <div class="stat-label">生态流量</div>
                <div class="stat-value">达标</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'WaterResourceAllocationView',
  components: {
    DataCard
  },
  props: {
    activeSecondaryTab: {
      type: String,
      default: '调配基础数据'
    }
  },
  emits: ['selectSecondaryTab'],
  data() {
    return {
      basicDataExpanded: true,
      reservoirStatusExpanded: true,
      allocationPlanExpanded: true,
      demandAnalysisExpanded: true,
      optimizationExpanded: true,
      effectPreviewExpanded: true,
      allocationChart: null,
      reservoirs: [
        { name: '小塔山水库', level: 18.6, capacity: 22.5 },
        { name: '吴山水库', level: 12.3, capacity: 15.0 },
        { name: '陡沟水库', level: 8.5, capacity: 10.0 }
      ],
      demands: [
        { name: '农业灌溉', value: 45.8, percent: 54 },
        { name: '工业用水', value: 22.5, percent: 26 },
        { name: '居民生活', value: 12.3, percent: 14 },
        { name: '生态环境', value: 4.6, percent: 5 }
      ],
      suggestions: [
        { icon: '💧', text: '建议灌区采用滴灌技术' },
        { icon: '⚡', text: '优化工业用水循环利用率' },
        { icon: '🌱', text: '加强生态补水调度' }
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      this.initCharts()
    }, 100)
  },
  beforeUnmount() {
    this.destroyCharts()
  },
  methods: {
    selectSecondaryTab(tab) {
      this.$emit('selectSecondaryTab', tab)
    },
    toggleBasicData() {
      this.basicDataExpanded = !this.basicDataExpanded
    },
    toggleReservoirStatus() {
      this.reservoirStatusExpanded = !this.reservoirStatusExpanded
    },
    toggleAllocationPlan() {
      this.allocationPlanExpanded = !this.allocationPlanExpanded
      if (this.allocationPlanExpanded) {
        setTimeout(() => {
          this.initAllocationChart()
        }, 100)
      }
    },
    toggleDemandAnalysis() {
      this.demandAnalysisExpanded = !this.demandAnalysisExpanded
    },
    toggleOptimization() {
      this.optimizationExpanded = !this.optimizationExpanded
    },
    toggleEffectPreview() {
      this.effectPreviewExpanded = !this.effectPreviewExpanded
    },
    initCharts() {
      this.initAllocationChart()
    },
    destroyCharts() {
      if (this.allocationChart) {
        this.allocationChart.dispose()
      }
    },
    initAllocationChart() {
      if (document.getElementById('allocationChart')) {
        if (this.allocationChart) {
          this.allocationChart.dispose()
        }
        this.allocationChart = echarts.init(document.getElementById('allocationChart'))
        const option = {
          animation: false,
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}万m³ ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
              color: '#7bbef6'
            }
          },
          series: [
            {
              name: '水资源分配',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: 'rgba(0, 30, 60, 0.6)',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#e0fcff'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 45.8, name: '农业灌溉', itemStyle: { color: '#62f6fb' } },
                { value: 22.5, name: '工业用水', itemStyle: { color: '#00d4ff' } },
                { value: 12.3, name: '居民生活', itemStyle: { color: '#38bdf8' } },
                { value: 4.6, name: '生态环境', itemStyle: { color: 'rgba(123, 190, 246, 0.5)' } }
              ]
            }
          ]
        }
        this.allocationChart.setOption(option)
      }
    }
  }
}
</script>

<style scoped>
.water-allocation-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.secondary-title-container {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 4;
}

.secondary-title {
  width: 159px;
  height: 31px;
  background-image: url('/src/assets/images/未选中底部标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-title span {
  background: linear-gradient(to bottom, #e2e8ff, #7bbef6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.secondary-title:hover,
.secondary-title.active {
  background-image: url('/src/assets/images/选中底部标题.png');
}

.secondary-title:hover span,
.secondary-title.active span {
  background: linear-gradient(to bottom, #e2e8ff, #62f6fb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

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

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

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

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

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

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

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

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

.reservoir-level {
  font-size: 14px;
  font-weight: bold;
}

.reservoir-level.normal {
  color: #62f6fb;
}

.reservoir-level.warning {
  color: #ffd93d;
}

.reservoir-capacity {
  color: #7bbef6;
  font-size: 13px;
}

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

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

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

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

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

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

.demand-percent {
  color: #7bbef6;
  font-size: 13px;
}

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

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

.suggestion-icon {
  font-size: 20px;
}

.suggestion-text {
  color: #e0fcff;
  font-size: 13px;
}

.preview-content {
  padding: 5px;
}

.preview-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-row {
  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);
}

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

.stat-value {
  color: #62f6fb;
  font-size: 14px;
  font-weight: bold;
}
</style>
