<!-- 饼图 -->
<template>
  <div class="chart" ref="chart" id="myChart11"></div>
</template>

<script>
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';
  // import { fontSize } from '@/views/groupPage/util'
  import { queryRiverBlockageRisk } from '/@/api/map/geologicalApi'
  import TFMapUitl from '/@/utils/TFMapUitl.ts';
  import { useGeologicalStore } from '/@/store/modules/geological';
  export default {
    name: 'PieChart2',
    props: {
      dictValue1: Object
    },
  data() {
    return {
      myChart: null,
      chartData: [],
      // 地灾关注类型id
      gztypeid: '',
      // 地灾类型id
      gzdzlxid: '',
    };
  },
    watch: {
      dictValue1: {  //写成对象形式，就可以跟更多的属性。不加属性与原来的写法效果是一样的。
      handler: function (newV, oldV) {
        console.log("监听到的值", newV, oldV);
        console.log("监听到的值id", newV.id);
        this.gztypeid = newV.id
        this.getRiverBlockageRiskData(newV.id);
      },
      deep: true, //深度侦听
      immediate:true  //立即执行(页面刚进来也会执行)
    },
    },
    mounted() {
      // this.getRiverBlockageRiskData()
    },
    beforeUnmount() {},

    methods: {
      // 得到堵江风险数据
      async getRiverBlockageRiskData(dictId){
        let params = {
          gztypeid: dictId
        }
        await queryRiverBlockageRisk(params).then((res) => {
        const tempData = [];
        res.result.map(item => {
          if (item.name) {
            item.name = item.name + '（' + item.value + '个）';
            tempData.push(item);
          }
          return item
        })

        let dqztCount = 0;
        res.result.forEach((item) => {
          if (item.name == null) {
            dqztCount += 0;
          } else {
            dqztCount += item.value;
          }
        });
        this.$emit('getDjfxTotal', dqztCount);

        this.chartData = tempData;
          if(tempData.length==0){
            this.chartData=[{name:'暂无',value:0}]
          }
        })


        this.$nextTick(() => {
        this.initCharts();
      });
      },
      // 初始化表格
      initCharts() {
        console.log('初始化了饼图2');
        const myChart11 = echarts.init(document.getElementById('myChart11'));
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b0}'
          },
          // tooltip: false,
          legend: {
            icon: 'circle', //设置图例形状属性
            // bottom: 20,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 20, //设置图例之间的间隔
            top: '20%',
            right: 'right',
            borderType: 'solid',
            textStyle: {
              color: '#C8EFFF', // 图例文字颜色
            },
          },
          color: ['#03C36F', '#0766E6', '#F5BD38', "#7be7ed", "#fd642d"],
          series: [
            {
              // name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
                            right:"80",
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data:this.chartData,
              // [
              //   // { value: 2, name: '大（0个）' },
              //   // { value: 2, name: '中（0个）' },
              //   // { value: 2, name: '小（0个）' },
              //   { value: 2, name: '大（2个）' },
              //   { value: 2, name: '中（2个）' },
              //   { value: 2, name: '小（2个）' },
              // ],
              // data: this.chartData,
              radius: ['55%', '65%'],
            },
          ],
      };
      myChart11.setOption(option);
      // 点击柱状图
      myChart11.on('click', (params) => {
        console.log("环状图的参数", params);
        let pcParams = {
          dzlxid: params.data.dzlxid,
          gztypeid: this.gztypeid,
        }
        eventBus.emit('toDjfxid', pcParams);
                   //通过点击获取地灾点数据
        if(params&&params.data&&params.data.dzlxid){
          const geologicalStore = useGeologicalStore();
          geologicalStore.DzdxInfo({dzlxid: params.data.dzlxid, gztypeid: this.gztypeid, type:"all"}).then(tempData=> {
              const idList=[];
              if(tempData){
                tempData.forEach(item=>{
                  var id = TFMapUitl.getId('dzd', item.id);
                  idList.push(id);
                });
                TFMapUitl.mapPointLocation_list3(map,idList)
              }
              // dzlxList.value = tempData;
          });
        }
      })
      // 自适应布局
      window.addEventListener('resize', function (event) {
        myChart11.resize();
      });

        // 当上面的自适应布局不其作用时，可以改换成下面这种
        // setTimeout(function () {
        //   window.onresize = function () {
        //     myChart1.resize();
        //     // swChart.resize();
        //   }
        // }, 200)
      },
    },
  };
</script>

<style lang="less" scoped>
  .chart {
    height: 100%;
    width: 100%;
  }
</style>
