<template>
  <div class="chart-box">
    <div class="chart-box-title">
      <span>{{ $t('board.leadCountStat') }}</span>
    </div>



    <div ref="target" :class="className" :style="{height:height,width:width}"/>
  </div>


</template>

<script>
import * as echarts from 'echarts'
import resize from '../../mixins/resize'
import {getLeadCountStat} from "@/api/board/dashboard";
import DatePicker from '@/components/YearDatePicker/date-picker'
import '@/components/YearDatePicker/date-picker.css'
import moment from "moment-timezone";


require('echarts/theme/macarons') // echarts theme

const animationDuration = 2000

export default {
  components: {
    DatePicker
  },
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      xAxisData: [],
      seriesData: [],

      statMode: 'month',
      query: {
        leadDateRange:  [moment().subtract(6, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      },
      rules: {
        statMode: [
        ],
        leadDateRange: [
          {required: true, message: '请选择统计时间范围', trigger: 'change'}
        ]
      }

    }
  },

  computed: {
    compDateRangeLabel() {
      return {
        year: this.$t('board.queryY'),
        month: this.$t('board.queryM'),
        day: this.$t('board.queryD'),
      }[this.statMode]
    }
  },


  mounted() {
    // 默认最近半年
    // const now = new Date()
    // const halfYearAgo = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate())
    // // 转 yyyy-MM-dd
    // this.query.leadDateRange = [moment(halfYearAgo).format('YYYY-MM-DD'), moment(now).format('YYYY-MM-DD')]


    this.$nextTick(async () => {
      this.initChart()
      await this.getList();
      // this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.target, 'macarons')

      this.chart.setOption({
        title: {
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: '12%',
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: this.xAxisData,
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          minInterval:1,
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: this.$t('board.leadCount'),
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
          data: this.seriesData,
          animationDuration
        },]
      })
    },

    async getList() {
      // const {leadDateRange} = this.query;
      // console.log('this.query111', this.query.leadDateRange)
      const param = {
        startDate: this.query.leadDateRange[0],
        endDate: this.query.leadDateRange[1],
        statMode: this.statMode
      }
      const response = await getLeadCountStat(param);
      // console.log('response', response);
      this.xAxisData = response.data?.xAxisData || [];
      this.seriesData = response.data?.seriesData || [];
      this.chart.setOption({
        xAxis: [{
          data: this.xAxisData
        }],
        series: [{
          data: this.seriesData
        }]
      })
    },

    leadStatModeChange() {
      console.log(this.statMode)
    },

    reset() {
      this.$refs.ruleForm.resetFields()
      // 六个月
      // this.query.leadDateRange = [moment().subtract(6, 'months').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      this.getList()
    }

  }
}
</script>

<style lang="scss" scoped>

.chart-box {

  .chart-box-title {
    margin: 24px 0 0 24px;
    font-size: 16px;
    font-weight: bold;
  }

  .chart-box-query {
    display: flex;
    gap: 3rem;
    padding: .5rem;


    .chart-box-query-item {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .flex-right {
      margin-left: auto;
    }
  }

}

</style>
