<!-- 分日数据消耗分析 -->
<template>
  <div style='width: 100%; height: 100%'>
<!--
    <div class='search_bar' style='width: 100%'>
      <span class='label'>消耗排行：</span>
      <a-range-picker v-model='queryParam.time' format='YYYY-MM-DD' style='width:200px' />
      <a-button style='margin-left: 10px' type='primary' @click='handleQuery'>查看</a-button>
    </div>
    -->
    <div class='chart'>
      <div id='ConsumptionRanking' class='bar' style='width: 100%; height:100%'></div>
    </div>
  </div>


</template>

<script>

import { simpleDebounce } from '@/utils/util'
import { postAction } from '@api/manage'

export default {
  name: 'ConsumptionRanking',
  props: {
    queryData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    rangeDate: {
      type: Array
    }
  },
  watch: {
    chartInfo(newVal, val) {
      if (newVal) {
        newVal.resize()
      }
    },
    rangeDate: {
      handler(val) {
        this.getDayCompareList()
      },
      immediate: false,
      deep: true
    }
  },
  created() {
    window.addEventListener('resize', simpleDebounce(() => {
      this.chartInfo.resize()
    }))
    this.initData()
    this.handleQuery()
  },
  data: () => ({
    chartInfo: null,
    queryParam: {},
    option: {
      legend: {
        show: true,
        data: [],
        bottom: 12
      },
      grid: {
        top: '30',
        bottom: '40',
        left: '40',
        right: '40',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: []
    },
    urlApi: {
      dayCompare: '/smb/index/dayCompare'
    },
  }),

  methods: {
    initData() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('ConsumptionRanking')
        this.chartInfo = this.echarts.init(chartDom)
        this.chartInfo.setOption(this.option)
      })
    },
    // 获取分日数据消耗分析
    getDayCompareList() {
      this.option.series = []
      this.option.legend.data = []
      let params = {
        startTime: this.rangeDate ? this.rangeDate[0].format('YYYY-MM-DD') : '',
        endTime: this.rangeDate ? this.rangeDate[1].format('YYYY-MM-DD') : '',
        platformType: this.queryData.platform || '',
        userId: this.queryData.userid || '',
        orgCode: this.queryData.orgTree || '',
        post: this.queryData.position || ''
      }
      postAction(this.urlApi.dayCompare, params).then(res => {
        if (res.success) {
          const { datas, days } = res.result
          datas.forEach((item)=>{
            let obj = {
              name:item.title,
              data: item.data,
              type: 'line',
              itemStyle: {
                color: '#80c6e1'
              },
              label: {
                show: true,
                position: 'top'
              }
            }
            this.option.legend.data.push(item.title)
            this.option.series.push(obj)
          })
          this.option.xAxis.data = days
          this.initData()
        }
      })
    },
    // 查询视图数据
    handleQuery() {
      this.getDayCompareList()
    }

  }
}
</script>

<style lang='less' scoped>
@import "./chart";
</style>