<template>
  <border13>
  <div class="container">
    <div class="echartbox" ref="humiture"></div>
  </div>
</border13>
</template>
  
<script setup lang='ts'>
import { getCurrentInstance, markRaw, onMounted, reactive, ref, watch, onUnmounted,computed } from "vue";
import { useSocketStore } from "@/store/moduleSocketMicEnvironment";
import border13 from '@/components/border/Border13.vue'
const { proxy } = getCurrentInstance() as any;
const store = useSocketStore();
let index = 0;
let humiture = ref();
let chart = null
// const props = defineProps<{
//   top: any;
//   bottom: any;
// }>();
const borderColor = ["#E43961","#E43961"]
function init() {

  if (!chart) {
    chart = proxy.$echarts.init(humiture.value, 'dark');
  }
  let option = {
    title: {
      text: store.humiture.name,
      show: true,
      textStyle: {
        color: "#fff",
        fontSize: 18,
      },
      top: '2%'
    },
    grid: {
      // 让图表占满容器
      top: "0px",
      left: "0px",
      right: "0px",
      bottom: "0px",
    },
    series: [
      {
        type: "gauge",
        center: ["50%", "90%"],
        startAngle: 190,
        endAngle: -10,
        radius: "50%",
        min: -30,
        max: 50,
        splitNumber: 10,
        progress: {
          show: false,
          width: 5
        },
        pointer: {
          itemStyle: {
            color: 'inherit'
          }
        },
        //刻度轴宽
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.575, '#1089E7'],
              [0.725, '#7CFFB2'],
              [1, '#FF6E76']
            ]
          }
        },
        //刻度线
        axisTick: {
          show: false,
          distance: -5,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        //刻度线
        splitLine: {
          distance: 5,
          length: 3,
          lineStyle: {
            width: 3,
            color: '#999'
          }
        },
        //表刻度值
        axisLabel: {
          distance: 15,
          color: '#999',
          fontSize: 10
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          // width: '10%',
          // lineHeight: 5,
          // borderRadius: 8,
          offsetCenter: [0, '25%'],
          fontSize: 15,
          // fontWeight: 'bolder',
          formatter: '{value} °C',
          color: 'inherit'
        },
        data: [
          {
            value: store.humiture.temp
          }
        ]
      },
      {
        type: "gauge",
        center: ["50%", "55%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        progress: {
          show: false,
          width: 5
        },
        pointer: {
          itemStyle: {
            color: 'inherit'
          }
        },
        //刻度轴宽
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.4, '#FF6E76'],
              [0.7, '#7CFFB2'],
              [1, '#1089E7']
            ]
          }
        },
        //刻度线
        axisTick: {
          distance: 0,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: '#999'
          }
        },
        //刻度线
        splitLine: {
          distance: 5,
          length: 3,
          lineStyle: {
            width: 3,
            color: '#999'
          }
        },
        axisLabel: {
          distance: 15,
          color: '#999',
          fontSize: 12
        },
        anchor: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          offsetCenter: [0, '15%'],
          fontSize: 20,
          formatter: '{value} %RH',
          color: 'inherit'
        },
        data: [
          {
            value: store.humiture.humidity
          }
        ]
      },
    ],
  };

  chart.setOption(option);
}
watch(
  () => store.humiture,
  (newData) => {
    init()
  },
  { deep: true }
);
onMounted(() => {
  init();
});
onUnmounted(() => {
});
</script>
  
<style scoped>
.container {
  width: 100%;
  height: 100%;
}

.errList {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.echartbox {
  width: 100%;
  height: 100%;
}


</style>
  