<template>
  <div ref="chartRef" style="width: 100%; height: 100%">
  </div>
</template>

<script setup>

import * as echarts from "echarts";
import { ref, defineProps, watch, onMounted, defineEmits, onUnmounted, defineExpose } from "vue";
import { chartAdaptation } from "@/utils/tools";
const emits = defineEmits(['clickpieli']);

const binshow = ref(false);
const props = defineProps({
  pieNum: {
    type: Array,
    default: []
  },

  title: {
    type: String,
    default: ''
  },
  /** 标题和类型 */
  chartOptArr: {
    type: Array,
    default: []
  },

});

const chartRef = ref()

const myChartInstance = ref()
// watch(
//   () => props.pieNum,
//   (val) => {
//     getinto(val)
//     binshow.value = true
//   },
//   { deep: true }
// )
function resizeChart() {
  myChartInstance.value?.resize()
}
onMounted(() => {
  binshow.value = true
  myChartInstance.value = echarts.init(chartRef.value)
  initChart()
  //自适应
  window.addEventListener('resize', resizeChart)
})

const initChart = (chartOptArr) => {
  /** @typedef {Object} ChartOpt
   * @property {string} ct 类型 ，如 安全设施费用、应急救援、安全防护用品
   * @property {number} cost_fee 已使用
   * @property {number} budget 预算
  */
  /** @type {Array<ChartOpt>} 表格数据 */
  chartOptArr = Array.isArray(chartOptArr) ? chartOptArr : []

  const myChart = myChartInstance.value;
  if (!myChart) return
  const titleArr = chartOptArr.map(item => item.lable)
  /** 使用 */
  const useData = chartOptArr.map(item => isNaN(item.cost_fee) ? 0 : item.cost_fee)
  /** 未使用 */
  const noUseData = chartOptArr.map(item => isNaN(item.no_use) ? 0 : item.no_use)
  /** 标题位置 [[x,y],[x,y]] */

  const centerArr = [['2%', '8%'], ['35%', '8%'], ['70%', '8%'],
  ['3%', '38%'], ['35%', '38%'], ['70%', '38%'],
  ['5%', '70%'], ['35%', '70%'], ['75%', '70%']
  ];
  const graphic = chartOptArr.map((item, index) => {
    return {
      type: 'text',
      left: centerArr[index][0],
      top: centerArr[index][1],
      style: {
        text: `${item.label}(${item.usePercentStr})`,
        textAlign: 'center',
        fill: '#333',
        fontSize: 12,
        fontWeight: 'bold'
      }
    }
  })
  const series = chartOptArr.map((item, index) => {
    const centerArr = [['15%', '20%'], ['50%', '20%'], ['85%', '20%'], ['15%', '50%'], ['50%', '50%'], ['85%', '50%'], ['15%', '80%'], ['50%', '80%'], ['85%', '80%']];
    return {
      type: 'pie',
      radius: '13%',
      center: centerArr[index],
      encode: {
        itemName: '使用率',
        value: index + 1  // 映射到对应的列
      }
    }
  })
  let option;
  option = {
    legend: {},
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        const dataIndex = params.seriesIndex;
        const chartItem = chartOptArr[dataIndex] || {};
        const { label, usePercentStr, cost_fee } = chartItem
        return `${label}<br>使用: ${cost_fee} 万元<br>使用率: ${usePercentStr}`;
      }
    },
    color: ['#ee6666', '#91cc75'],
    dataset: {
      source: [
        ['使用率', ...titleArr],
        ['已使用', ...useData],
        ['未使用', ...noUseData],
      ]
    },
    graphic: graphic,
    series: series,
  }
  //点击事件
  // myChart.on("click", function(params) {
  //   emits('clickpieli', params.data)
  // });
  myChart.setOption(option);

}

onUnmounted(() => {
  window.removeEventListener('resize', resizeChart)
})
defineExpose({
  initChart
})
</script>
<style scoped></style>
