<template>
  <div class="chart-box">
    <div class="title-top">
      <span>每月店铺订单量日趋势</span>
    </div>
    <div class="chart" :id="id"></div>
  </div>

</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;

@Component
export default class Line01 extends Vue {
  id = this.randomString();

  mounted() {
    this.getData()
  }

  randomString() {
    const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    for (let i = 10; i > 0; --i)
      result += str[Math.floor(Math.random() * str.length)];
    return result;
  }
  initChart(list: Array<any>) {
    if (!list) return
    let chartDom: any = document.getElementById(this.id);
    let myChart = echarts.init(chartDom);
    let option: EChartsOption;
    let dataX: Array<any> = this.getDaysList()
    let dataY: Array<any> = []
    for (const item of list) {
      let obj: any = {
        name: item[0].shop_name,
        type: 'line',
        smooth: true,
        data: []
      }
      if (item) {
        for (const arr of dataX) {
          let isAdd = false
          for (const item2 of item) {
            if (arr == item2.day) {
              obj.data.push(item2.total)
              isAdd = true
              break
            }
          }
          if (!isAdd) {
            obj.data.push(0)
          }
        }
      }
      dataY.push(obj)
    }
    option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        show: true,
        top: 0
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          // saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dataX
      },
      yAxis: {
        type: 'value'
      },
      series: dataY
    };

    option && myChart.setOption(option);
  }
  getDaysList() {
    let daysHandle = (n: number) => {
      let dy = new Date()
      dy.setTime(dy.getTime() - 3600 * 1000 * 24 * n)
      let y = dy.getFullYear();
      let m: any = dy.getMonth() + 1;
      let d: any = dy.getDate();
      m = m < 10 ? '0' + m : m;
      d = d < 10 ? '0' + d : d;
      return y + '-' + m + '-' + d;
    }
    let data: Array<any> = []
    for (let i = 29; i >= 0; i--) {
      data.push(daysHandle(i))
    }
    return data;
  }
  getData() {
    (this as any).$request({
      //url:'/omsOrder/report/shopDailyCount',
      url: '/omsOrder/orderReport/orderSourceByYear',
      method: 'GET',
    }).then((res: any) => {
      if (res.data) {
        this.initChart(res.data)
      }
    }).catch(() => { })
  }
}
</script>

<style lang="scss" scoped>
.chart-box {
  height: 100%;
  width: 100%;

  .title-top {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;

    >span {
      font-size: 16px;
      font-weight: 700;
    }
  }
}

.chart {
  height: calc(100% - 40px);
  width: 100%;
}
</style>
