<!-- 监控数据组件 -->
<script setup lang="ts" name="LabMonitorData">
const props = defineProps({
  background: { // 背景颜色
    type: String,
    default: 'rgba(247, 105, 50, 0.4)',
  },
  top: { // 绝对定位top
    type: String,
    default: '60%',
  },
  left: { // 绝对定位left
    type: String,
    default: '20%',
  },
  title: { // 标题
    type: String,
    default: '温湿度计量工作间(内)',
  },
  equipmentNoList: { // 设备编号数组
    type: Array,
    default: () => ['sbbh123455266', 'sbbh789456123'],
  },
  temperature: { // 温度
    type: String,
    default: '',
  },
  humidity: { // 湿度
    type: String,
    default: '',
  },
  voltage: { // 电压
    type: String,
    default: '',
  },
  smoke: { // 烟雾
    type: String,
    default: '',
  },
  oxygen: { // 氧气
    type: String,
    default: '',
  },
  voc: { // VOC
    type: String,
    default: '',
  },
  fanOxygen: { // 风扇氧气
    type: String,
    default: '',
  },
  wallOxygen: { // 挂墙氧气
    type: String,
    default: '',
  },
})
</script>

<template>
  <div class="lab-monitor-data" :style="{ background, top, left }">
    <!-- <div class="title">
      {{ props.title }}
    </div> -->
    <!-- <div v-for="(item, index) in props.equipmentNoList" :key="index" class="equipment-no">
      {{ item }}
    </div> -->
    <!-- 温度  -->
    <div v-if="props.temperature" class="data">
      <span>
        <!-- 温度:ㅤ -->
        <span class="text"> {{ props.temperature }} {{ props.temperature !== '-' ? '℃' : '' }}</span>
      </span>
    </div>
    <!-- 湿度  -->
    <div v-if="props.humidity" class="data">
      <span>
        <!-- 湿度:ㅤ -->
        <span class="text"> {{ props.humidity }}{{ props.humidity !== '-' ? '%' : '' }}</span>
      </span>
    </div>
    <!-- 电压  -->
    <div v-if="props.voltage" class="data">
      <span>
        <!-- 电压:ㅤ -->
        <span class="text"> {{ props.voltage }}{{ props.voltage !== '-' ? 'V' : '' }}</span>
      </span>
    </div>
    <!-- 烟雾  -->
    <div v-if="props.smoke" class="data">
      <span>
        <!-- 烟雾:ㅤ -->
        <span class="text"> {{ props.smoke }}</span>
      </span>
    </div>
    <!-- 氧气  -->
    <div v-if="props.oxygen" class="data">
      <div>
        氧气:ㅤ
        <div class="text">
          {{ props.oxygen }}{{ props.oxygen !== '-' ? 'ppm' : '' }}
        </div>
      </div>
    </div>
    <!-- VOC -->
    <div v-if="props.voc" class="data">
      <span>
        <!-- VOC:ㅤ -->
        <span class="text"> {{ props.voc }}{{ props.voc !== '-' ? 'g/l' : '' }}</span>
      </span>
    </div>
    <!-- 风扇氧气 -->
    <div v-if="props.fanOxygen" class="data">
      <span>风扇氧气:ㅤ<span class="text"> {{ props.fanOxygen }}</span></span>
    </div>
    <!-- 挂墙氧气 -->
    <div v-if="props.wallOxygen" class="data">
      <span>挂墙氧气:ㅤ<span class="text"> {{ props.wallOxygen }}</span></span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.lab-monitor-data {
  position: absolute;
  padding: 8px 10px;
  border-radius: 4px;
  transition: all 0.5s ease-out;

  &:hover {
    background: rgb(61 126 255 / 90%) !important;
    // color: #fff;
    // font-weight: 600;
    transform: scale(1.6);
    z-index: 9999;
  }

  .title {
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 6px;
  }

  .equipment-no {
    font-size: 10px;
  }

  .data {
    font-size: 11px;

    .text {
      font-weight: 600;
    }
  }
}
</style>