<!--
  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: 120
    },
    {
      text: '工况类报警',
      value: 'workingCondition',
      width: 110,
    },
    {
      text: '非工况类报警',
      value: 'noWorkingCondition',
      width: 110,
    },
    {
      text: '设备故障报警',
      value: 'deviceFault',
      width: 110,
    },
    {
      text: '未确认',
      value: 'unconfirmed',
      width: 110,
    },
    {
      text: '总计(工况类报警+非工况类报警)',
      value: 'count',
    },
    {
      text: '设备总数',
      value: 'deviceAll',
      width: 110,
    },
  ])
  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 = [
      {
        date: '2025-03-06',
        workingCondition: '2',
        noWorkingCondition: '2',
        deviceFault: '2',
        unconfirmed: '2',
        deviceAll: '2',
        count: '5'
      },
      {
        date: '2025-03-06',
        workingCondition: '2',
        noWorkingCondition: '2',
        deviceFault: '2',
        unconfirmed: '2',
        deviceAll: '2',
        count: '5'
      },
      {
        date: '2025-03-06',
        workingCondition: '2',
        noWorkingCondition: '2',
        deviceFault: '2',
        unconfirmed: '2',
        deviceAll: '2',
        count: '5'
      },
      {
        date: '2025-03-06',
        workingCondition: '2',
        noWorkingCondition: '2',
        deviceFault: '2',
        unconfirmed: '2',
        deviceAll: '2',
        count: '5'
      },
    ]
    if (tableData.value.length > 7) {
      tableHeight.value = 300
    }
    else {
      tableHeight.value = undefined
    }
    loading.value = false
  }, 2000);
}

defineExpose({
  initDialog,
})

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

<template>
  <el-dialog ref="dialogRef" v-model="dialogFormVisible" :title="title" append-to-body width="50%">

    <div class="container" v-loading="loading">
      <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"></el-table-column>
      </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>