<template>
  <border13  :color="errList.length>0?borderColor:[]">
  <div class="container">
    <div class="errList">
      <div class="err-item icon-red" v-for="item in errList">{{ item.name }}</div>
    </div>
    <div class="echartbox" ref="dust">
    </div>
  </div>
</border13>
</template>

<script setup lang='ts'>
import { getCurrentInstance, markRaw, onMounted, onUnmounted, reactive, ref, watch,computed } from "vue";
import { useSocketStore } from "@/store/moduleSocketMechanics";
import border13 from '@/components/border/Border13.vue'
import { number } from "echarts/core";
const { proxy } = getCurrentInstance() as any;
const store = useSocketStore();
let index = 0;
let dust = ref();
let chart = ref(null)
let timer = null
const props = defineProps({
  pm10limit:{
    type:Number,
    default:150
  },
  pm25limit:{
    type:Number,
    default:75
  }
})
let errList = computed(() => {
  let arr = JSON.parse(JSON.stringify(store.pm.filter(item=>{
    return +item.pm10>props.pm10limit||+item.pm25>props.pm25limit
  }))).map(item=>{
    item.name = item.name.split('车间')[0]
    return item
  })
  if (arr.length>0) {
    //name去重
    let nameArr = []
    arr = arr.filter(item=>{
      if (nameArr.indexOf(item.name)===-1) {
        nameArr.push(item.name)
        return true
      }else{
        return false
      }
    })

  }
  return arr;
})
const borderColor = ["#E43961","#E43961"]
function init() {
  if (!chart.value) {
    chart.value = proxy.$echarts.init(dust.value, 'dark');
  }
  let option = {
    title: {
      text: store.pm[index].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: 0,
        max: 100,
        splitNumber: 10,
        pointer: {
          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
          length: "12%",
          width: 10,
          offsetCenter: [0, "-40%"],
          itemStyle: {
            color: "inherit",
          },
        },
        axisLine: {
          lineStyle: {
            width: 8,
            color: [
              [0.35, "#7CFFB2"],
              [0.75, "#FDDD60"],
              [1, "#FF6E76"],
            ],
          },
        },
        axisTick: {
          distance: 0,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: 5,
          length: 8,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: 12,
          color: "#999",
          fontSize: 10,
        },
        anchor: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 20,
          borderRadius: 8,
          offsetCenter: [0, "20%"],
          fontSize: 15,
          fontWeight: "bolder",
          formatter: "{value} μg/m3",
          color: "inherit",
        },
        title: {
          // show: false,
          offsetCenter: [0, "-20%"],
        },
        data: [
          {
            value: store.pm[index].pm25,
            name: "PM2.5",
          },
        ],
      },
      {
        type: "gauge",
        center: ["50%", "50%"],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 200,
        axisLine: {
          lineStyle: {
            width: 10,
            color: [
              [0.35, "#7CFFB2"],
              [0.75, "#FDDD60"],
              [1, "#FF6E76"],
            ],
          },
        },
        pointer: {
          itemStyle: {
            color: "inherit",
          },
        },
        axisTick: {
          distance: -10,
          length: 6,
          lineStyle: {
            color: "#fff",
            width: 2,
          },
        },
        splitLine: {
          distance: -10,
          length: 10,
          lineStyle: {
            color: "#fff",
            width: 4,
          },
        },
        axisLabel: {
          color: "inherit",
          distance: 20,
          fontSize: 10,
        },
        detail: {
          valueAnimation: true,
          offsetCenter: [0, "20%"],
          fontSize: 20,
          formatter: "{value} μg/m3",
          color: "inherit",
        },
        title: {
          offsetCenter: [0, "-50%"],
        },
        data: [
          {
            value: store.pm[index].pm10,
            name: "PM10",
          },
        ],
      },
    ],
  };

  chart.value.setOption(option);
}

onMounted(() => {
  init();
  timer = setInterval(() => {
    index = index + 1;
    if (index >= store.pm.length) {
      index = 0;
    }
    init();
  }, 5000);
});
onUnmounted(() => {
  clearInterval(timer);
})
</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: calc(100% - 50px);
}

.icon-red {
  color: #e43961;
  animation: redstart 2s infinite;
  font-size: 14px;
  /* position: relative; */
  /* top: -15px; */
}
.err-item {
  margin: 0 10px;
}

@keyframes redstart {
  0% {}

  50% {
    text-shadow: #fff 1px 0 10px;
  }

  100% {}
}
</style>
