<script lang="ts">
const vimpOperationTypeOptions: SelectOption[] = [
  { label: '视频点播', value: 10001 },
  { label: '视频回放', value: 10002 },
  { label: '停止视频回放', value: 10003 },
  { label: '回放暂停', value: 10004 },
  { label: '回放回复', value: 10005 },
  { label: '回放倍速播放', value: 10006 },
  { label: '回放拖动播放', value: 10007 },
  { label: '云台指令', value: 10008 },
  { label: '根据国标码查录像', value: 10009 },
  { label: '下载录像', value: 10010 },
  { label: '停止下载录像', value: 10011 },
  { label: '获取预置位列表', value: 10012 },
  { label: '设置本平台分屏数量', value: 20001 },
  { label: '设置本平台monitor播放的摄像机rtsp流', value: 20002 },
  { label: '停止本平台monitor播放的摄像机rtsp流', value: 20003 },
  { label: '启动非报警时序', value: 30001 },
  { label: '停止非报警时序', value: 30002 },
  { label: '暂停非报警时序', value: 30003 },
  { label: '调用组切', value: 30004 },
  { label: '启动报警时序', value: 40001 },
  { label: '停止报警时序', value: 40002 },
  { label: '分页查询报警', value: 50001 },
  { label: '确认报警', value: 50002 },
  { label: '删除报警', value: 50004 },
];
</script>

<script setup lang="ts">
import type { NdmVimpLogResultVO } from '@/apis/models/device';
import { ndmVimpLogDefaultExportByTemplate, postNdmVimpLogPage } from '@/apis/requests';
import { useStationListQuery } from '@/composables/query';
import { useStationStore } from '@/stores/station';
import { downloadByData } from '@/utils/download';
import { useMutation } from '@tanstack/vue-query';
import dayjs from 'dayjs';
import destr from 'destr';
import {
  NButton,
  NDataTable,
  NDatePicker,
  NForm,
  NFormItemGi,
  NGrid,
  NGridItem,
  NPopover,
  NScrollbar,
  NSelect,
  NSpace,
  NTag,
  type DataTableColumns,
  type DataTableRowData,
  type PaginationProps,
  type SelectOption,
} from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, h, onMounted, reactive, ref, watch, watchEffect } from 'vue';

useStationListQuery();
const stationStore = useStationStore();
const { stationList, onlineStationList } = storeToRefs(stationStore);

const stationSelectOptions = computed(() => {
  return stationList.value.map<SelectOption>((station) => ({
    label: station.name,
    value: station.code,
    disabled: !station.online,
  }));
});

const searchFields = reactive({
  stationCode: undefined as string | undefined,
  logType_in: [] as number[],
  createdTime: [dayjs().startOf('date').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('date').format('YYYY-MM-DD HH:mm:ss')] as [string, string],
});

const resetSearchFields = () => {
  searchFields.stationCode = stationList.value.find((station) => station.online)?.code;
  searchFields.logType_in = [];
};
const getExtraFields = () => {
  const logType_in = searchFields.logType_in.length > 0 ? [...searchFields.logType_in] : undefined;
  const createdTime_precisest = searchFields.createdTime[0];
  const createdTime_preciseed = searchFields.createdTime[1];
  return {
    logType_in,
    createdTime_precisest,
    createdTime_preciseed,
  };
};
const onDateChange = (value: [number, number] | null) => {
  if (!value) {
    return;
  }
  const [start, end] = value;
  const diffDays = dayjs(end).diff(dayjs(start), 'day');
  if (diffDays > 7) {
    // 如果超过7天，自动调整结束时间
    const adjustedEnd = dayjs(start).add(7, 'day').valueOf();
    searchFields.createdTime = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(adjustedEnd).format('YYYY-MM-DD HH:mm:ss')];
    window.$message.warning('时间范围不能超过7天，已自动调整');
  } else {
    searchFields.createdTime = [dayjs(start).format('YYYY-MM-DD HH:mm:ss'), dayjs(end).format('YYYY-MM-DD HH:mm:ss')];
  }
};

const searchFieldsChanged = ref(false);
watch(searchFields, () => {
  searchFieldsChanged.value = true;
});

const tableColumns: DataTableColumns<NdmVimpLogResultVO> = [
  { title: '时间', key: 'createdTime' },
  { title: '操作类型', key: 'description' },
  { title: '请求IP', key: 'requestIp' },
  { title: '耗时(ms)', key: 'consumedTime' },
  {
    title: '操作参数',
    key: 'params',
    width: 100,
    render(rowData) {
      const result = JSON.stringify(destr(rowData.params), null, 2);
      // return h('pre', {}, { default: () => result });
      return h(
        NPopover,
        { trigger: 'click' },
        {
          trigger: () => h(NButton, { size: 'tiny', text: true, type: 'primary' }, { default: () => '查看' }),
          default: () =>
            h(
              NScrollbar,
              { style: { maxHeight: '40vh' } },
              {
                default: () => h('pre', {}, { default: () => result }),
              },
            ),
        },
      );
    },
  },
  {
    title: '操作结果',
    key: 'result',
    width: 100,
    render: (rowData) => {
      const result = JSON.stringify(destr(rowData.result), null, 2);
      return h(
        NPopover,
        { trigger: 'click' },
        {
          trigger: () => h(NButton, { size: 'tiny', text: true, type: 'primary' }, { default: () => '查看' }),
          default: () =>
            h(
              NScrollbar,
              { style: { maxHeight: '40vh' } },
              {
                default: () => h('pre', {}, { default: () => result }),
              },
            ),
        },
      );
    },
  },
];

