<!-- 设备列表 -->
<template>
  <div class="equipment-list">
    <div
      :class="props.showPartList ? 'card' : 'fromEquipment'"
      v-for="item in list"
      :key="item.id"
      @click="checkEquipmentDetail(item)"
    >
      <div class="main">
        <img
          v-if="item.status === '正常'"
          src="../../../../assets/images/normal.png"
          class="img-normal"
        />
        <img
          v-if="item.status === '报警'"
          src="../../../../assets/images/alarm.png"
          class="img-normal"
        />
        <img
          v-if="item.status === '离线'"
          src="../../../../assets/images/offline.png"
          class="img-normal"
        />
        <div class="contain">
          <div class="name">{{ item.doorName }}</div>
          <div class="text">详细位置: {{ item.position }}</div>
          <div class="text">设备编号: {{ item.devCode }}</div>
          <div class="text">
            <span>设备状态: </span>
            <span :class="item.status === '正常' ? 'online' : item.status === '离线' ? 'offline' : item.status === '报警' ? 'alarm' : 'text'">{{ item.status }}</span>
          </div>
        </div>
      </div>

      <div class="line" v-if="props.showPartList"></div>
    </div>
  </div>
</template>
<script lang="ts" setup name="EquipmentList">
import { ref } from "vue";
import { IEquipmentList } from "../../home/components/equipmentList-interface";
const emits = defineEmits(["checkEquipmentDetail"]);
const props = defineProps({
  equipmentList: {
    type: Array as PropType<IEquipmentList[]>,
  },
  showPartList: {
    type: Boolean,
    default: false,
  },
});
const list = ref<IEquipmentList[]>([]); // 设备列表
// 查看设备详情
const checkEquipmentDetail = (item: IEquipmentList) => {
  emits("checkEquipmentDetail", item);
};

watch(
  () => props.equipmentList,
  (newVal) => {
    if (props.showPartList && newVal!.length > 5) {
      list.value = newVal!.filter((item, index) => {
        if (index < 5) {
          return item;
        }
      });
    } else {
      list.value = newVal!;
    }
  }
);
</script>
<style lang="scss" scoped>
.equipment-list {
  .card {
    // display: flex;
    // align-items: center;
  }
  .fromEquipment {
    // 设备管理
    background-color: #fff;
    margin: 16px 0;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 5px 5px 5px #cdcfcf;
  }
  .main {
    display: flex;
    align-items: center;
  }
  .img-normal {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
  .contain {
    width: 100%;
    line-height: 26px;
    margin-top: 20px;
    .name {
      font-size: 22px;
      font-weight: 600;
    }
    .text {
      color: #978888;
      font-size: 18px;
    }
  }
  .line {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 20px 0;
  }
  .online {
    font-size: 18px;
    color: #1ca951;
  }
  .alarm {
    font-size: 18px;
    color: #d54941;
  }
  .offline {
    font-size: 18px;
    color: #6c6c6c;
  }
}
</style>