<template>
  <div class="alarm-wrapper">
    <div class="table-header">
      <div
        class="header-item"
        v-for="item in headerList"
        :key="item.id"
        :style="{ width: item.width }"
      >
        <div class="name">{{ item.name }}</div>
        <div class="img"></div>
      </div>
    </div>
    <div class="table-body">
      <div
        class="table-row"
        v-for="(item, index) in tableList"
        :key="item.id"
        :class="index % 2 === 0 ? 'active-bg' : ''"
      >
        <div style="width: 35%" class="title">
          {{ item.alarmStartTime }}
        </div>
        <div style="width: 25%" class="title title-overflow">
          {{ item.deviceName }}
        </div>
        <div style="width: 22%" class="title">{{ item.alarmTypeLabel }}</div>
        <div
          style="width: 18%"
          class="title"
          :class="
            item.state === '2'
              ? 'color-two'
              : item.state === '3'
              ? 'color-three'
              : item.state === '4'
              ? 'color-four'
              : 'color-one'
          "
        >
          {{ item.stateLabel }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { alarmManage } from "@/api/largeScreen";
import { getDicts } from "@/api/index";

const props = defineProps(["buildingId"]);

const headerList = ref([
  { id: 0, name: "告警时间", width: "35%" },
  { id: 1, name: "设备名称", width: "25%" },
  { id: 2, name: "告警类型", width: "22%" },
  { id: 3, name: "告警状态", width: "18%" },
]);
const tableList = ref([]);

const alarmTypeList = ref([]);
const alarmStateList = ref([]);

onMounted(async () => {
  alarmTypeList.value = await getDicts("alarm_type");
  alarmStateList.value = await getDicts("alarm_state");

  alarmManage({ buildingIdList: props.buildingId }).then((res) => {
    tableList.value = res.rows.map((item) => {
      return {
        ...item,
        alarmTypeLabel: alarmTypeList.value.data.find(
          (v) => v.dictValue === item.alarmType
        )?.dictLabel,
        stateLabel: alarmStateList.value.data.find(
          (v) => v.dictValue === item.state
        )?.dictLabel,
      };
    });
  });
});
</script>

<style lang="scss" scoped>
</style>
