<template>
  <div>
    <div style="margin-bottom: 20px;">
      间隔时间:
      <el-select v-model="cycle" @change="getOrderAccount">
        <el-option label="3小时" value="3" />
        <el-option label="6小时" value="6" />
        <el-option label="9小时" value="9" />
        <el-option label="12小时" value="12" />
        <el-option label="24小时" value="24" />
      </el-select>
    </div>
    <div ref="style_num_echart" :style="{ height: height, width: width }" />
  </div>
</template>

<script>

import echarts from 'echarts'
import resize from '../mixins/resize'

import {
  getOrderAccount
} from '@/api/home'

export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '600px'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      chart: null,
      timeLineMap: [],
      dataMap: {},
      lengedMap: [],
      cycle: '3'
    }
  },
  created() {
    this.getOrderAccount()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    createObjectByArray(arr, type) {
      const obj = {}
      arr.forEach(k => {
        obj[k] = type ? [] : {}
      })
      return obj
    },
    // 下单金额环比
    async getOrderAccount() {
      // const loading = this.$loading()
      try {
        const { code, data } = await getOrderAccount({ cycle: this.cycle })
        // loading.close()
        if (code === 200) {
          // timeLineMap
          const max = Math.max.apply(Array, Object.values(data).map(item => Object.keys(item).length))
          const maxK = Object.values(data).find(item => Object.keys(item).length === max)
          this.timeLineMap = Object.keys(maxK)
          // lengedMap
          this.lengedMap = Object.keys(data)
          // dataMap
          this.dataMap = this.createObjectByArray(Object.keys(data), true)
          // console.log(data, 'count')
          Object.keys(data).forEach(k => {
            Object.values(data[k]).flat(1).map(({ total }) => {
              this.dataMap[k].push(total || 0)
            })
          })
          this.initChart()
        }
      } catch (e) {
        // loading.close()
        console.log(`获取下单量环比数据失败:${e}`)
      }
    },
    initChart() {
      this.$nextTick(() => {
        this.chart = echarts.init(this.$refs.style_num_echart)
        this.chart.clear()
        this.chart.setOption({
          title: {
            text: '订单总金额环比'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: this.lengedMap
          },
          xAxis: {
            type: 'category',
            data: this.timeLineMap.map(s => `${s - this.cycle < 0 ? 0 : s - this.cycle} - ${s}小时`)
          },
          yAxis: {
            type: 'value'
          },
          // series: [
          //   {
          //     name: 'Step Start',
          //     type: 'line',
          //     data: [120, 132, 101, 134, 90, 230, 210]
          //   }
          // ]
          series: Object.keys(this.dataMap).map(k => ({
            name: k,
            type: 'line',
            data: this.dataMap[k]
          }))
        })
        window.onresize = this.chart.resize
      })
    }
  }
}
</script>
