<template>
  <div>
    <el-form label-width="100px" inline>
      <el-form-item label="商品类型:">
        <el-select v-model="type" @change="getStyleNum">
          <el-option
            v-for="(item, i) in goodTypeList"
            :key="i"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="间隔时间:">
        <el-select v-model="cycle" @change="getStyleNum">
          <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>
      </el-form-item> -->
    </el-form>
    <div ref="style_num_echart" :style="{ height: height, width: width }" />
  </div>
</template>

<script>

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

import {
  getGoodsEveryStyleNum,
  goodsType
} from '@/api/home'

export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '600px'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      chart: null,
      cycle: '3',
      goodTypeList: [],
      type: '',
      timeLineMap: [],
      lengedMap: []
    }
  },
  created() {
    this.getGoodsType()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 获取商品类型
    getGoodsType() {
      goodsType().then(res => {
        if (res.code === 200) {
          this.goodTypeList = res.data
          this.type = res.data[0]
          this.getStyleNum()
        }
      })
    },
    createObjectByArray(arr, type) {
      const obj = {}
      arr.forEach(k => {
        obj[k] = type ? [] : {}
      })
      return obj
    },
    // 下单量环比
    async getStyleNum() {
      // const loading = this.$loading()
      try {
        const { code, data } = await getGoodsEveryStyleNum({ cycle: this.cycle, type: this.type })
        // 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)
          Object.keys(data).forEach(k => {
            this.dataMap[k] = Object.values(data[k])
          })
          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',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          legend: {
            data: this.lengedMap
          },
          xAxis: [
            {
              type: 'category',
              // data: this.timeLineMap.map(s => `${s - this.cycle < 0 ? 0 : s - this.cycle} - ${s}小时`),
              data: this.timeLineMap,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '数量'
            }
          ],
          color: ['#63b2ee', '#f19272 ', '#76da91'],
          dataZoom: [
            {
              type: 'slider'
            },
            { type: 'inside' }

          ],
          series: Object.keys(this.dataMap).map(k => ({
            name: k,
            type: 'bar',
            data: this.dataMap[k]
          }))
        })
        window.onresize = this.chart.resize
      })
    }
  }
}
</script>
