<template>
  <div>
    <border6 ref="refborder6">
      <template v-slot>
        <div ref="instatus" 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 instatus = ref();

let refborder6 = ref();

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

const setData = (value: any) => {
  let time = value.value.map((item: any) => {
    return (item / 60).toFixed(1);
  });
  
  echartsData.contrast!.div = instatus.value;
  echartsData.contrast!.title = props.title;
  echartsData.contrast!.data = {
    title: {
      text: echartsData.contrast!.title,
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: 20
      }
    },
    grid: {
      top: '8%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} 分钟',
        rotate: 30, //倾斜角度
      }
    },
    yAxis: {
      type: 'category',
      data: value.title
    },
    series: [
      {
        data: value.value,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };;

  change(echartsData.contrast);
};
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) {
  instatus.value.style.height = height - 40 + "px";
  instatus.value.style.width = width - 30 + "px";

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

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