<!-- 任务完成情况 -->
<template>
  <div style="width: 100%; height: 100%">
    <div class="chart">
      <!--
            <a-radio-group v-model='queryParam.time' button-style='solid' class='search_btn' size='small'
                           @change='handleQuery'>
              <a-radio-button value='0'>月</a-radio-button>
              <a-radio-button value='1'>季</a-radio-button>
              <a-radio-button value='2'>年</a-radio-button>
            </a-radio-group>
        -->
      <div id="task_status" class="bar" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

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

export default {
  name: 'taskStatus',
  props: {
    queryData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    dataType: {
      type: String,
    },
    timeQuery: {
      type: Array,
    },
  },
  data: () => ({
    chartInfo: null,
    queryParam: {
      time: '1',
      userid: '',
    },
    datatask: [],
    url: {
      taskSuccessInfo: '/smb/index/taskData',
    },
    option: {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
      legend: {
        show: true,
        data: ['应完成', '已完成', '任务', '完成度'],
        bottom: 12,
      },
      grid: {
        top: '40',
        bottom: '40',
        left: '40',
        right: '40',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: [],
        axisTick: {
          alignWithLabel: true,
        },
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '应完成',
          data: [],
          type: 'bar',
          top: 10,
          itemStyle: {
            color: '#16e6b4',
            // 16e6b4
          },
        },
        {
          name: '已完成',
          data: [],
          type: 'bar',
          top: 10,
          itemStyle: {
            color: '#b0f6e5',
          },
        },
        {
          name: '任务',
          data: [],
          type: 'line',
          // yAxisIndex: 1,
          top: 10,
          itemStyle: {
            color: '#05a8f0',
          },
        },
        {
          name: '完成度',
          data: [],
          type: 'bar',
          top: 10,
          itemStyle: {
            color: '#b0f6e5',
          },
        },
      ],
    },
  }),
  created() {
    window.addEventListener(
      'resize',
      simpleDebounce(() => {
        this.chartInfo.resize()
      })
    )
    this.initData()
    this.handleQuery()
  },
  watch: {
    chartInfo(newVal, val) {
      if (newVal) {
        newVal.resize()
      }
    },
    dataType: {
      handler(val) {
        this.getTaskSuccessInfo()
      },
      immediate: false,
      deep: true,
    },
    timeQuery: {
      handler(val) {
        this.getTaskSuccessInfo()
      },
      immediate: false,
      deep: true,
    },
  },
  methods: {
    initData() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('task_status')
        this.chartInfo = this.echarts.init(chartDom)
        this.chartInfo.setOption(this.option)
      })
    },
    //  获取任务完成情况
    getTaskSuccessInfo() {
      let params = {
        dataType: this.dataType,
        platformType: this.queryData.platform || '',
        userId: this.queryData.userid || '',
        orgCode: this.queryData.orgTree || '',
        post: this.queryData.position || '',
        startTime: this.timeQuery ? this.timeQuery[0].format('YYYY-MM-DD') : '',
        endTime: this.timeQuery ? this.timeQuery[1].format('YYYY-MM-DD') : '',
      }
      postAction(this.url.taskSuccessInfo, params).then((res) => {
        if (res.success) {
          this.datatask = res.result
          const { complete, incomplete, days, all, progress } = res.result
          this.option.series[0].data = complete
          this.option.series[1].data = incomplete
          this.option.series[2].data = all
          this.option.series[3].data = progress
          this.option.xAxis.data = days
          this.initData()
        }
      })
    },
    // 查询视图数据
    handleQuery() {
      this.getTaskSuccessInfo()
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
  },
}
</script>

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

