<!-- 分时消耗对比趋势 -->
<template>
  <div style='width: 100%; height: 100%'>
    <!--
        <div class='search_bar' style='width: 100%'>
          <a-time-picker v-model='queryParam.time' format='HH' />
          <a-button style='margin-left: 10px' type='primary' @click='handleQuery'>查看</a-button>
        </div>
    -->
    <div class='chart'>
      <div id='ComparisonTrend' 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: 'index',
  props: {
    queryData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    time: {
      type:Object
    }
  },
  watch: {
    chartInfo(newVal, val) {
      if (newVal) {
        newVal.resize()
      }
    },
    time: {
      handler(val) {
        this.getHourCompareList()
      },
      immediate: false,
      deep: true
    }
  },
  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: [
        {
          name: '今日',
          data: [],
          type: 'line',
          itemStyle: {
            color: '#96daf9'
          },
          label: {
            show: true,
            position: 'top'
          }
        },
        {
          name: '昨日',
          data: [],
          type: 'line',
          itemStyle: {
            color: '#99f20d'
          },
          label: {
            show: true,
            position: 'top'
          }
        }
      ]
    },
    urlApi: {
      hourCompare: '/smb/index/hourCompare'
    },
    dataSource: {
      columns: [],
      dataList: [
        {
          title: '今天'
        },
        {
          title: '昨天'
        }
      ]
    }
  }),
  created() {
    this.initData()
    window.addEventListener('resize', simpleDebounce(() => {
      this.chartInfo.resize()
    }))
    this.handleQuery()
  },

  methods: {
    initData() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('ComparisonTrend')
        this.chartInfo = this.echarts.init(chartDom)
        this.chartInfo.setOption(this.option)
      })
    },
    // 获取分时数据消耗分析
    getHourCompareList() {
      let params = {
        hour: this.time ? this.time.format('HH') : '',
        platformType: this.queryData.platform || '',
        userId: this.queryData.userid || '',
        orgCode: this.queryData.orgTree || '',
        post: this.queryData.position || ''
      }
      postAction(this.urlApi.hourCompare, params).then(res => {
        if (res.success) {
          const { datas, days } = res.result
          this.option.series[0].data = datas.today
          this.option.series[1].data = datas.yesterday
          this.option.xAxis.data = days
          this.initData()
          this.dataSource.columns = [
            {
              dataIndex: 'title',
              title: ''
            }
          ]
          days.forEach((item, index) => {
            let obj = {
              dataIndex: 'date' + index,
              title: item + '时'
            }
            this.dataSource.columns.push(obj)
          })

          datas.today.forEach((item, i) => {
            this.dataSource.dataList[0]['date' + i] = item
          })
          datas.yesterday.forEach((item, i) => {
            this.dataSource.dataList[1]['date' + i] = item
          })
        }
      })
    },
    // 查询视图数据
    handleQuery() {
      this.getHourCompareList()
    }
  }
}
</script>

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