<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

// 图标icon对照表
const icons = [
  { 监控: 'camera' },
  { 传感器: 'sensor' },
  { 水质溶解氧: 'O2' },
  { 温度: 'temp' },
  { 酸碱度: 'ph' },
  { 水质电导率: 'elect' },
  { 浊度: 'dust' },
  { 悬浮物: 'float' },
  { 分光器: 'light' },
  { 阀门: 'valve' },
  { 喷头: 'sprinkler' },
  { 计时器: 'timer' },
  { 加热器: 'heater' },
  { 搅拌机: 'mixer' },
  { 热力: 'heat' },
  { 液位传感器: 'liquidSensor' },
  { 消毒灯: 'disinfectionLamp' },
  { 温度传感器: 'tempSensor' },
  { 智能阀控: 'intelligentValveControl' },
  { 供水阀: 'waterSupplyValve' },
  { 混合阀: 'mixingPump' },
  { 混合罐: 'mixingTank' },
  { 施肥: 'fertilization' },
  { 肥料罐: 'fertilizerTank' },
  { 电磁阀状态: 'solenoidValve' },
  { 'PM2.5': 'PM2.5' },
  { 风速仪: 'anemometer' },
  { 雨量计: 'rainGauge' },
  { 土壤传感器: 'soilSensor' },
  { 积水传感器: 'waterLoggingSensor' },
];

const props = defineProps({
  devices: {
    type: Array,
    required: true,
    default: () => [],
    validator: (items) => {
      return items.every((item) => {
        return (
          typeof item === 'object' &&
          item !== null &&
          typeof item.id === 'number' &&
          typeof item.name === 'string' &&
          typeof item.detail === 'string' &&
          typeof item.icon === 'string' &&
          (!item.status || typeof item.status === 'number')
        );
      });
    },
  },
  title: {
    type: String,
    required: true,
    default: () => '',
    validator: (items) => {
      return items;
    },
  },
});
</script>

<template>
  <div>
    <el-card style="border-radius: 16px">
      <div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">{{ title }}</div>
      <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
        <div v-for="(item, index) in devices" :key="index" class="device">
          <div v-if="item.status == 1" class="status" style="background-color: #25bf82">正常</div>
          <div v-else-if="item.status == 0" class="status" style="background-color: #999999">离线</div>
          <div v-else-if="item.status == -1" class="status" style="background-color: #fe4066">异常</div>
          <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
            <img v-if="item.icon === 'camera'" :src="getAssetsFile('images/smartFarm/监控.png')" alt="" />
            <img v-else-if="item.icon === 'sensor'" :src="getAssetsFile('images/smartFarm/传感器.png')" alt="" />
            <img v-else-if="item.icon === 'O2'" :src="getAssetsFile('images/smartFarm/水质溶解氧.png')" alt="" />
            <img v-else-if="item.icon === 'temp'" :src="getAssetsFile('images/smartFarm/温度.png')" alt="" />
            <img v-else-if="item.icon === 'ph'" :src="getAssetsFile('images/smartFarm/酸碱度.png')" alt="" />
            <img v-else-if="item.icon === 'elect'" :src="getAssetsFile('images/smartFarm/水质电导率.png')" alt="" />
            <img v-else-if="item.icon === 'dust'" :src="getAssetsFile('images/smartFarm/浊度.png')" alt="" />
            <img v-else-if="item.icon === 'float'" :src="getAssetsFile('images/smartFarm/悬浮物.png')" alt="" />
            <img v-else-if="item.icon === 'light'" :src="getAssetsFile('images/smartFarm/分光器.png')" alt="" />
            <img v-else-if="item.icon === 'valve'" :src="getAssetsFile('images/smartFarm/阀门.png')" alt="" />
            <img v-else-if="item.icon === 'sprinkler'" :src="getAssetsFile('images/smartFarm/喷头.png')" alt="" />
            <img v-else-if="item.icon === 'timer'" :src="getAssetsFile('images/smartFarm/计时器.png')" alt="" />
            <img v-else-if="item.icon === 'heater'" :src="getAssetsFile('images/smartFarm/加热器.png')" alt="" />
            <img v-else-if="item.icon === 'mixer'" :src="getAssetsFile('images/smartFarm/搅拌机.png')" alt="" />
            <img v-else-if="item.icon === 'heat'" :src="getAssetsFile('images/smartFarm/热力.png')" alt="" />
            <img v-else-if="item.icon === 'liquidSensor'" :src="getAssetsFile('images/smartFarm/液位传感器.png')" alt="" />
            <img v-else-if="item.icon === 'disinfectionLamp'" :src="getAssetsFile('images/smartFarm/消毒灯.png')" alt="" />
            <img v-else-if="item.icon === 'tempSensor'" :src="getAssetsFile('images/smartFarm/温度传感器.png')" alt="" />
            <img v-else-if="item.icon === 'intelligentValveControl'" :src="getAssetsFile('images/smartFarm/智能阀控.png')" alt="" />
            <img v-else-if="item.icon === 'waterSupplyValve'" :src="getAssetsFile('images/smartFarm/供水阀.png')" alt="" />
            <img v-else-if="item.icon === 'mixingPump'" :src="getAssetsFile('images/smartFarm/混合泵.png')" alt="" />
            <img v-else-if="item.icon === 'mixingTank'" :src="getAssetsFile('images/smartFarm/混合罐.png')" alt="" />
            <img v-else-if="item.icon === 'fertilization'" :src="getAssetsFile('images/smartFarm/施肥.png')" alt="" />
            <img v-else-if="item.icon === 'fertilizerTank'" :src="getAssetsFile('images/smartFarm/肥料罐.png')" alt="" />
            <img v-else-if="item.icon === 'solenoidValve'" :src="getAssetsFile('images/smartFarm/电磁阀状态.png')" alt="" />
            <img v-else-if="item.icon === 'PM2.5'" :src="getAssetsFile('images/smartFarm/PM2.5.png')" alt="" />
            <img v-else-if="item.icon === 'anemometer'" :src="getAssetsFile('images/smartFarm/风速仪.png')" alt="" />
            <img v-else-if="item.icon === 'rainGauge'" :src="getAssetsFile('images/smartFarm/雨量计.png')" alt="" />
            <img v-else-if="item.icon === 'soilSensor'" :src="getAssetsFile('images/smartFarm/土壤传感器.png')" alt="" />
            <img v-else-if="item.icon === 'waterLoggingSensor'" :src="getAssetsFile('images/smartFarm/积水传感器.png')" alt="" />
            <div style="text-align: left; font-weight: bold; font-size: 18px">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.device {
  height: 100px;
  width: 14%;
  background-color: #f5f5f5;
  margin: 20px 1%;
  border-radius: 16px;
  position: relative;
  cursor: pointer;
  padding: 10px 20px;
  img {
    height: 35px;
    width: 35px;
  }
}
.status {
  border-radius: 0 16px 0 16px;
  height: 30px;
  width: 30px;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 10px;
}
</style>
