<template>
  <div id="chart1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar" class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">实时报警统计</span>
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>
      <div class="chart-box">
        <Echart
          :options="options"
          id="pieChart"
          height="100%"
          width="100%"
        ></Echart>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options:{},
    }
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (data) {
        var that = this;
        //console.log("=====newData==========")
        //console.log(data);
        var dmap={};
        var dd = [];
        var dd2 = [];
        for(var i = 0; i < data?.enumMap.length; i++) {
             dd.push(data.enumMap[i].alarmTypeName);
             dmap[data.enumMap[i].alarmTypeCode] = data.enumMap[i].alarmTypeName;
        }

        for(var j = 0; j< data.resultList.length; j++) {
            dd2.push({
                value:data.resultList[j].value,
                name:dmap[data.resultList[j].name]
            })
        }


        var newData= {
        xData: dd,
        seriesData: dd2
      }
    this.options = {
          color: [
            "#37a2da",
            "#32c5e9",
            "#9fe6b8",
            "#ffdb5c",
            "#ff9f7f",
            "#fb7293",
            "#e7bcf3",
            "#8378ea"
          ],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            show: true
          },
          calculable: true,
          legend: {
            orient: "vertical",
            icon: "circle",
            top:60,
            left: 10,
            x: "center",
            data: newData.xData,
            textStyle: {
              color: "#fff"
            },
            //格式化图例文本
            formatter(name) {
              const count = that.arrCount(newData.seriesData)
              //找到data中name和文本name值相同的对象
              const val = newData.seriesData.filter(item => {
                return item.name === name
              })
              return name + '  ' + ((val[0].value / count*100).toFixed(0))  + '%'
            }
          },
          series: [
            {
              name: "实时告警统计",
              type: "pie",
              radius: ['40%', '70%'],
              center: ['62%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 0
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: newData.seriesData
            }
          ]
        }
      },
      deep: true,
      immediate: true,
    }
  },
  mounted() {
    // console.log("realtime")
    
  },
  methods: {
    arrCount(arr) {
      let count = 0
      arr.forEach(item => {
        count = count + item.value
      })
      return count
    },
    changeTiming() {
      setInterval(() => {
        this.changeNumber()
      }, 3000)
    },
    changeNumber() {
      this.numberData.forEach((item, index) => {
        item.number.number[0] += ++index
        item.number = { ...item.number }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$box-width: 100%;
$box-height: 100%;

#chart1 {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;
  .bg-color-black {
    border-radius: 10px;
    height: 100%;
  }
  .chart-box{
    width: 100%;
    height: 100%;
  }

  #pieChart{
    width: 100%;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

}
</style>