<!--
 * @FilePath: \wwwd:\code\screenFront\src\components\assembly\chart.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-10 10:56:55
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div :style="{ width: boxWH.width, height: boxWH.height}">
    <border6 ref="refborder6">
      <template v-slot>
        <div ref="inpie" class="ddd"></div>
      </template>
    </border6>
  </div>
</template>
<script setup lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  markRaw,
  nextTick,
  onMounted,
  reactive,
  ref,
} from "vue";
import { EDataPerson, EDataPersonItem } from "@/type/environment";
import border6 from "@/components/borderBox/border6.vue";
const { proxy } = getCurrentInstance() as any;
let props = defineProps<{
  title: string;
  // border: string
  option: any;
}>();

let inpie = ref();

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

const setData = (option: any) => {
  echartsData.humiture!.div = inpie.value;
  echartsData.humiture!.title = props.title;
  echartsData.humiture!.data = option;
  change(echartsData.humiture);
};
const changeData = (option: any) => {
  echartsData.humiture!.data = option;
  change(echartsData.humiture);
};
const change = (item: EDataPersonItem) => {
  let Ebox;
  //判断是否已经生成过一次dom，没生成就新建生成过就拿之前的dom
  if (!item.box) {
    Ebox = markRaw(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) {
  echartsData.humiture!.div = inpie.value;
  echartsData.humiture.div.style.height = height - 30 + "px";
  echartsData.humiture.div.style.width = width - 20 + "px";
  boxWH.height = height + "px";
  boxWH.width = width + "px";
  refborder6.value.resetWH();
  // console.log(echartsData.equipment.box.style.width,"箱子");

  if (echartsData.humiture.box) {
    nextTick(()=>{
      echartsData.humiture.box.resize();
    })
    // echartsData.humiture.box.resize();
  }
}
onMounted(() => {
  setData(props.option);
});

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

<style scoped>
.ddd {
  box-sizing: border-box;
  padding: 10px;
}
</style>
