<!--
  Description: 报警管理-报表生成-详情
  Author: 李亚光
  Date: 2025-03-06
 -->
<script lang="ts" setup name="AlarmReportDetail">
const title = ref('')
const dialogFormVisible = ref(false)
const tableData = ref<any[]>([])
const tableColumn = ref<any[]>(
  [
    {
      text: '日期',
      value: 'date',
      width: 130,
    },
    {
      text: '工况类报警',
      value: 'alarmSum',
      width: 130,
    },
    {
      text: '非工况类报警',
      value: 'noAlarmSum',
      width: 150,
    },
    {
      text: '设备故障报警',
      value: 'faultSum',
      width: 150,
    },
    {
      text: '未确认',
      value: 'noConfirmAlarmSum',
      width: 130,
    },
    {
      text: '总计(工况类报警+非工况类报警)',
      value: 'alarmCount',
    },
    {
      text: '设备总数',
      value: 'deviceSum',
      width: 130,
    },
  ])
const tableHeight = ref(undefined)
const loading = ref(false)
const initDialog = (row: any) => {
  title.value = row.deptName
  dialogFormVisible.value = true
  // 获取接口
  loading.value = true
  setTimeout(() => {
    tableData.value = row.day.map((item: any) => ({
      ...item,
      alarmCount: Number(item.alarmSum) + Number(item.noAlarmSum),
    }))
    if (tableData.value.length > 7) {
      tableHeight.value = 300
    }
    else {
      tableHeight.value = undefined
    }
    loading.value = false
  }, 1000)
}

defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
}
</script>

<template>
  <el-dialog ref="dialogRef" v-model="dialogFormVisible" :title="title" append-to-body width="60%">
    <div />
    <div v-loading="loading" class="container">
      <el-table class="table" :data="tableData" border show-summary stripe style="width: 100%;" :height="tableHeight">
        <el-table-column
          v-for="item in tableColumn" :key="item.text" align="center" :prop="item.value"
          :label="item.text" :width="item.width" :sortable="item.text !== '日期'"
        />
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.table {
  ::v-deep(.el-table__header) {
    .el-table__cell {
      background-color: #f2f6ff;
    }
  }
}
</style>