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

let refborder6 = ref();

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

const setData = (value: any) => {
  console.log(value);
  value.value
  let name = []
  let seriesVal = []
  for (let key in value.value) {
    name.push(key)
    seriesVal.push(value.value[key])
  }
  echartsData.MTTF!.div = inMTTF.value;
  echartsData.MTTF!.title = value.title;
  echartsData.MTTF!.data = {
    title: {
      text: echartsData.MTTF!.title,
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: 20
      }
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: name
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} 分钟'
      }
    },
    series: [
      {
        data: seriesVal,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };;

  change(echartsData.MTTF);
};
const change = (item: EDataPersonItem) => {
  let Ebox = proxy.$echarts.init(item.div, "dark");
  Ebox.setOption(item.data);
  item.box = Ebox;
};

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

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

// return{setchartWH}
defineExpose({
  setchartWH,
  setData
});
</script>
  
<style scoped>
.box {
  box-sizing: border-box;
  padding: 10px;
}
</style>
  