<template>
  <div id="card-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24">
          <el-button type="primary" size="mini" @click="totime('day')">本日</el-button>
          <el-button type="primary" size="mini" @click="totime('week')">本周</el-button>
          <el-button type="primary" size="mini" @click="totime('monthDay')">本月</el-button>
          <el-button type="primary" size="mini" @click="totime('yearMonth')">本年</el-button>
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="margin: 0 12px"
          >
          </el-date-picker>
          <el-button type="primary" size="mini" @click="totime(time, 1)">查询</el-button>
        </el-col>
        <el-col :span="24" class="two">
          <div id="card_six" style="width: 70vw; height: 30vw; margin: 40px 0 0 0"></div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
var myChart;
import * as echarts from 'echarts';
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('todo');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      xAxisList: [],
      seriesList: [],
      // 时间
      time: '',
    };
  },
  computed: {
    ...mapState(['user']),
  },
  async mounted() {
    await this.search();
  },
  async created() {},
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.query({ skip, limit, status: '3', type: info.time, start: info.start, end: info.end });
      if (this.$checkRes(res)) {
        let list = res.data.sAfterSale;
        let xAxisList = [];
        let seriesList = [];
        if (info.time == 'yearMonth') {
          for (let i = 1; i <= 12; i++) {
            let str = i;
            if (i < 10) str = `0${i}`;
            str = `-${str}-`;
            const l = list.filter((f) => f.date.includes(str));
            const month = `${i}月`;
            const num = l.reduce((p, n) => p + n.num, 0);
            xAxisList.push(month);
            seriesList.push(num);
          }
        } else {
          for (const p1 of list) {
            xAxisList.push(p1.date);
            seriesList.push(p1.num);
          }
        }
        this.$set(this, 'xAxisList', xAxisList);
        this.$set(this, 'seriesList', seriesList);
      }
    },
    totime(time, e) {
      if (e == '1') {
        let start = time[0];
        let end = time[1];
        this.search({ start, end, time: 'custom' });
      } else {
        this.search({ time });
      }
    },
    getEchartData(data) {
      if (myChart != null && myChart != '' && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = echarts.init(document.getElementById('card_six'));
      var option;
      option = {
        title: {
          text: '年度换货数/(单)',
        },
        color: '#FFD700',
        tooltip: {
          trigger: 'axis',
          // axisPointer: { type: 'shadow' },
          confine: true,
          // formatter: '{b}</br>收入{c}元', // 格式化数值百分比输出
        },
        xAxis: {
          type: 'category',
          data: this.xAxisList,
          // 设置x轴线的属性
          //使x轴文字显示全
          axisLabel: {
            show: true,
            rotate: 50,
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.seriesList,
            type: 'line',
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    seriesList: {
      deep: true,
      handler(val) {
        this.getEchartData();
      },
    },
  },
};
</script>

<style lang="less" scoped></style>
