<template>
  <div class="chartBox" :id="id"></div>
</template>
<script setup name="pieChartGszl">
import { guid } from '@/utils/ruoyi';
const { proxy } = getCurrentInstance();
import { nowSize } from '@/utils/util.js';
import moment from 'moment';
const emit = defineEmits(['updateKey']);
const props = defineProps({
  //刷新标志
  refresh: {
    type: [String, Number],
    default: 1,
  },
  //数据
  echartData: {
    type: Object,
    default: {},
  },
});

const id = guid();
const myChart = shallowRef('');
let activeName = ref(null);

watch(
  () => props.refresh,
  value => {
    //先销毁实例
    myChart.value && myChart.value.dispose();
    intChart();
  }
);
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
//初始化
function intChart() {
  var data = [
    {
      name: '泵站指令',
      value: 0,
    },
    {
      name: '视频调度',
      value: 60,
    },
    {
      name: '语音调度',
      value: 80,
    },
    {
      name: '车辆调度',
      value: 100,
    },
  ].sort(function (a, b) {
    return b.value - a.value;
  });
  var max = Math.max(...data.map(item => item.value)) + 100;
  function array2obj(array, key) {
    let resObj = {};
    for (let i = 0; i < array.length; i++) {
      resObj[array[i][key]] = array[i];
    }
    return resObj;
  }

  function getData(data) {
    let res = {
      series: [],
      yAxis: [],
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        name: i,
        type: 'pie',
        clockWise: false,
        hoverAnimation: false,
        radius: [63 - i * 8 + '%', 58 - i * 8 + '%'],
        center: ['25%', '50%'],
        label: {
          show: false,
        },
        itemStyle: {
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          borderWidth: 5,
        },
        data: [
          {
            value: data[i].value,
            name: data[i].name,
          },
          {
            value: max - data[i].value,
            name: '',
            itemStyle: {
              color: '#27689594',
              borderWidth: 0,
            },
            tooltip: {
              show: true,
            },
            hoverAnimation: false,
          },
        ],
      });
    }
    return res;
  }

  var objData = array2obj(data, 'name');
  var optionData = getData(data);

  myChart.value = proxy.echarts.init(document.getElementById(id));
  myChart.value.clear();
  // 绘制图表
  myChart.value.setOption({
    tooltip: {
      show: true,
      // formatter: "{a}：{d}%"
    },
    legend: {
      // x: 'lefr',
      left: 220,
      y: 'center',
      itemGap: 10,
      itemWidth: 10,
      itemHeight: 10,
      icon: 'rect',

      formatter: function (name) {
        return '{title|' + name + '}{value|' + objData[name].value + '次' + '}';
      },
      textStyle: {
        rich: {
          title: {
            width: 10,
            fontSize: 16,
            color: '#fff',
            padding: [0, 0, 0, 10],
          },
          value: {
            fontSize: 16,
            color: 'rgb(0, 222, 255)',
            padding: [0, 100],
          },
        },
      },
    },
    color: ['#0E8CFDFF', '#08DA80FF', '#2ECAFFFF', '#FF915BFF', '#F5BA45FF'],
    grid: {
      top: '0',
      left: '50%',
      containLabel: false,
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          inside: true,
          textStyle: {
            color: '#fff',
            fontSize: 16,
          },
          show: true,
        },
        data: optionData.yAxis,
      },
    ],
    xAxis: [
      {
        show: false,
      },
    ],
    series: optionData.series,
  });
  myChart.value.on('click', params => {
    activeName.value = params.dataIndex;
    emit('updateKey', activeName.value);
    myChart.value.resize();
  });
}
onMounted(() => {
  intChart();
  window.addEventListener('resize', resizeTheChart);
});
</script>

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