<!--
  Description: 事件大屏 - 数据展示- 当前报警
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenBasicOverView">
import layout from './layout.vue'
import { getCurrentAlarmListPage } from '@/api/home/alarm/current'
// 宽高
const height = ref((window.innerHeight - 100 - 50) / 3)
const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
window.addEventListener('resize', () => {
  height.value = (window.innerHeight - 100 - 50) / 3
  width.value = (window.innerWidth - (window.innerWidth * 0.6) - 30) / 2
})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => {})
})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => {})
})
const loadingTable = ref(true)
const columns = ref<any[]>([
  { text: '报警类型', value: 'alarmType', align: 'center' },
  { text: '管理单位', value: 'deptName', align: 'center' },
  { text: '报警内容', value: 'alarmContent', align: 'center' },
  { text: '报警时间', value: 'alarmTime', align: 'center' },
  { text: '报警地点', value: 'position', align: 'center' },
  { text: '确认状态', value: 'processStatusName', align: 'center' },
])
const list = ref<any[]>([])
onMounted(() => {
  loadingTable.value = true
  getCurrentAlarmListPage({ offset: 1, limit: 999 }).then(res => {
    // console.log(res.data.rows, '当前报警数据')
    list.value = res.data.rows
    loadingTable.value = false
  })
  // setTimeout(() => {
  //   loadingTable.value = false
  //   // list.value = [
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //     deptName: '第一分公司',
  //   //     alarmContent: '浓度20%vol',
  //   //     alarmTime: '2024-09-10 12:01:00',
  //   //     position: '北京西西城区前门大街',
  //   //     status: '已确认',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //     deptName: '第一分公司',
  //   //     alarmContent: '浓度20%vol',
  //   //     alarmTime: '2024-09-10 12:01:00',
  //   //     position: '北京西西城区前门大街',
  //   //     status: '已确认',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //     deptName: '第一分公司',
  //   //     alarmContent: '浓度20%vol',
  //   //     alarmTime: '2024-09-10 12:01:00',
  //   //     position: '北京西西城区前门大街',
  //   //     status: '已确认',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //     deptName: '第一分公司',
  //   //     alarmContent: '浓度20%vol',
  //   //     alarmTime: '2024-09-10 12:01:00',
  //   //     position: '北京西西城区前门大街',
  //   //     status: '已确认',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //     deptName: '第一分公司',
  //   //     alarmContent: '浓度20%vol',
  //   //     alarmTime: '2024-09-10 12:01:00',
  //   //     position: '北京西西城区前门大街',
  //   //     status: '已确认',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //     deptName: '第一分公司',
  //   //     alarmContent: '浓度20%vol',
  //   //     alarmTime: '2024-09-10 12:01:00',
  //   //     position: '北京西西城区前门大街',
  //   //     status: '已确认',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //   },
  //   //   {
  //   //     alarmType: '浓度超限',
  //   //     deptName: '第一分公司',
  //   //     alarmContent: '浓度20%vol',
  //   //     alarmTime: '2024-09-10 12:01:00',
  //   //     position: '北京西西城区前门大街',
  //   //     status: '已确认',
  //   //   },
  //   // ]
  // }, 1000)
})
</script>

<template>
  <layout :height="height" :width="width" title="当前报警" subtitle="Current Alarm">
    <template #content>
      <div style="padding: 0 5px;">
        <normal-table
          :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
          :pagination="false" :height="height - 30" :border="true"
        />
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
::v-deep(.el-loading-mask) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

::v-deep(.el-table__cell) {
  padding: 0;
  color: #ddd8d8;
  background-color: #2a2b3d;
}
::v-deep(.el-table__body-wrapper) {
  background-color: rgba($color: #0b0b0f, $alpha: 95%);
}

// ::v-deep(.el-table__cell) {
//   border-color: #2A2B3D;
// }

::v-deep(.el-table__header) {
  font-size: 12px;
  // background-color: aqua;
  color: #ddd8d8;

  tr {
    .cell {
      background-color: #01406d;
      border-color: #2a2b3d;
    }
  }
}

// ::v-deep(.el-table__cell) {
//   background-color: #2A2B3D;
// }

::v-deep(.el-table__row) {
  background-color: #5c5d6b;
}

::v-deep(.el-table__row--striped) {
  background-color: #5c5d6b;
}

::v-deep(.el-table) {
  border: none;

  --el-table-border-color: #171b20;
  --el-table-row-hover-bg-color: #171b20;
  --el-fill-color-lighter: #30333b;
}

// el-table__header-wrapper
::v-deep(.el-table__inner-wrapper) {
  border-color: #2a2b3d;

  .el-table tr,
  .el-table--border th.el-table__cell {
    background-color: #2a2b3d !important;
  }

  .el-table__empty-block {
    background-color: #2a2b3d;
  }
}
</style>