<!--
  Description: 消息通知-更多消息弹窗
  Author: 李亚光
  Date: 2024-10-10
 -->
<script lang="ts" setup name="NoticeMoreDialog">
import { ElMessage } from 'element-plus'
import { getMessage } from '@/api/home/dashboard/index'
import { detailAlarm } from '@/api/home/alarm/current'
import { getAlarmDetail } from '@/api/home/alarm/history'
const $router = useRouter()
const dialogFormVisible = ref(false) // 对话框是否显示
const list = ref<any[]>([])
const columns = ref<any>([
  {
    text: '消息提醒类型', value: 'messageTypeName', align: 'center', width: '140', isFilters: true,
    filters: [
      { text: '报警类', value: '报警类' },
      { text: '确认/处置类', value: '确认/处置类' },
      { text: '消警类', value: '消警类' },
      { text: '施工类', value: '施工类' },
    ],
    filterHandler: (value: string, row: any, column: any) => {
      const property = column['property']
      return row[property] === value
    }

  },
  { text: '消息提醒内容', value: 'messageContent', align: 'center' },
  { text: '时间', value: 'ts', align: 'center', width: '180' },
])
const loadingTable = ref(true)
const initDialog = () => {
  dialogFormVisible.value = true
}
const cancel = () => {
  dialogFormVisible.value = false
}
const fetchData = () => {
  const messageType = {
    1: '报警类',
    2: '确认/处置类',
    3: '消警类',
    4: '施工类'
  } as { [key: string]: string }
  loadingTable.value = true
  getMessage().then((res) => {
    list.value = res.data.rows.map((item: any) => ({
      ...item,
      messageTypeName: messageType[item.messageType],
      messageContent: `【${item.messageTypeDetail}】${item.messageContent}`
    }))
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
fetchData()
defineExpose({
  initDialog,
})
// 查看详情
const detail = (row: any) => {
  // 报警类跳转
  // 报警类 || 确认/处置类   跳转到当前报警
  if (row.messageType === '1' || row.messageType === '2') {
    if (!row.alarmId) {
      ElMessage.warning('该数据缺少报警信息')
      return
    }
    //  找到当前报警
    detailAlarm(row.alarmId).then(res => {
      if (!res.data || !res.data.ID) {
        ElMessage.warning('该数据缺少报警信息')
        return
      }
      $router.push({
        name: 'AlarmCurrent',
        query: {
          row: JSON.stringify(res.data),
          type: 'alarm-note'
        },
      })
    })
  }
  // 消警类  跳转到历史报警详情
  else if (row.messageType === '3') {
    if (!row.alarmId) {
      ElMessage.warning('该数据缺少报警信息')
      return
    }
    getAlarmDetail(row.alarmId).then(res => {
      if (!res.data || !res.data.id) {
        ElMessage.warning('该数据缺少报警信息')
        return
      }
      $router.push({
        path: '/history/detail',
        query: {
          id: row.alarmId,
          row: JSON.stringify({ id: row.alarmId }),
          type: 'history'
        },
      })
    })
  }
  // 施工类  跳转到设备运维
  else if (row.messageType === '4') {

  }
}
// const disabledBtn = computed(() => {
//   return (name: string) => {
//     if (name.includes('解除')) {
//       return true
//     }
//     if (name.includes('施工')) {
//       return true
//     }
//     //  if(name.includes('超限')) {
//     //     return false
//     //  }
//     return false
//   }
// })
// 排序条件发生变化
const sortChange = ({ column }: any) => {

}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="消息通知" append-to-body>
    <normal-table :data="list" :total="0" :columns="columns" :query="{}" :list-loading="loadingTable"
      :pagination="false" :height="400" @sort-change="sortChange">
      <template #columns>
        <el-table-column label="操作" align="center" width="80">
          <template #default="scope">
            <el-button type="primary" link size="small" @click="detail(scope.row)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </template>
    </normal-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>