<template>
  <div id="gas-info-item">
    <div class="point" ref="point">
      <div class="info" ref="container"></div>
    </div>
    <div class="name">{{ gasInfo.name }}</div>
  </div>
</template>

<script setup>
import { defineProps, ref, watch, onMounted } from "vue";
import * as Echarts from "echarts";
let e_info;
let params = defineProps({
  gasInfo: Object,
});
// const gasInfo = {
//   name: "氧气", //气体名称
//   max: 100, //最大值
//   value: 66, //传感器值
//   point: 90, //阈值
// };

const option = {
  series: [
    {
      type: "gauge",
      startAngle: -90,
      endAngle: -450,
      radius: "100%",
      center: ["50%", "50%"],
      pointer: {
        show: false,
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          color: `${
              params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#7EDFEC"
          }`,
        },
      },
      max: params.gasInfo.max,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      data: [
        {
          value: params.gasInfo.value,
          fontSize: 2100,
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "0%"],
            fontSize: 26,
          },
        },
      ],
      axisLine: {
        lineStyle: {
          width: 25,
          color: [
            [1, "#0a4265"]
          ],
        },
      },
      detail: {
        width: 100,
        height: 14,
        fontSize: 26,
        color: `${
          params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#FFCE23"
        }`,
        formatter: "Vo{value}%",
      },
    },
  ],
};
let container = ref(null);
onMounted(handleOnMounted);
function handleOnMounted() {
  e_info = Echarts.init(container.value);
  e_info.setOption(option);
  // 设置阈值
  setPoint();
}
watch(
  () => params.gasInfo.value,
  (value) => {
    option.series[0].data[0].value = value;
    // 判断是否超过阈值则进度条变红
    value > params.gasInfo.point
      ? (option.series[0].progress.itemStyle.color = "#F94236")
      : (option.series[0].progress.itemStyle.color = "#7EDFEC");
    //   字体颜色
    value > params.gasInfo.point
      ? (option.series[0].detail.color = "#F94236")
      : (option.series[0].detail.color = "#FFCE23");
    e_info.setOption(option);
  }
);

// 获取阈值dom元素
const point = ref(null);
//手写js实现阈值的在表盘的刻度的位置
function setPoint() {
  const deg = 360 * (params.gasInfo.point / params.gasInfo.max);
  point.value.style.transform = `rotate(${deg}deg)`; //旋转指定度数
  point.value.children[0].style.transform = `rotate(${-deg}deg)`; //注意子元素逆向旋转
}
</script>

<style lang="scss" scoped>
#gas-info-item {
  width: 231px;
  text-align: center;
  //旋转定位阈值位于的刻度
  .point {
    width: 200px;
    height: 200px;

    position: relative;
  }
  //用伪元素标记阈值
  .point::after {
    content: "";
    display: block;
    height: 20px;
    width: 2px;
    background: #7EDFEC;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px #7EDFEC;
  }
  .info {
    width: 200px;
    height: 200px;
  }
  .name {
    width: 112px;
    height: 37px;
    font-size: 28px;
    font-family: MicrosoftYaHei;
    color: #ffffff;
    line-height: 37px;
    margin: 10px auto 0px;
  }
}
</style>
