<template>
  <div v-loading="loading">
    <el-date-picker
      v-model="queryParams.createDateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
      size="mini"
      @change="getList"
    />
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { dailyCreateCountCustomer } from '@/api/dashboard/customer'
import { getLastDateStr } from '@/utils/date'
import resize from '@/views/dashboard/mixins/resize'
export default {
  name: 'PerformanceChart',
  mixins: [resize],
  props: {
    query: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      chart: null,
      queryParams: {  
        createDateRange: [
          getLastDateStr(7),
          getLastDateStr(0)
        ]
      }
    }
  },
  created() {
    this.queryParams = {
      ...this.queryParams,
      ...this.query
    }
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      dailyCreateCountCustomer(this.queryParams).then(res => {
        this.list = res.data;
        this.initChart()
      }).finally(() => {
        this.loading = false
      })
    },
    initChart() {
      if (this.chart) {
        this.chart.dispose()
      }
      
      this.chart = echarts.init(this.$refs.chart)
      
      const xAxisData = this.list.map(item => item.key)
      const seriesData = this.list.map(item => item.value)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisTick: {
            alignWithLabel: true,
            show: false
          },
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [
          {
            name: '新增客户数',
            type: 'line',
            data: seriesData,
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: '#409EFF'
            },
            lineStyle: {
              width: 2
            },
          }
        ]
      }
      
      this.chart.setOption(option)
      
      // 监听窗口大小变化，调整图表大小
      window.addEventListener('resize', this.chart.resize)
    }
  },
  beforeDestroy() {
    if (this.chart) {
      window.removeEventListener('resize', this.chart.resize)
      this.chart.dispose()
      this.chart = null
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  margin-top: 16px;
  width: 100%;
  height: 200px;
}
</style>