<template>
  <div class="sensor-item">
    <!-- :style="{color:item.status == 'true'?'#469DE9':'gray'}" -->
    <component style="width: 60px;height: 60px;margin-top: 10px;" :is="componentmap[prop.sensorData.component]"
      :value="prop.sensorData.list[i].value" :color="checkCb(prop.sensorData.list[i])" :unit="prop.sensorData.unit" />
    <!-- prop.sensorData.status == 'true'?'#469DE9':'gray' -->

    <div style="margin: 10px 0">{{prop.sensorData.list[i].status=== 'false' ? '——' :prop.sensorData.list[i].value + prop.sensorData.unit }}</div>
    <div style="text-align: center;">{{ prop.sensorData.list[i].name }}</div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import SvgPm25 from './svgPm25.vue';
import SvgPm10 from './svgPm10.vue';
import SvgJiaquan from './svgJiaquan.vue';
import SvgZaosheng from './svgZaosheng.vue';
import SvgTVOC from './svgTVOC.vue';
import SvgShidu from './svgShidu.vue';
import SvgWendu from './svgWendu.vue';
import SvgYanwu from './svgYanwu.vue';

const prop = defineProps({
  sensorData: {
    type: Object,
    default: () => {
      return {
        unit: 'ug/m³',
        limit: 35,
        component: 'SvgPm25',
        list: [
          {
            name: 'PM2.5',
            status: 'true',
            value: 0,
          }
        ]

      }
    }
  }
})
const i = ref(0)
let timer = null
const componentmap = {
  'SvgPm25': SvgPm25,
  'SvgPm10': SvgPm10,
  'SvgJiaquan': SvgJiaquan,
  'SvgZaosheng': SvgZaosheng,
  'SvgTVOC': SvgTVOC,
  'SvgShidu': SvgShidu,
  'SvgWendu': SvgWendu,
  'SvgYanwu': SvgYanwu
}

//检测是否超标
function checkCb(item) {
  if (item.status === 'false') {
    return 'gray'
  } else if (item.value > prop.sensorData.limit) {
    return '#FF0000'
  } else {
    return '#469DE9'
  }
}

onMounted(() => {
  timer = setInterval(() => {
    i.value++;
    if (i.value >= prop.sensorData.list.length) {
      i.value = 0;
    }
  }, 5000);
})
</script>

<style lang="scss" scoped>
.sensor-item {
  width: 120px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: #fff;

  .sensor-icon {
    width: 60px;
    height: 60px;
  }
}
</style>
