<!-- 在投二代与广告主个数 -->
<template>
  <div style='width: 100%; height: 100%'>
    <!--
    <div class='search_bar' style='width: 100%'>
      <a-select
        v-model='queryParam.userType'
        :filterOption='filterOption' :options='platformList' allowClear
        placeholder='请选择用户'
        show-search
        style='width:120px;margin-right: 10px;' />
      <a-icon type='right'></a-icon>
      <a-range-picker
        v-model='queryParam.time'
        format='YYYY-MM-DD'
        style='margin: 0 10px;width:200px' />
      <a-button type='primary' @click='handleQuery'>查看</a-button>
    </div>
    -->
    <div class='chart'>
      <div id='ConsumptionTrend' class='bar' style='width: 100%; height:100%'></div>
    </div>
  </div>
</template>

<script>
import { simpleDebounce } from '@/utils/util'
import { postAction } from '@api/manage'
import { getDictItemsFromCache } from '@api/api'

export default {
  name: 'ConsumptionTrend',
  props: {
    queryData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dayType: {
      type:String
    },
    rangeTime: {
      type:Array
    },
    userType: {
      type:String
    }

  },
  data: () => ({
    chartInfo: null,
    queryParam: {
      userType: ''
    },
    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'
          }
        }
      ]
    },
    platformList: [],
    urlApi: {
      userCount: '/smb/index/userCount'
    },
    dataSource: {
      columns: [],
      dataList: [
        {},
        {}
      ]
    }
  }),
  created() {
    this.initData()
    window.onresize = simpleDebounce(() => {
      this.chartInfo.resize()
    })
    this.getDictCode()
  },
  watch: {
    chartInfo(newVal, val) {
      if (newVal) {
        newVal.resize()
      }
    },
    dayType: {
      handler(val) {
        this.getUserCountList()
      },
      immediate: false,
      deep: true
    },
    rangeTime: {
      handler(val) {
        this.getUserCountList()
      },
      immediate: false,
      deep: true
    },
    userType: {
      handler(val) {
        this.getUserCountList()
      },
      immediate: false,
      deep: true
    }
  },
  methods: {
    initData() {
      this.$nextTick(() => {
        var chartDom = document.getElementById('ConsumptionTrend')
        this.chartInfo = this.echarts.init(chartDom)
        this.chartInfo.setOption(this.option)
      })
    },
    // 获取在投二代与广告主个数
    getUserCountList() {
      let params = {
        dayType:this.dayType,
        startTime: this.rangeTime ? this.rangeTime[0].format('YYYY-MM-DD') : '',
        endTime: this.rangeTime ? this.rangeTime[1].format('YYYY-MM-DD') : '',
        userType: this.userType,
        platformType: this.queryData.platform ||'',
        userId: this.queryData.userid ||'',
        orgCode: this.queryData.orgTree ||'',
        post: this.queryData.position ||''
      }
      postAction(this.urlApi.userCount, params).then(res => {
        if (res.success) {
          const { advertiserList, agentList, days } = res.result
          this.option.series[0].data = advertiserList
          this.option.series[1].data = agentList
          this.option.xAxis.data = days
          this.initData()
          this.dataSource.columns = days.map((item, index) => {
            return {
              dataIndex: 'date' + index,
              title: item
            }
          })
          advertiserList.forEach((item, i) => {
            this.dataSource.dataList[0]['date' + i] = item
          })
          agentList.forEach((item, i) => {
            this.dataSource.dataList[1]['date' + i] = item
          })
        }
      })
    },
    // 字典
    getDictCode() {
      const dictList = getDictItemsFromCache('account_category')
      this.platformList = dictList.map(it => ({ ...it, value: it.value }))
      this.queryParam.userType = this.platformList[0].value
      this.getUserCountList()
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 查询视图数据
    handleQuery() {
      this.getUserCountList()
    }
  }
}
</script>

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