<script setup lang="ts">
import type { NdmDeviceAlarmLogResultVO, NdmDeviceResultVO, PageParams } from '@/apis/models';
import { postNdmDeviceAlarmLogPage } from '@/apis/requests';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import { NCard, NDataTable, type DataTableColumns, type DataTableRowData, type PaginationProps } from 'naive-ui';
import { h } from 'vue';
import { reactive, ref, toRefs } from 'vue';

const props = defineProps<{
  stationCode: string;
  ndmDevice: NdmDeviceResultVO;
  dateTimeRange: [number, number];
}>();

const { stationCode, ndmDevice, dateTimeRange } = toRefs(props);

const tableColumns: DataTableColumns<NdmDeviceAlarmLogResultVO> = [
  { title: '告警流水号', key: 'alarmNo' },
  {
    title: '告警时间',
    key: 'alarmDate',
    render: (rowData /* , rowIndex */) => {
      return dayjs(Number(rowData.alarmDate ?? 0)).format('YYYY-MM-DD HH:mm:ss');
    },
  },
  { title: '告警类型', key: 'alarmType', align: 'center' },
  { title: '故障级别', key: 'faultLevel', align: 'center' },
  { title: '故障编码', key: 'faultCode', align: 'center' },
  { title: '故障描述', key: 'faultDescription' },
  {
    title: '是否恢复',
    key: 'alarmCategory',
    align: 'center',
    render: (rowData) => {
      return rowData.alarmCategory === '2' ? '是' : '否';
    },
  },
  { title: '恢复时间', key: 'updatedTime' },
];

const tableData = ref<DataTableRowData[]>([]);
const DEFAULT_PAGE_SIZE = 10;
const pagination = reactive<PaginationProps>({
  size: 'small',
  showSizePicker: true,
  page: 1,
  pageSize: DEFAULT_PAGE_SIZE,
  pageSizes: [5, 10, 20, 50, 80, 100],
  itemCount: 0,
  prefix: ({ itemCount }) => {
    return h('div', {}, { default: () => `共${itemCount}条` });
  },
  onUpdatePage: (page: number) => {
    pagination.page = page;
    getDeviceAlarmLogList();
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
    getDeviceAlarmLogList();
  },
});

const { mutate: getDeviceAlarmLogList, isPending } = useMutation({
  mutationFn: async () => {
    const deviceId = ndmDevice.value.deviceId;
    const alarmDate_ge = dateTimeRange.value[0];
    const alarmDate_le = dateTimeRange.value[1];
    const restParams: Omit<PageParams<{ id: string }>, 'model' | 'extra'> = {
      current: pagination.page ?? 1,
      size: pagination.pageSize ?? DEFAULT_PAGE_SIZE,
      sort: 'id',
      order: 'descending',
    };
    const res = await postNdmDeviceAlarmLogPage(stationCode.value, {
      model: { deviceId },
      extra: { alarmDate_ge, alarmDate_le },
      ...restParams,
    });
    return res;
  },
  onSuccess: ({ records, size, total }) => {
    pagination.pageSize = parseInt(size);
    pagination.itemCount = parseInt(total);
    tableData.value = records;
  },
  onError: (error) => {
    console.error(`查询${ndmDevice.value.name}告警数据失败:`, error);
    window.$message.error(error.message);
  },
});

defineExpose({
  isPending,
  refresh: () => {
    pagination.page = 1;
    pagination.pageSize = DEFAULT_PAGE_SIZE;
    getDeviceAlarmLogList();
  },
});
</script>

<template>
  <NCard size="small" title="设备告警记录">
    <NDataTable size="small" :loading="isPending" :columns="tableColumns" :data="tableData" :pagination="pagination" :single-line="false" remote flex-height style="height: 500px" />
  </NCard>
</template>

<style scoped lang="scss"></style>
