<template>
  <div class="wrapper">
    <div ref="chart" :class="className" :style="{height:height,width:width}" />
    <div class="select-time">
      <el-date-picker
        v-model="chartTime"
        :picker-options="pickerOptions"
        align="right"
        value-format="yyyy-MM-dd"
        end-placeholder="结束日期"
        @change="staticAmountLine"
        range-separator="至"
        start-placeholder="开始日期"
        type="daterange"
        unlink-panels
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize';
import {
  echartsConfig,
  generateRandomNumbers,
  legendData,
  legendMap,
  seriesData
} from '@/views/dashboard/mixins/echartsConfig'
import { staticAmountLine } from '@/api/cai/static'
import { formatDate1 } from '@/utils'
import publisherInstance from '@/utils/pubsub'

legendData.forEach((name, index)=> {
  if (!echartsConfig.legend.selected) {
    echartsConfig.legend.selected = {};
  }
  echartsConfig.legend.selected[name] = index === 0;
});

const pickerOptions = {
  shortcuts: [{
    text: '最近一周',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', [start, end])
    }
  }, {
    text: '最近一个月',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      picker.$emit('pick', [start, end])
    }
  }, {
    text: '最近三个月',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      picker.$emit('pick', [start, end])
    }
  }]
}

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    return {
      chart: null,
      pickerOptions,
      chartTime: [formatDate1(start), formatDate1(end)],
    }
  },
  mounted() {
    publisherInstance.subscribe('refresh', this.staticAmountLine);
    this.$nextTick(() => {
      this.chart = echarts.init(this.$refs.chart, 'macarons')
      this.staticAmountLine();
    })
  },
  methods: {
     async staticAmountLine() {
       const [beginDate, endDate] = this.chartTime;
       const { code, data } = await staticAmountLine(beginDate, endDate);
       if (code === 200) {
         const { x } = data;
         echartsConfig.xAxis.data = x;
         const series = [];
         for (const key in legendMap) {
           const name = legendMap[key];
           series.push({
             name,
             yAxisIndex: key === 'orderCountData' ? 1 : 0,
             data: data[key],
             type: "line",
           })
         }
         const options = this.chart.getOption();
         if (options && options.legend) {
           echartsConfig.legend = { selected: options.legend[0].selected }
         }
         echartsConfig.series = series;
         this.initChart(echartsConfig)
       }
    },
    initChart(chartData) {
      this.chart.setOption(chartData);
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }
}
</script>

<style scoped lang="scss">
.select-time {
  width: 250px;
  position: absolute;
  right: 16px;
  top: 16px;
  .el-date-editor {
    width: 100%;
  }
}
</style>
