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

      <el-select v-model="statMode" :placeholder="$t('common.pleaseSelect')" style="width: 100px;"
                 @change="leadStatModeChange">
        <el-option :label="$t('board.year')" value="year"></el-option>
        <el-option :label="$t('board.month')" value="month"></el-option>
        <el-option :label="$t('board.day')" value="day"></el-option>
      </el-select>

      <date-picker v-if="statMode === 'year'" v-model="query.leadDateRange" :end-placeholder="$t('common.endYear')"
                   :start-placeholder="$t('common.startYear')" range-separator="~"
                   type="yearrange"
                   value-format="yyyy-MM-dd"/>
      <el-date-picker v-if="statMode === 'month'" v-model="query.leadDateRange"
                      :end-placeholder="$t('common.endMonth')" :start-placeholder="$t('common.startMonth')"
                      range-separator="~"
                      type="monthrange" value-format="yyyy-MM-dd"/>
      <el-date-picker v-if="statMode === 'day'" v-model="query.leadDateRange" :end-placeholder="$t('common.endDay')"
                      :start-placeholder="$t('common.startDay')" range-separator="~"
                      type="daterange" value-format="yyyy-MM-dd"/>

      <div class="buttons">
            <el-button size="mini" type="primary" @click="getList">{{ $t('common.search') }}</el-button>
            <el-button size="mini" @click="reset">{{ $t('common.reset') }}</el-button>
      </div>
    </div>

    <!--<el-form ref="ruleForm" :model="query" :rules="rules" class="demo-ruleForm" label-width="100px">-->
    <!--  <el-row>-->
    <!--    <el-col :span="6">-->
    <!--      <el-form-item :label="$t('board.statType')" prop="statMode">-->
    <!--        <el-select v-model="statMode" :placeholder="$t('common.pleaseSelect')" style="width: 100px;"-->
    <!--                   @change="leadStatModeChange">-->
    <!--          <el-option :label="$t('board.year')" value="year"></el-option>-->
    <!--          <el-option :label="$t('board.month')" value="month"></el-option>-->
    <!--          <el-option :label="$t('board.day')" value="day"></el-option>-->
    <!--        </el-select>-->
    <!--      </el-form-item>-->
    <!--    </el-col>-->
    <!--    <el-col :span="6">-->
    <!--      <el-form-item :label="compDateRangeLabel" prop="leadDateRange">-->
    <!--        <date-picker v-if="statMode === 'year'" v-model="query.leadDateRange" :end-placeholder="$t('common.endYear')"-->
    <!--                     :start-placeholder="$t('common.startYear')" range-separator="~"-->
    <!--                     type="yearrange"-->
    <!--                     value-format="yyyy-MM-dd"/>-->
    <!--        <el-date-picker v-if="statMode === 'month'" v-model="query.leadDateRange"-->
    <!--                        :end-placeholder="$t('common.endMonth')" :start-placeholder="$t('common.startMonth')"-->
    <!--                        range-separator="~"-->
    <!--                        type="monthrange" value-format="yyyy-MM-dd"/>-->
    <!--        <el-date-picker v-if="statMode === 'day'" v-model="query.leadDateRange" :end-placeholder="$t('common.endDay')"-->
    <!--                        :start-placeholder="$t('common.startDay')" range-separator="~"-->
    <!--                        type="daterange" value-format="yyyy-MM-dd"/>-->
    <!--      </el-form-item>-->
    <!--    </el-col>-->
    <!--    <el-col :span="6" :offset="6">-->
    <!--      <el-form-item>-->
    <!--        <el-button size="mini" type="primary" @click="getList">{{ $t('common.search') }}</el-button>-->
    <!--        <el-button size="mini" @click="reset">{{ $t('common.reset') }}</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-col>-->
    <!--  </el-row>-->
    <!--</el-form>-->

    <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:  []
      },
      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() {
    // 默认最近半年
    this.resetDate()

    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: {
          // text: '线索日统计表',
        },

        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;
      if (!this.query.leadDateRange) {
        this.$message.error(this.$t('board.msgLeadDateRange'))
        return
      }
      const param = {
        startDate: this.query.leadDateRange[0],
        endDate: this.query.leadDateRange[1],
        statMode: this.statMode
      }
      const response = await getLeadCountStat(param);
      this.xAxisData = response.data?.xAxisData || [];
      this.seriesData = response.data?.seriesData || [];
      this.chart.setOption({
        xAxis: [{
          data: this.xAxisData
        }],
        series: [{
          data: this.seriesData
        }]
      })
    },

    leadStatModeChange(val) {
      // console.log(val)
      // console.log(this.statMode)
      if (!val) {
        return
      }
      switch (val) {
        case 'year':
          // 当年第一天到今天
          this.query.leadDateRange = [moment().startOf('year').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
          break
        case 'month':
          // 当月第一天到今天
          this.query.leadDateRange = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
          break
        case 'day':
          // 当天
          this.query.leadDateRange = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
          break
      }
    },

    resetDate() {
      // this.$refs.ruleForm.resetFields()
      this.statMode = 'month'
      // 获取六个月前的日期
      const sixMonthsAgo = moment().subtract(6, 'months')
      // 获取六个月前所在月的第一天
      const startDate = sixMonthsAgo.startOf('month').format('YYYY-MM-DD')
      // 获取今天的日期
      const endDate = moment().format('YYYY-MM-DD')
      // 设置日期范围
      this.query.leadDateRange = [startDate, endDate]
    },

    reset() {
      this.resetDate()
      // 获取列表
      this.getList()
    }


  }
}
</script>

<style lang="scss" scoped>

.chart-box {

  .chart-box-title {
    padding: .5rem;
    font-size: 16px;
    font-weight: bold;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    gap: 1rem;

    .buttons {
      margin-left: auto;
    }
  }

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