<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Mechanics\child\son\components\timeguagu.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-14 11:14:41
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
  <div>
    <border6 ref="refborder6">
      <template v-slot>
        <div ref="inguagu" 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;
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let props = defineProps<{
  title: string;
}>();
let inguagu = ref();

let refborder6 = ref();

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

const setData = (val: number) => {
  echartsData.inguagu!.div = inguagu.value;
  echartsData.inguagu!.title = props.title;
  echartsData.inguagu!.data = {
    title: {
      text: echartsData.inguagu!.title,
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: 20
      }
    },
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        min: 0,
        max: 100,
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}%'
        },
        data: [
          {
            value: val,
            name: t('messages.UtilizationRate')
          }
        ]
      }
    ]
  };

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

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

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