const tableData = ref<DataTableRowData[]>([]);

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

const { mutate: getVimpLogList, isPending: isTableLoading } = useMutation({
  mutationFn: async () => {
    if (!searchFields.stationCode) throw Error('请选择车站');
    const res = await postNdmVimpLogPage(searchFields.stationCode, {
      model: {},
      extra: getExtraFields(),
      current: tablePagination.page ?? 1,
      size: tablePagination.pageSize ?? 10,
      order: 'descending',
      sort: 'id',
    });
    return res;
  },
  onSuccess: (res) => {
    const { records, size, total } = res;
    tablePagination.pageSize = parseInt(size);
    tablePagination.itemCount = parseInt(total);
    tableData.value = records;
  },
  onError: (error) => {
    console.error(error);
    window.$message.error(error.message);
  },
});

const onClickReset = () => {
  resetSearchFields();
  tablePagination.page = 1;
  tablePagination.pageSize = 10;
  tablePagination.itemCount = 0;
  getVimpLogList();
};
const onClickQuery = () => {
  if (searchFieldsChanged.value) {
    tablePagination.page = 1;
    tablePagination.pageSize = 10;
    searchFieldsChanged.value = false;
  }
  getVimpLogList();
};

const { mutate: downloadTableData, isPending: isDownloading } = useMutation({
  mutationFn: async () => {
    if (!searchFields.stationCode) throw Error('请选择车站');
    const data = await ndmVimpLogDefaultExportByTemplate(searchFields.stationCode, {
      model: {},
      extra: getExtraFields(),
      current: tablePagination.page ?? 1,
      size: tablePagination.pageSize ?? 10,
      order: 'descending',
      sort: 'id',
    });
    return data;
  },
  onSuccess: (data) => {
    downloadByData(data, `设备告警记录.xlsx`);
  },
  onError: (error) => {
    console.error(error);
    window.$message.error(error.message);
  },
});

const exportTableData = () => downloadTableData();

// 进入页面时选择首个在线的车站
onMounted(() => {
  // if (onlineStationList.value.length > 0) {
  //   searchFields.stationCode = onlineStationList.value.at(0)?.code;
  //   getVimpLogList();
  // } else {
  //   const watchHandle = watch(onlineStationList, (onlineStations) => {
  //     searchFields.stationCode = onlineStations.at(0)?.code;
  //     watchHandle.stop();
  //     getVimpLogList();
  //   });
  // }
});

// 进入页面时选择首个在线的车站
// 当页面刷新时，车站列表还没有加载完成，defaultStation不存在，if条件为false，
// 等待车站列表加载完成后，defaultStation会更新，if条件为true，会更新选择的车站并加载日志记录。
// 当从其他页面跳转过来时，车站列表已经存在，defaultStation存在，if条件为true，会更新选择的车站并加载日志记录。
// 由于if条件是and逻辑，所以即使defaultStation因车站状态变化而更新，由于已经选择了车站，所以if条件为false。
const defaultStation = computed(() => onlineStationList.value.at(0));
watchEffect(() => {
  if (defaultStation.value?.code && !searchFields.stationCode) {
    searchFields.stationCode = defaultStation.value.code;
    getVimpLogList();
  }
});
</script>

<template>
  <!-- 容器：上下布局，表格自适应剩余高度 -->
  <div style="height: 100%; display: flex; flex-direction: column">
    <!-- 查询面板 -->
    <div style="flex: 0 0 auto; padding: 8px">
      <NForm>
        <NGrid :cols="3" :x-gap="24">
          <NFormItemGi :span="1" label="车站" label-placement="left">
            <NSelect
              v-model:value="searchFields.stationCode"
              :options="stationSelectOptions"
              :render-label="
                (option: SelectOption) => {
                  return [
                    h(NTag, { type: option.disabled ? 'error' : 'success', size: 'tiny' }, { default: () => (option.disabled ? '离线' : '在线') }),
                    h('span', {}, { default: () => `${option.label}` }),
                  ];
                }
              "
              :multiple="false"
              clearable
            />
          </NFormItemGi>
          <NFormItemGi :span="1" label="操作类型" label-placement="left">
            <NSelect v-model:value="searchFields.logType_in" :options="vimpOperationTypeOptions" multiple clearable />
          </NFormItemGi>
          <NFormItemGi :span="1" label="时间" label-placement="left">
            <NDatePicker v-model:formatted-value="searchFields.createdTime" type="datetimerange" @update:value="onDateChange" />
          </NFormItemGi>
        </NGrid>
        <!-- 按钮 -->
        <NGrid :cols="1">
          <NGridItem>
            <NSpace>
              <NButton @click="onClickReset">重置</NButton>
              <NButton type="primary" :loading="isTableLoading" @click="onClickQuery">查询</NButton>
            </NSpace>
          </NGridItem>
        </NGrid>
      </NForm>
    </div>

    <!-- 工具栏：横向、右对齐按钮） -->
    <div style="flex: 0 0 auto; display: flex; align-items: center; padding: 8px">
      <div style="font-size: medium">视频平台日志</div>
      <NSpace style="margin-left: auto">
        <NButton type="primary" :loading="isDownloading" @click="exportTableData">导出</NButton>
      </NSpace>
    </div>

    <!-- 表格区域：填满剩余空间 -->
    <div style="flex: 1 1 auto; min-height: 0; padding: 8px">
      <NDataTable remote :columns="tableColumns" :data="tableData" :pagination="tablePagination" :loading="isTableLoading" :single-line="false" flex-height style="height: 100%" />
    </div>
  </div>
</template>

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