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

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import 'echarts-wordcloud';
import { toRaw } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import { defineComponent, reactive, toRefs, ref, watch, onMounted, getCurrentInstance } from 'vue';
// import { fontSize } from '@/views/groupPage/util'
export default defineComponent({
  name: 'WaterSphereDiagramBottom',
  props: { toOnlie: Object },
  props: ['toDeviceCode'],
  setup(props) {
    let toOnlie = toRaw(props.toOnlie);
    console.log('vueeee', toOnlie);
    return {
      props,
      toOnlie,
    };
  },
  data() {
    return {
      myChart: null,
      sensorsTotal: 0,
      onlineDeviceNum: 0,
      unOnlineDeviceNum: 0,
    };
  },
  async mounted() {
    const monitorDevicesStore = useMonitorDevicesStore();
    // if(!this.toDeviceCode) this.toDeviceCode = ''
    await this.getMonitorSensorsList(monitorDevicesStore, '');
    // this.$nextTick(() => {
    //   this.initCharts();
    // });
    // console.log("父组件传过来的在线率",this.isOnlineSenNum);
  },
  beforeUnmount() {},

  methods: {
    //获取传感器列表
    getMonitorSensorsList(monitorDevicesStore, toDeviceCode) {
      this.onlineDeviceNum = 0;
      this.unOnlineDeviceNum = 0;

      return new Promise((resolve) => {
        resolve(
          monitorDevicesStore
            .LigongDeviceSensor({
              pageNo: 1,
              pageSize: 1000,
              deviceCode: toDeviceCode ? toDeviceCode : '',
            })
            .then((res) => {
              console.log('获取传感器列表:_______', res);
              this.sensorsTotal = res.result.total;
              res.result.records.forEach((item) => {
                if (item.stateCode) {
                  this.onlineDeviceNum++;
                } else if (!item.online) {
                  this.unOnlineDeviceNum++;
                }
              });
              console.log('数量11111111', this.sensorsTotal, this.onlineDeviceNum);
              console.log('图标数量2222', this.onlineDeviceNum / this.sensorsTotal);
              this.$nextTick(() => {
                this.initCharts();
              });
              // monitorSensorsList = res.result.records;
            })
        );
      });
    },
    // 初始化表格
    initCharts() {
      const myChart11 = echarts.init(document.getElementById('myChart11'));
      let value = 0;
      if (this.sensorsTotal > 0) {
        value = (this.onlineDeviceNum / this.sensorsTotal).toFixed(2);
      }

      console.log('图标数量', value);
      var option = {
        // backgroundColor: '#050038',
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 18,
            color: 'rgb(97, 142, 205)',
          },
        },
        graphic: [
          {
            type: 'group',
            left: 'center',
            top: '60%',
            children: [
              {
                type: 'text',
                z: 100,
                left: '10',
                top: 'middle',
                style: {
                  fill: '#B1E9FF',
                  text: '在线率',
                  font: '10px Microsoft YaHei',
                },
              },
            ],
          },
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '45%',
            center: ['50%', '50%'],
            data: [value, value, value], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: 'rgb(255,0,255,0)',
            },
            label: {
              normal: {
                formatter: (value * 100).toFixed(0) + '%',
                textStyle: {
                  color: 'rgba(255,255,255,1)',
                  fontSize: 18,
                },
              },
            },
            outline: {
              show: false,
            },
          },
          // {
          //     "type": "pie",
          //     "center": ["50%", "50%"],
          //     "radius": ["50%", "52%"],
          //     "hoverAnimation": false,
          //     "data": [{
          //         "name": "",
          //         "value": value * 100,
          //         labelLine: {
          //             show: false
          //         },
          //         itemStyle: {
          //             color: '#5886f0'
          //         },
          //         emphasis: {
          //             labelLine: {
          //                 show: false
          //             },
          //             itemStyle: {
          //                 color: '#5886f0'
          //             },
          //         }
          //     },
          //     { //画中间的图标
          //         "name": "",
          //         "value": 0.5,
          //         labelLine: {
          //             show: false
          //         },
          //         itemStyle: {
          //             color: '#ffffff',
          //             "normal": {
          //                 "color": "#5886f0",
          //                 "borderColor": "#5886f0",
          //                 "borderWidth": 10,
          //                 // borderRadius: '100%'
          //             },
          //         },
          //         label: {

          //             borderRadius: '100%'
          //         },
          //         emphasis: {
          //             labelLine: {
          //                 show: false
          //             },
          //             itemStyle: {
          //                 color: '#5886f0'
          //             },
          //         }

          //     },
          //     { // 解决圆点过大后续部分显示明显的问题
          //         "name": "",
          //         "value": 0.5,
          //         labelLine: {
          //             show: false
          //         },
          //         itemStyle: {
          //             color: '#5886f0'
          //         },
          //         emphasis: {
          //             labelLine: {
          //                 show: false
          //             },
          //             itemStyle: {
          //                 color: '#5886f0'
          //             },
          //         }
          //     },
          //     { //画剩余的刻度圆环
          //         "name": "",
          //         "value": 80,
          //         itemStyle: {
          //             color: '#050038'
          //         },
          //         "label": {
          //             show: false
          //         },
          //         labelLine: {
          //             show: false
          //         },
          //         emphasis: {
          //             labelLine: {
          //                 show: false
          //             },
          //             itemStyle: {
          //                 color: '#050038'
          //             },
          //         }
          //     }
          //     ]
          // }
        ],
      };
      myChart11.setOption(option);
      // 自适应布局
      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%;
  position: relative;
  top: -10px;
  left: 10px;
}
</style>
