<template>
  <div ref="assetEchart" class="asset_echart-nopx"></div>
</template>
<script setup>
import { init } from 'echarts';
import { reactive, toRefs, ref, onMounted, watchEffect } from 'vue';
const assetEchart = ref();
let {
  data: { type, xData, center, padding, itemStyle, x, y, subtext, legendOptions },
} = defineProps(['data']);
console.log('xData', xData);
const emit = defineEmits(['select-echart'])
const all = xData.reduce((n, v) => {
  return n + v.value * 1;
}, 0);
const initM = () => {
  const chart = init(assetEchart.value);
  window.addEventListener('resize', () => {
    chart.resize();
  });
  chart.setOption({
    title: {
      text: all + '(个)',
      subtext,
      x,
      y,
      textStyle: {
        fontSize: 20,
        fontWeight: 'bolder',
        color: '#333'
      },
      textAlign: 'center',
      subtextStyle: {
        fontSize: 16,
        fontWeight: 'bolder',
        align: 'center',
        color: '#555',
      },
    },
    tooltip: {
      formatter: params => {
        return params.name + ': ' + params.value + '(个)' + '<br/>' + ((params.value / all) * 100).toFixed(2) + '%';
      },
      padding: [10, 10],
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(67,100,247,0.08)',
        },
      },
    },
    legend: {
      icon: 'rect',
      align: 'left',
      orient: 'vertical',
      ...legendOptions,
      formatter: function (name) {
        const val = xData.filter(item => {
          return item.name === name;
        });
        if(all) {
          let str = '\r\r\r\r\r'
          if(name === '合理') {
            str = '\r\r\r\r\r\r\r\r\r\r\r'
          } else if(name === '存在不合理') {
            str = '\r\r'
          }
          return '\r\r' + name + str + (val[0].value / all).toFixed(4) * 100 + '%';
        } else {
          return '0%'
        }
      },
    },

    series: [
      {
        avoidLabelOverlap: 10,
        label: {
          show: false, // 设置为false，否则会重复
        },
        emphasis: {
          label: {
            show: false, // 显示
          },
        },
        labelLine: {
          show: false,
        },
        type,
        //  name: xData[0].name,
        radius: ['60%', '80%'],
        center,
        data: xData,
        itemStyle,
      },
    ],
  });
  chart.getZr().on('click', (event) => {
    if (!event.target) {
      // console.log(event)
      emit('select-echart')
    }
  })
};
function chartSize(container, charts) {
  function getStyle(el, name) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(el, null);
    } else {
      return el.currentStyle;
    }
  }
  const hi = getStyle(container, 'height').height;
  charts.style.height = hi;
}
watchEffect(() => {});
onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart-nopx {
  // width: 200px !important;
  height: 200px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>