<script setup lang="ts">
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { computed, nextTick, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

import { Page } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { postTreeModelDeviceDataInfoPage } from '#/api-client';

import { generateDynamicColumns } from './dynamicColumns';
import { querySchema } from './schema';

defineOptions({
  name: 'DeviceData',
});

const route = useRoute();
const { DeviceType, DeviceId, FocusAddress } = route.query;

// 动态列定义
const dynamicColumns = ref<any[]>([]);

// 缓存实际的数据总量
const actualTotalCount = ref<number>(0);

// 固定列定义（始终显示）- 基于 IoTDBTreeModelDeviceDataDto 类型
const fixedColumns = [
  { title: '序号', type: 'seq', width: 50 },
  { field: 'Timestamps', title: '时间戳', minWidth: 150 },
  { field: 'SystemName', title: '系统名称', minWidth: 150 },
  { field: 'ProjectId', title: '项目ID', minWidth: 150 },
  { field: 'DeviceType', title: '设备类型', minWidth: 150 },
  { field: 'IoTDataType', title: 'IoT数据类型', minWidth: 150 },
  { field: 'DeviceId', title: '设备ID', minWidth: 150 },
];

// 合并固定列和动态列 - 使用计算属性确保响应式
const allColumns = computed(() => [...fixedColumns, ...dynamicColumns.value]);

// 初始化默认列（防止表格空白）
const initDefaultColumns = () => {
  if (dynamicColumns.value.length === 0) {
    // 不再需要在这里设置默认列，因为固定列已经包含了基本字段
    dynamicColumns.value = [];
  }
};

// 初始化默认列
initDefaultColumns();

const formOptions: VbenFormProps = {
  schema: querySchema.value,
  initialValues: {
    FocusAddress: FocusAddress as string,
  },
  // 禁用表单值变化时自动提交，使用自定义处理函数
  submitOnChange: false,
  // 添加表单值变化的处理函数
  handleValuesChange: async (values, changedFields) => {
    // 当系统类型发生变化时，刷新表格数据
    if (changedFields.includes('SystemName')) {
      console.log('SystemName changed, values:', values);
      console.log('Changed fields:', changedFields);

      // 使用 setTimeout 确保表单值已经完全更新
      setTimeout(async () => {
        const latestValues = await gridApi.formApi.getValues();
        console.log('Latest values after timeout:', latestValues);
        gridApi.reload(latestValues);
      }, 0);
    }
  },
};

const gridOptions: VxeGridProps<any> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: allColumns, // 使用计算属性
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    currentPage: 1,
    pageSize: 20,
    // 添加分页事件处理
    onChange: (currentPage: number, pageSize: number) => {
      console.log('分页变化:', { currentPage, pageSize });
      // 当pageSize变化时，重置到第一页
      if (pageSize !== gridOptions.pagerConfig.pageSize) {
        console.log('页面大小变化，重置到第一页');
        // 更新配置中的pageSize
        gridOptions.pagerConfig.pageSize = pageSize;
        gridOptions.pagerConfig.currentPage = 1;
      }
    },
  },
  toolbarConfig: {
    custom: true,
  },
  customConfig: {
    storage: true,
  },
  // 添加调试配置
  showOverflow: true,
  showHeaderOverflow: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        console.log('=== API调用开始 ===');
        console.log('请求参数:', {
          page,
          formValues,
          DeviceType,
          DeviceId,
          FocusAddress,
        });

        try {
          const { data } = await postTreeModelDeviceDataInfoPage({
            body: {
              ...formValues,
              pageIndex: page.currentPage,
              pageSize: page.pageSize,
              DeviceType,
              DeviceId,
              FocusAddress,
            },
          });

          console.log('API返回的原始数据:', data);
          console.log('数据类型:', typeof data);
          console.log(
            'data是否为null/undefined:',
            data === null || data === undefined,
          );

          if (data) {
            console.log('data.items存在:', !!data.items);
            console.log(
              'data.items类型:',
              Array.isArray(data.items) ? 'Array' : typeof data.items,
            );
            if (data.items) {
              console.log('data.items长度:', data.items.length);
              if (data.items.length > 0) {
                console.log('第一条数据:', data.items[0]);
                console.log(
                  '第一条数据的所有字段:',
                  Object.keys(data.items[0]),
                );
              }
            }
          }

          // 简化处理逻辑，先确保基本功能正常
          if (data?.items && data.items.length > 0) {
            console.log('原始items数据:', data.items);

            // 直接使用原始数据，不进行复杂处理
            const items = data.items;

            // 动态生成列定义
            const generatedColumns = generateDynamicColumns(items);
            console.log('生成的列定义:', generatedColumns);

            // 更新动态列
            dynamicColumns.value = generatedColumns;

            // 使用setState更新整个gridOptions，确保列定义能够正确更新
            await nextTick();
            gridApi.setState({
              gridOptions: {
                ...gridOptions,
                columns: allColumns.value,
              },
            });

            // 由于API没有返回totalCount，我们需要特殊处理分页
            const currentPageSize = page.pageSize;
            const currentItemsCount = data.items ? data.items.length : 0;

            // 简化的总数估算逻辑
            let estimatedTotalCount = 0;

            // 如果是第一页，使用保守的估算
            if (page.currentPage === 1) {
              if (currentItemsCount === currentPageSize) {
                // 第一页满了，说明可能还有更多数据
                // 使用一个保守的估算：假设至少还有一页数据
                estimatedTotalCount = currentPageSize * 2;
              } else {
                // 第一页没满，说明总共就只有这么多数据
                estimatedTotalCount = currentItemsCount;
              }
            } else {
              // 不是第一页，使用更准确的逻辑
              if (currentItemsCount === currentPageSize) {
                // 当前页满了，说明可能还有更多数据
                estimatedTotalCount =
                  page.currentPage * currentPageSize + currentPageSize;
              } else {
                // 当前页没满，说明这是最后一页
                estimatedTotalCount =
                  (page.currentPage - 1) * currentPageSize + currentItemsCount;
              }
            }

            // 确保总数至少等于当前页的数据量
            estimatedTotalCount = Math.max(
              estimatedTotalCount,
              currentItemsCount,
            );

            // 如果当前页数据量小于页面大小，说明这是最后一页，更新缓存
            if (currentItemsCount < currentPageSize) {
              actualTotalCount.value = estimatedTotalCount;
              console.log('更新缓存的实际总数:', estimatedTotalCount);
            }

            const result = {
              items: data.items || [],
              totalCount: estimatedTotalCount,
            };
            console.log('返回给表格的数据:', result);
            console.log(
              '估算总数:',
              result.totalCount,
              '当前页数据量:',
              result.items.length,
            );
            console.log('分页信息:', {
              currentPage: page.currentPage,
              pageSize: currentPageSize,
            });
            return result;
          }

          console.log('没有数据或数据为空');
          return {
            items: [],
            totalCount: 0,
          };
        } catch (error) {
          console.error('API调用出错:', error);
          throw error;
        }
      },
    },
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });

// 监听分页器状态变化
watch(
  () => gridApi?.pagerApi?.currentPage,
  (newPage, oldPage) => {
    console.log('当前页变化:', { newPage, oldPage });
  },
);

watch(
  () => gridApi?.pagerApi?.pageSize,
  (newSize, oldSize) => {
    console.log('页面大小变化:', { newSize, oldSize });
    if (newSize !== oldSize && oldSize) {
      console.log('页面大小从', oldSize, '变为', newSize, '，重置到第一页');
      // 如果新的页面大小大于缓存的总数，清除缓存
      if (actualTotalCount.value > 0 && newSize > actualTotalCount.value) {
        console.log('新页面大小大于缓存总数，清除缓存');
        actualTotalCount.value = 0;
      }
      // 重置到第一页
      gridApi.pagerApi.currentPage = 1;
    }
  },
);
</script>

<template>
  <Page auto-content-height>
    <Grid />
  </Page>
</template>
