<template>
  <div class="event_echarts height_100" ref="eventEcharts"></div>
</template>
  
<script>
export default {
  components: {},
  props: {
    resize:''
  },
  data() {
    return {
      chart:null,
      eventData:[]
    };
  },
  watch: {
    resize(val){
      if(val){
        this.handleSizeChange()
      }
    }
  },
  computed: {
    scenario(){
      return this.$store.state.dictMessage.scenario
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    handleSizeChange(){
      this.$nextTick(()=>{
        this.chart.resize()
      }) 
    },
    async init(){
      if(this.scenario && this.scenario.length>0){
        let params = {
          current:1,
          size:999,//分页信息
          searchQuery:'',//检索条件
          // orderDTOList: [
          //   {
          //     "orderBy": "scenarioNames",
          //     "orderType": 1
          //   }
          // ],//排序
          groupBy:'scenarioNames',//分组信息
        }
        var data = []
        await this.$api.groupEvent(params).then(res => {
          if (res.code == 200) {
            data=res.data.data.values
          }
        }).catch(err => {
          data = []
        })
      }
      this.scenario.forEach((item,index) => {
        var obj = data.find(i=>{
          return i.value == item.id
        })
        var event = {}
        event.name = item.name
        event.id = item.id
        if(obj){
          event.value = obj.count
        }else{
          event.value = 0
        }
        this.eventData.push(event)
      });
      this.initChart()
    },
    initChart() {
      const chartDom = this.$refs.eventEcharts;
      this.chart = this.$echarts.init(chartDom)
      this.chart.on('click',(params)=>{
        localStorage.scenarioName = params.data.id
        this.$router.push({
          name:'Event',
        })
        setTimeout(function () {
          localStorage.removeItem('scenarioName')
        }, 1000);
      })
      this.chart.setOption(
        {
          tooltip: {
            trigger: "item",
          },
          legend: {
            // type:'scroll',
            top: "10%",
            align: "left",
            // right: "5%",
            left:'45%',
            orient: "vertical",
            itemGap: 20,
          },
          title: {
            text: "处理事件",
            bottom: "center",
            left: "20%",
            textStyle: {
              fontSize: 16,
              fontWeight: 999,
              fontFamily: "思源黑体CN",
            },
          },
          series: [
            {
              name: "",
              label: {
                show: false,
                formatter: function (data) {
                  return `${data.name} ${data.value}(${data.percent.toFixed(
                    1
                  )}%)`;
                },
              },
              labelLine: {
                show: true,
              },
              type: "pie",
              avoidLabelOverlap: false,
              radius: ["50%", "80%"],
              center: ["0", "50%"],
              left:'25%',
              data: this.eventData,
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
        }
      );
    },
  },
};
</script>
  <style lang="scss" scoped>
</style>