<!-- 报警列表页面 -->
<script setup>
import { ref } from "vue";
import { useWsStore } from "../store";
const alarmList = ref([]);
const store = useWsStore();

alarmList.value = (store.data1.alarmArrList ?? []).map((item, index) => ({
  id: item.id,
  eqName: item.equipmentName,
  eqIndex: index + 1,
  alarmGrade: item.alarmLevel,
  alarmDetail: item.alarmDetails,
  position: `${item.productLine} - ${item.segment}`,
}));

store.$subscribe((mutation, state) => {
  alarmList.value = state.data1.alarmArrList.map((item, index) => ({
    id: item.id,
    eqName: item.equipmentName,
    eqIndex: index + 1,
    alarmGrade: item.alarmLevel,
    alarmDetail: item.alarmDetails,
    position: `${item.productLine} - ${item.segment}`,
  }));
});
</script>

<template>
  <div class="alert-list-page">
    <div class="alert-list">
      <div class="alert-list__table" style="">
        <el-table
          class="dark-table"
          :data="alarmList"
          :show-overflow-tooltip="true"
          row-class-name="dark-row"
          header-row-class-name="dark-header"
        >
          <el-table-column
            prop="eqName"
            label="设备名"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="eqIndex"
            label="序号"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="alarmGrade"
            label="报警等级"
            width="90"
          ></el-table-column>
          <el-table-column
            prop="alarmDetail"
            label="报警细节"
            width="144"
          ></el-table-column>
          <el-table-column prop="position" label="定位"></el-table-column>
        </el-table>
      </div>
      <button class="alert-btn">忽略</button>
    </div>
  </div>
</template>

<style>
.dark-table {
  /* height: 72vh; */
  /* height: 72%; */
  height: 100%;
  background: transparent;
}

.dark-row {
  color: #fff;
  background: #005eff25 !important;
}

.dark-row > td.el-table__cell {
  border: none;
}

.dark-row:hover > td.el-table__cell {
  background-color: #005effaa !important;
}

.dark-header {
  background-color: transparent !important;
  color: #fff;
}

.dark-header > th.el-table__cell.is-leaf {
  border-bottom: none;
  background-color: #005eff95 !important;
  font-weight: 400;
  letter-spacing: 1px;
}

.dark-header > th.el-table__cell {
}
</style>

<style scoped>
.alert-list-page {
  flex: 1;
  position: relative;
}

.alert-list {
  height: 100%;
  width: 480px;

  position: absolute;
  top: 0;
  right: 0;

  display: flex;
  flex-direction: column;
}

.alert-list__table {
  height: calc(100% - 72px);
  background: linear-gradient(to right, transparent, #0ba6ff80);
}

.alert-list__table >>> .el-table__inner-wrapper::before {
  background: transparent;
}

button {
  appearance: none;
  outline: none;
  border: none;
  cursor: pointer;
}

.alert-btn {
  height: 72px;
  background: #0f04;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 2px;
  transition: all 0.2s ease-out;
}

.alert-btn:hover {
  background: #0f08;
}
</style>
