<template>
  <div class="alarm-list-box" ref="alarmListBox">
    <box-header title="告警列表" :isSelectShow="false" :isExpandedShow="false" />
    <div class="alarm-list-table">
      <el-table
        :height="tableHeight"
        :header-cell-style="{ textAlign: 'center', fontSize: '14px', background: '#192a5e !important', color: '#ffffff', border: 'none !important' }"
        :cell-style="{ color: '#fff', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #143275 solid', borderLeft: '0.5px #143275 solid' }"
        :row-style="{ color: '#fff', fontSize: '14px', textAlign: 'center' }"
        :row-class-name="tableRowClassName"
        :data="alarmData">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="异常类型" align="center" width="100" prop="title" />
        <el-table-column label="异常描述" align="left" prop="message">
          <template #default="scope">
            <el-popover placement="top" :width="300" trigger="hover" :content="scope.row.message">
              <template #reference>
                {{ handleEllipsis(scope.row.message, 7) }}
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="异常事件" align="center" prop="creatTime" />
      </el-table>

      <screen-pagination class="pagination" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getAlarmList" />
    </div>
  </div>
</template>

<script setup>
import { getWarnList } from "@/api/screen/screen"
import BoxHeader from "../components/BoxHeader.vue"
import ScreenPagination from "@/components/ScreenPagination"
import { useTimeoutPoll } from '@vueuse/core'

const alarmListBox = ref(null)
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
})
const alarmData = ref([])

const getAlarmList = () => {
  getWarnList(queryParams.value).then(res => {
    alarmData.value = res.rows
    total.value = res.total
  })
}
const { isActive, pause, resume } = useTimeoutPoll(getAlarmList, 600000)

const tableHeight = ref(0)
const calculateTableHeight = () => {
  nextTick(() => {
    const headerHeight = 50
    const paginationHeight = 50
    const containerHeight = alarmListBox.value.offsetHeight
    const height = containerHeight - headerHeight - paginationHeight - 20 // 减去一些额外的间距
    tableHeight.value = height
  })
}

onMounted(() => {
  getAlarmList()
  window.addEventListener("resize", calculateTableHeight)
  calculateTableHeight()
  resume()
})

onUnmounted(() => {
  window.removeEventListener("resize", calculateTableHeight)
})

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 == 0) {
    return ""
  } else {
    return "warning-row"
  }
}

const handleEllipsis = (value, length) => {
  if (!value) {
    return ""
  }
  if (value.length > length) {
    return value.slice(0, length) + "..."
  }
  return value
}
</script>

<style lang="scss" scoped>
.alarm-list-box {
  height: 100%;

  .alarm-list-table {
    padding: 10px 15px;
  }
}

// 表格部分样式
// 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
  color: #93dcfe;
  font-size: 24px;
}

/* 表格内背景颜色  */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
  border: 0px;
  color: #93dcfe;
  font-size: 24px;
  height: 5px;
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
}

/* // 去掉最下面的那一条线  */

::v-deep .el-table__inner-wrapper::before {
  height: 0px;
  // background-color: #173d91;
}

/* // 设置表格行高度 */
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 44px;
}

/* // 修改高亮当前行颜色 */
::v-deep .el-table tbody tr:hover > td {
  background: #063570 !important;
}

/* // 取消当前行高亮 */
// ::v-deep .el-table tbody tr {
//   pointer-events: none;
// }

/* 修改表头样式-加边框 */
// ::v-deep .el-table__header-wrapper {
//   border: solid 1px #04c2ed;
// }

/* // 表格斑马自定义颜色 */
::v-deep .el-table__row.warning-row {
  background: #192a5e;
}

/* 去掉表格里的padding */
::v-deep .el-table .cell,
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}

::v-deep .el-table__empty-text {
  color: #ffffff;
  letter-spacing: 5px;
}
</style>
