<!-- 环境看板- 设备报警列表 -->
<script name="electricityTrend" lang="ts" setup>
import debounce from 'lodash/throttle'
import { ElMessage, ElMessageBox } from 'element-plus'
import { cancelAlarm, getAlarmList } from '@/api/dataManagement/environmentBoard'
const $props = defineProps({
  // 实验室
  lab: {
    type: String,
    default: '',
  },
})
const loading = ref(true)
const data = ref<any[]>([])
const columns = ref([
  { text: '设备名称', value: 'deviceName', align: 'center' },
  { text: '安装地点', value: 'locationName', align: 'center' },
  { text: '负责人', value: 'userName', align: 'center', width: '90' },
  { text: '事件名称', value: 'eventName', align: 'center' },
  { text: '报警等级', value: 'alarmLevel', align: 'center', width: '90' },
  { text: '报警时间', value: 'alarmTime', align: 'center' },
])
// 获取数据
const fetchData = debounce(async () => {
  if (!$props.lab) {
    return
  }
  loading.value = true
  try {
    const res = await getAlarmList({ labName: $props.lab, alarmStatus: '5' })
    data.value = res.data.rows
    loading.value = false
  }
  catch (_) {
    loading.value = false
  }
}, 1000)

watch(() => $props, (newVal) => {
  if (newVal.lab) {
    fetchData()
  }
}, {
  deep: true,
})
const cancel = (id: string) => {
  ElMessageBox.confirm(
    '确认消警吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then((res) => {
    cancelAlarm(id).then((res) => {
      ElMessage.success('操作成功')
      fetchData()
    })
  })
}
</script>

<template>
  <div class="board-item">
    <div class="board-header">
      <div class="board-title">
        设备报警列表
      </div>
      <div class="board-select" />
    </div>
    <div v-loading="loading" class="board-chart">
      <scroll-table :data="data" :columns="columns as any" :height="310" style="width: 100%;">
        <template #columns>
          <el-table-column
            label="操作"
            align="center"
            width="90"
          >
            <template #default="{ row }">
              <el-button
                size="small"
                type="primary"
                link
                @click="cancel(row.id)"
              >
                取消报警
              </el-button>
            </template>
          </el-table-column>
        </template>
      </scroll-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.board-item {
  margin: 5px 0;
  padding: 2px 0;
  border: 2px solid #cedaf6;
  box-sizing: content-box;
  border-radius: 6px;

  .board-header {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;

    .board-title {
      color: #0dabf1;
      font-weight: 700;
    }
  }

  .board-chart {
    height: 310px;
  }
}
</style>