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

let refborder6 = ref();

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

const setData = (value: any, type: number) => {
  console.log(value, type);
  //任务完成百分比
  let percentage = Math.floor((value.accomplish/value.counts)*100)

  echartsData.installTable!.div = inTable.value;
  echartsData.installTable!.title = props.title;
  echartsData.installTable!.data = {
    title: {
      text: echartsData.installTable!.title,
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 20,
      },
      top:'3%'
    },
    series: [
      {
        type: "gauge", // 仪表盘类型
        name: "系列名称", // 用于tooltip的显示
        startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
        endAngle: -270, // 仪表盘结束角度
        center: ["50%", "50%"], // 中心点（圆心坐标）
        radius: "50%", // 圆大小（仪表盘半径）
        clockwise: true, // 仪表盘刻度是否是顺时针增长
        // 仪表盘轴线相关配置
        axisLine: {
          show: true,
          roundCap: false, // 两端显示成圆形（背景环）
          clip: false, // 是否裁剪超出部分
          // 设置背景圆环样式
          lineStyle: {
            width: 20, // 圆环宽度
            color: [[1, "#002865"]], // 圆环背景色
          },
        },
        // 仪表盘指针
        pointer: {
          show: false,
        },
        // 进度设置
        progress: {
          show: true,
          overlap: false, // 多组数据时进度条是否重叠
          roundCap: true, // 是否在两端显示成圆形
          clip: false, // 是否裁掉超出部分
          // 进度条样式
          itemStyle: {
            borderWidth: 0,
            shadowColor: "",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: props.color[0], // 0% 处的颜色  '#02C77E'
                },
                {
                  offset: 1,
                  color: props.color[1], // 100% 处的颜色  '#017770'
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        // 仪表盘分割线
        splitLine: {
          show: false,
        },
        // 刻度样式
        axisTick: {
          show: false,
        },
        // 刻度标签
        axisLabel: {
          show: false,
        },
        title: {
          show: false,
          fontSize: 24,
        },
        detail: {
          // width: 50,
          // height: 14,
          fontSize: 20,
          color: "auto",
        },
        data: [
          {
            value: percentage,
            name: "345",
            title: {},
            detail: {
              // 中心title设置
              offsetCenter: ["0%", "0%"],
              color: "#01F8FF",
              formatter: "{value}%",
              // borderColor: '#01F8FF',
              // borderRadius: 20,
              // borderWidth: 1,
            },
          },
        ],
      },
    ],
  };
  if (type == 1) {
    change(echartsData.installTable);
  } else {
    updata(echartsData.installTable);
  }
};
const change = (item: EDataPersonItem) => {
  let Ebox = proxy.$echarts.init(item.div, "dark");
  Ebox.setOption(item.data);
  item.box = Ebox;
};
const updata = (item: EDataPersonItem) => {
  item.box.setOption(item.data);
};
function setchartWH(width: any, height: any) {
  inTable.value.style.height = height + "px";
  inTable.value.style.width = width + "px";

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

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

<style scoped></style>
