<template>
  <div class="passenger-chart">
    <div class="chart-container" ref="passengerChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PassengerChart',
  props: {
    chartsData: {
      type: Object,
      default: () => ({
        labels: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
        areas: {
          'T1': [120, 280, 450, 380, 420, 500, 480, 320, 180],
          'T2': [150, 320, 520, 450, 480, 580, 550, 380, 200],
          'T3': [100, 250, 400, 350, 380, 450, 420, 280, 150]
        },
        totalFlow: [370, 850, 1370, 1180, 1280, 1530, 1450, 980, 530]
      })
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  watch: {
    chartsData: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          if (this.chart) this.chart.dispose()
          this.initChart()
        })
      }
    }
  },
  methods: {
    initChart() {
      if (!this.$refs.passengerChart) return
      this.chart = echarts.init(this.$refs.passengerChart)

      const colors = [
        ['#4da6ff', '#0f46fa'],
        ['#7eff7e', '#2ecc71'],
        ['#bd03fb', '#8a06e8'],
        ['#ffa500', '#ff6600'],
        ['#00bfff', '#0077be']
      ]

      const areaNames = Object.keys(this.chartsData.areas)
      const seriesBars = areaNames.map((areaName, idx) => {
        const [c1, c2] = colors[idx % colors.length]
        return {
          name: areaName,
          type: 'bar',
          yAxisIndex: 0,
          data: this.chartsData.areas[areaName],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: c1 },
              { offset: 1, color: c2 }
            ])
          },
          barWidth: '20%'
        }
      })

      const lineData = this.chartsData.totalFlow || []
      const allBarValues = Object.values(this.chartsData.areas).flat()
      const maxVal = Math.max(...allBarValues, ...lineData)

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(30, 27, 75, 0.95)',
          borderColor: '#A78BFA',
          textStyle: { color: '#fff' }
        },
        legend: {
          data: [...areaNames, '人流总数'],
          textStyle: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
          top: 0
        },
        grid: {
          left: '10%',
          right: '8%',
          bottom: '10%',
          top: '22%'
        },
        xAxis: {
          type: 'category',
          data: this.chartsData.labels,
          axisLabel: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
          axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
        },
        yAxis: [
          {
            type: 'value',
            name: '人数',
            nameTextStyle: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
            position: 'left',
            max: Math.ceil(maxVal * 1.2),
            axisLabel: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
            axisLine: { show: false },
            splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.05)' } }
          },
          {
            type: 'value',
            name: '人流总数',
            nameTextStyle: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
            position: 'right',
            max: Math.ceil(maxVal * 1.2),
            axisLabel: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
            axisLine: { show: false },
            splitLine: { show: false }
          }
        ],
        series: [
          ...seriesBars,
          {
            name: '人流总数',
            type: 'line',
            yAxisIndex: 1,
            data: lineData,
            smooth: true,
            itemStyle: { color: '#ffd93d' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255,217,61,0.3)' },
                { offset: 1, color: 'rgba(255,217,61,0.05)' }
              ])
            }
          }
        ]
      }
      this.chart.setOption(option)
    }
  },
  beforeDestroy() {
    if (this.chart) this.chart.dispose()
  }
}
</script>

<style lang="scss" scoped>
.passenger-chart {
  .chart-container {
    height: 380rpx;
  }
}
</style>