<!--
  Description: 消息通知-更多消息弹窗
  Author: 李亚光
  Date: 2024-10-10
 -->
<script lang="ts" setup name="NoticeMoreDialog">
import { ElMessage } from 'element-plus'
import { getMessage } from '@/api/home/dashboard/index'
const $router = useRouter()
const dialogFormVisible = ref(false) // 对话框是否显示
const list = ref<any[]>([])
const columns = ref<any>([
  { text: '消息提醒类型', value: 'messageTypeDetail', align: 'center', width: '200' },
  { 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 = () => {
  loadingTable.value = true
  getMessage().then((res) => {
    list.value = res.data.rows
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
fetchData()
defineExpose({
  initDialog,
})
// 查看详情
const detail = (row: any) => {
  // 报警类跳转
  if (row.messageTypeDetail.includes('报警')) {
    if (row.alarmId) {
      $router.push({
        name: 'AlarmCurrentDetail',
        query: {
          id: row.alarmId,
          row: JSON.stringify(row),
        },
      })
    }
    else {
      ElMessage.warning('该数据缺少报警信息')
    }
  }
}
</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"
    >
      <template #columns>
        <el-table-column label="操作" align="center" width="80">
          <template #default="scope">
            <el-button
              type="primary" link size="small"
              :disabled="!((scope.row.messageTypeDetail.includes('报警') && !scope.row.messageTypeDetail.includes('解除')) || scope.row.messageTypeDetail.includes('施工'))"
              @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>