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

let refborder6 = ref();
let boxWH = reactive({
  width: "0px",
  height: "0px",
});
const echartsData = reactive<EDataPerson>({
  equipment: {
    div: null,
    data: null,
    title: "",
    box: null,
  },
});

const setData = (value: any, type: number) => {
  value.forEach(res=>{
  res.name=t(res.name)
  })
  
  echartsData.equipment!.div = inpie.value;
  echartsData.equipment!.title = props.title;
  echartsData.equipment!.data = {
    title: {
      text: echartsData.equipment!.title,
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
      top:'2%'
    },
    // color: ['#4992FF', '#7CFFB2', '#FDDD60', '#FF6E76'],
    tooltip: {
      trigger: "item",
    },
    legend: {
      type: "scroll",
      bottom: "5%",
      left: "center",
    },
    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);

  // change(echartsData.equipment);
};
const change = (item: EDataPersonItem) => {
  let Ebox
  if(!item.box){
    Ebox = proxy.$echarts.init(item.div, "dark");
  }
  else{
    Ebox = item.box
  }
  Ebox.setOption(item.data);
  item.box = Ebox;
};
function setchartWH(width: any, height: any) {
  echartsData.equipment!.div = inpie.value;
  echartsData.equipment.div.style.height = height - 30 + "px";
  echartsData.equipment.div.style.width = width - 20 + "px";
  boxWH.height = height + "px";
  boxWH.width = width + "px";
  refborder6.value.resetWH();
  if (echartsData.equipment.box) {
    nextTick(()=>{
      echartsData.equipment.box.resize();
    })
  }
}
onMounted(() => {});

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

<style scoped></style>
