<template>
  <div class="report_echarts height_100" ref="reportEcharts"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    resize:''
  },
  data() {
    return {
      reportData:{
        type:[],
        count:[]
      },
      chart:null
    };
  },
  watch: {
    resize(val){
      if(val){
        this.handleSizeChange()
      }
    }
  },
  computed: {
    reportType(){
      return this.$store.state.dictMessage.dictMessage.REPORT_TYPE
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    handleSizeChange(){
      this.$nextTick(()=>{
        this.chart.resize()
      }) 
    },
    async init(){
      if(this.reportType && this.reportType.length>0){
        let params = {
          current:1,
          size:999,//分页信息
          searchQuery: '',//检索条件
          // orderDTOList: [
          //   {
          //     "orderBy": "createTime",
          //     "orderType": 1
          //   }
          // ],//排序
          groupBy: 'reportTypeName',//分组信息
        }
        var data = []
       await this.$api.groupReportProject(params).then(res => {
          if (res.code == 200) {
            data = res.data.data.values
          }
        }).catch(error => {
          data = []
        })
      
      this.reportType.forEach((item,index) => {
        var obj = data.find(i=>{
          return i.value == item.value
        })
        this.reportData.type.push(item.label)
        if(obj){
          this.reportData.count.push(obj.count)
        }else{
          this.reportData.count.push(0)
        }
      });
      this.initChart()
      }
    },
    initChart() {
      const chartDom = this.$refs.reportEcharts;
      this.chart = this.$echarts.init(chartDom)
      this.chart.on('click',(params)=>{
        var obj = this.reportType.find(item=>{
          return item.label == params.name
        })
        localStorage.reportType = obj.value
        this.$router.push({
          name:'AllReport',
        })
        setTimeout(function () {
          localStorage.removeItem('reportType')
        }, 1000);
      })
      this.chart.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        title: {
          text: "我的报告",
          left:'center',
          bottom:'30'
        },
        xAxis: {
          data: this.reportData.type,
          axisLabel: {
            show: false,
            // inside: true,
            // color: "#fff",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#999",
          },
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4fa6ff" },
                { offset: 1, color: "#316192" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
            label:{
                show: true,
                rotate: 0,
                // align: 'center',
                // verticalAlign: 'middle',
                position: 'insideBottom',
                overflow:'breakAll',
                formatter: '{b}',
                distance: 15,
                width:'10',
                color:'#ffffff',
                textBorderColor:'#000000',
                textBorderWidth:0.85,
                fontFamily:'思源黑体CN',
                fontWeight:'bold',
                fontsize:18
            },
            data: this.reportData.count,
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>