<!-- 报警列表页面 -->
<script setup>
import { ref } from "vue";
import { useWsStore } from "../store";
import Container from "../components/Base/Container.vue";

const store = useWsStore();
const alarmList = ref((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}`,
  }));
});

// function handleIgnore() {
//   alarmList.value.splice(0)
// }
</script>

<template>
  <div class="alert-list-page">
    <Container class="alert-list" title="报警列表" icon="cube">
      <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="80"></el-table-column>
          <el-table-column prop="eqIndex" label="序号" width="60"></el-table-column>
          <el-table-column prop="alarmGrade" label="报警等级" width="100"></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 @click="handleIgnore" class="alert-btn">忽略</button> -->
    </Container>
  </div>
</template>

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

.dark-row {
  color: #fff;
  background: #006ACD32 !important;
  user-select: none;
}

.dark-row:nth-child(odd) {
  background: #020D2D32 !important;
}

.dark-row>td.el-table__cell {
  border: none;
  font-size: 16px;
}

.dark-row>td.el-table__cell:not(:last-child) {
  border-right: 1px solid #0003;
}

.dark-row:hover>td.el-table__cell {
  /* background-color: #020D2D20 !important; */
  background-color: #fff1 !important;
}

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

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

.dark-header>th.el-table__cell {
  font-size: 16px;
}

.dark-header>th.el-table__cell:not(:last-child) {
  border-right: 1px solid #0003;
}
</style>

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

.alert-list {
  height: calc(100% - 56px);
  width: 520px;

  position: absolute;
  top: 15px;
  right: 32px;

  display: flex;
  flex-direction: column;
}

:fullscreen .alert-list {
  width: 35%;
  top: 32px;
  height: calc(100% - 64px);
}

.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 {
  width: 100%;
  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>
