<template>
  <div>
    <border6 ref="refborder6">
      <template v-slot>
        <div ref="inpie"></div>
      </template>
    </border6>
  </div>
</template>
<script setup lang="ts">
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { EDataPerson, EDataPersonItem } from "@/type/offsite";
import border6 from "@/components/borderBox/border6.vue";
const { proxy } = getCurrentInstance() as any;
let props = defineProps<{
  title: string;
}>();
let inpie = ref();

let refborder6 = ref();

const echartsData = reactive<EDataPerson>({
  equipment: {
    div: null,
    data: null,
    title: "",
    box: null,
  },
});

const setData = (value: any) => {
  echartsData.equipment!.div = inpie.value;
  echartsData.equipment!.title = value.title;
  echartsData.equipment!.data = {
    title: {
      text: props.title,
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: 20
      },
      top:'2%'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      type: 'scroll',
      bottom: '5%',
      left: 'center'
    },
    color:['#7cffb2','#ee6666', '#5470c6',  '#fac858', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['20%', '50%'],
        center: ['50%', '45%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 5,
          // borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {c}'
        },
        labelLine: {
          show: true
        },
        data: value
      }
    ]
  };
  console.log(echartsData.equipment!.data);

  change(echartsData.equipment);
};
const change = (item: EDataPersonItem) => {
  let Ebox;
  //判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
  if (!item.box) {
    Ebox = proxy.$echarts.init(item.div, "dark");
  } else {
    Ebox = item.box;
  }
  //将拿到的dom设置数据源
  Ebox.setOption(item.data);
  //保存新设置的dom
  item.box = Ebox;
};

function setchartWH(width: any, height: any) {
  inpie.value.style.height = height + "px";
  inpie.value.style.width = width + "px";

  refborder6.value.resetWH();
  if (echartsData.equipment.box) {
    echartsData.equipment.box.resize();
  }
}
onMounted(() => {
});

// return{setchartWH}
defineExpose({
  setchartWH,
  setData
});
</script>
  
<style scoped></style>
  