<template>
    <div ref="chart" :style="{ width: '100%', height: height }"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  import { debounce } from 'lodash'
  
  export default {
    name: 'LineChart',
    props: {
      data: {
        type: Object,
        required: true
      },
      height: {
        type: String,
        default: '350px'
      },
      showHours: {
        type: Boolean,
        default: false
      },
      yAxisInterval: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHandler)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$refs.chart)
        this.setOptions()
      },
      setOptions() {
        const option = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            borderWidth: 0,
            textStyle: {
              color: '#fff'
            },
            axisPointer: {
              type: 'line',
              lineStyle: {
                color: '#ddd'
              }
            }
          },
          legend: {
            data: this.data.datasets.map(item => item.label),
            bottom: 0,
            icon: 'circle',
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 15,
            textStyle: {
              color: '#666'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            top: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.data.labels,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#eee'
              }
            },
            axisLabel: {
              color: '#666',
              formatter: (value) => {
                if (this.showHours) {
                  return value
                }
                return value.substring(5) // 只显示月-日
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#eee'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#666',
              formatter: (value) => {
                if (value >= 1000) {
                  return (value / 1000) + 'k'
                }
                return value
              }
            },
            interval: this.yAxisInterval
          },
          series: this.data.datasets.map(dataset => ({
            name: dataset.label,
            type: 'line',
            data: dataset.data,
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            emphasis: {
              focus: 'series',
              scale: false,
              itemStyle: {
                symbolSize: 8
              }
            },
            lineStyle: {
              width: 2,
              color: dataset.color
            },
            itemStyle: {
              color: dataset.color,
              borderWidth: 2,
              borderColor: '#fff'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.adjustColor(dataset.color, 0.3)
                },
                {
                  offset: 1,
                  color: this.adjustColor(dataset.color, 0.1)
                }
              ])
            }
          }))
        }
        
        this.chart.setOption(option)
      },
      adjustColor(color, opacity) {
        // 将十六进制颜色转换为 rgba
        if (color.startsWith('#')) {
          const r = parseInt(color.slice(1, 3), 16)
          const g = parseInt(color.slice(3, 5), 16)
          const b = parseInt(color.slice(5, 7), 16)
          return `rgba(${r}, ${g}, ${b}, ${opacity})`
        }
        // 如果已经是 rgba 格式，直接返回
        return color
      }
    },
    watch: {
      data: {
        handler() {
          this.setOptions()
        },
        deep: true
      }
    }
  }
  </script>