<!--
  Description: 事件大屏 - 数据展示- 当前报警
  Author: 李亚光
  Date: 2024-09-18
 -->
<script lang="ts" setup name="FullScreenBasicOverView">
import layout from './layout.vue'
import { getCurrentAlarmListPage } from '@/api/home/alarm/current'
import { getDictByCode } from '@/api/system/dict'
import { alarmValue } from '@/views/home/alarm/current/components/dict'
import { ElMessage } from 'element-plus'
const $emit = defineEmits(['clickMaker'])
const timer = ref()
// 宽高
const height = ref((window.innerHeight - 100 - 50 + 20) / 3)
const width = ref((window.innerWidth - (window.innerWidth * 0.6) - 30) / 2)
window.addEventListener('resize', () => {
  height.value = (window.innerHeight - 100 - 50 + 20) / 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', width: 110 },
  { text: '报警原因', value: 'alarmReason', align: 'center', width: 110 },
  { text: '报警时间', value: 'ts', align: 'center' },
])
const list = ref<any[]>([])
const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
const fetchData = () => {
  getCurrentAlarmListPage({ offset: 1, limit: 999 }).then(res => {
    // console.log(res.data.rows, '当前报警数据')
    list.value = res.data.rows.map((item: any) => ({
      ...item,
      alarmCategoryName: alarmCategoryList.value.length ? alarmCategoryList.value.filter((citem: any) => citem.value === item.alarmCategory)[0]?.name || '' : '',
      // showDeviceTips: false, // 展示设备编号提示
    })).map((item: any) => ({
      ...item,
      alarmReason: item.alarmCategoryName.includes('浓度') ? `${item.alarmValue}${!item.alarmValue ? '' : item.watchObject === '2' ? 'PPM.M' : '%LEL'}` : (alarmValue[item.alarmValue] || '其他')
    })).filter((item: any) => !item.alarmType.includes('故障'))
    loadingTable.value = false
  })
}
const closeTimer = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
}
const openTimer = () => {
  closeTimer()
  timer.value = setInterval(() => {
    fetchData()
  }, 1000 * 60 * 2)
}
onMounted(() => {
  loadingTable.value = true
  // 报警类别
  getDictByCode('alarmCategory').then((res) => {
    alarmCategoryList.value = res.data.filter((item: any) => !item.name.includes('设备'))
    fetchData()
  })
  openTimer()
})
onBeforeUnmount(() => {
  closeTimer()
})



const rowClick = (data: any) => {
  if (!data.latGaode || !data.lngGaode) {
    ElMessage.warning('暂无位置信息')
    return
  }
  // console.log(data, '111')
  $emit('clickMaker', {
    ...data,
    lnglat: [data.lngGaode, data.latGaode]
  })
}
</script>

<template>
  <layout :height="height" :width="width" title="当前报警" subtitle="Current Alarm">
    <template #content>
      <div>
        <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
          :pagination="false" :height="height - 30" :border="true" @rowDbClick="rowClick" />
      </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;
  font-size: 12px;

  &:hover {
    cursor: pointer;
  }
}

::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>