<template>
  <a-card>
    <a-row justify="end" >
      <a-col>
        <span>时间间隔: </span>
        <a-select
        allowClear
          style="width: 170px;"
          v-model:value="queryParams.duration"
        >
          <a-select-option v-for="item in durationList" :key="item.key" :value="item.key" >
            {{item.name}}
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-alert
    message="告警级别"
    type="info"
    show-icon
    style="margin-top: 20px;"
  >
  <template #description>
    <div>NOTICE:提示级别,MINOR:次要级别,MAJOR:重要级别,EMERGENCY:紧急</div>
  </template>
  </a-alert>
    <a-table
      :columns="columns"
      :loading="state.loading"
      :data-source="state.dataSource"
      style="margin-top: 20px;"
      :pagination="queryParams"
      @change="changePage"
    >
      <template #bodyCell="{column, record}" >
        <template v-if="column.key === 'warnSeverity'" >
          <a-tag color="red" >{{record.warnSeverity}}</a-tag>
        </template>
        <template v-if="column.key === 'action'" >
          <a @click="openModal(record)" >详情</a>
        </template>
      </template>
   </a-table>
  </a-card>

  <modal-pro
    :label="modelTitle"
    :open="state.visible"
    @cancel="state.visible = false"
    @ok="state.visible = false"
  >
    <a-form  >
      <a-form-item label="告警级别" >
        {{state.warnDetail.warnSeverity}}
      </a-form-item>
      <a-form-item label="资源类型" >
        {{state.warnDetail.warnType}}
      </a-form-item>
      <a-form-item label="告警描述" >
        {{state.warnDetail.warnDescription}}
      </a-form-item>
      <a-form-item label="发生时间" >
        {{state.warnDetail.createAt}}
      </a-form-item>
    </a-form>
  </modal-pro>
  </template>
<script lang='ts' setup >
import { DevOpsController } from '@/controller/iot/devOps'
import { computed, onMounted, reactive, watch } from 'vue'

const durationList = [
  { name: '30分钟', key: 1800000 },
  { name: '近一小时', key: 3600000 },
  { name: '近六小时', key: 10800000 },
  { name: '近一天', key: 86400000 },
  { name: '近一周', key: 604800000 }
]

const columns = [
  {
    title: '名称',
    dataIndex: 'warnLabel'
  },
  {
    title: '告警描述',
    dataIndex: 'warnDescription'
  },
  {
    title: '级别',
    dataIndex: 'warnSeverity',
    key: 'warnSeverity'
  },
  {
    title: '资源类型',
    dataIndex: 'warnType'
  },
  {
    title: '资源id',
    dataIndex: 'entityId'
  },
  {
    title: '发生时间',
    dataIndex: 'createAt'
  },
  {
    title: '告警状态',
    dataIndex: 'status'
  },
  {
    title: '操作',
    key: 'action'
  }
]

const modelTitle = computed(() => '告警详情-' + state.warnDetail.warnLabel)

const queryParams = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  duration: 1800000
})

const state = reactive({
  loading: false,
  dataSource: [],
  visible: false,
  warnDetail: {}
})

watch(
  () => queryParams.duration,
  () => {
    getWarnPage()
  }
)

const openModal = (record: any) => {
  state.visible = true
  state.warnDetail = record
}

const changePage = ({ current }) => {
  queryParams.page = current
  getWarnPage()
}

const getWarnPage = async () => {
  state.loading = true
  const { data, sum } = await DevOpsController.pageWarn(queryParams)
  state.loading = false
  state.dataSource = data
  queryParams.total = sum
}

onMounted(() => {
  getWarnPage()
})

</script>
<style lang='less' scoped >
</style>
