ng-configure/src/app/pages/service-register-config/service-register-config.com...

import { Component, AfterViewInit, inject } from '@angular/core';
import { ConfigMetaService } from '../../services/config-meta.service';
import { AuthService } from '../../services/auth.service';
import { TabulatorMapper } from '../../utils/tabulator-mapper.util';
import { ConfigService, StickyHeaderComponent, StickyHeaderButton } from 'base-core';
import { CommonModule } from '@angular/common';

// 声明全局类型
declare var Tabulator: any;


@Component({
  imports: [CommonModule, StickyHeaderComponent],
  selector: 'app-service-register-config',
  templateUrl: './service-register-config.component.html',
  styleUrl: './service-register-config.component.scss'
})
export class ServiceRegisterConfigComponent implements AfterViewInit {
  private tabulator!: any;
  private totalCount: number = 0;
  private configMetaService = inject(ConfigMetaService);
  private config = inject(ConfigService);
  private authService = inject(AuthService);
  
   title = '注册服务配置';
   hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
   headerButtons: StickyHeaderButton[] = [
     { title: '注册', name: 'register', icon: 'add', color: 'primary' },
     { title: '刷新', name: 'refresh', icon: 'refresh', color: 'accent' }
    ];
    //registering = false;
    
    // 外部查询条件预留字段（用于将来扩展）
    externalFilters: any = {};

  ngAfterViewInit(): void {
    console.log('ServiceRegisterConfigComponent ngAfterViewInit');
    console.log('Tabulator global available:', typeof Tabulator !== 'undefined');
    console.log('ConfigService状态:', {
      useMockData: this.config.useMockData,
      apiBaseUrl: this.config.apiBaseUrl
    });
    console.log('ConfigMetaService API URL:', this.configMetaService.getListUrl());
    
    // 使用 setTimeout 确保 DOM 已渲染
    setTimeout(() => {
      console.log('Initializing Tabulator...');
      this.initTabulator();
    }, 100);
  }
  
  /**
   * 初始化表格 - 标准远程分页版本
   */
  private initTabulator(): void {
    console.log('initTabulator called');
    console.log('Table element exists:', document.getElementById('tabulator-table'));
    
    // 获取Basic认证信息
    const basicAuth = this.authService.getBasicAuth();
    console.log('Basic认证信息:', basicAuth ? '有' : '无');
    
    this.tabulator = new Tabulator('#tabulator-table', {
     
      // 列定义 - 使用现有列配置
    columns: [
      { title: 'ID', field: 'id', sorter: 'number', headerFilter: 'input', width: 220 },
      { title: '配置名称', field: 'configName', sorter: 'string', headerFilter: 'input', headerFilterFunc: 'like',width: 110 },
      { title: '字段名', field: 'fieldName', sorter: 'string', headerFilter: 'input', headerFilterFunc: 'like' ,width: 130},
      { title: '字段类型', field: 'fieldType', sorter: 'string', headerFilter: 'input',width: 120, headerFilterParams: { values: ['string', 'number', 'boolean', 'array', 'object'] } },
      { title: '描述', field: 'fieldDesc', sorter: 'string', headerFilter: 'input', headerFilterFunc: 'like' }
    ],
      
      // 标准远程分页配置
      pagination: true,
      paginationMode: 'remote',
      paginationSize: 20,
      paginationSizeSelector: [10, 20, 50, 100],
      sortMode: 'remote',
      filterMode: 'remote',
      
      // 使用标准AJAX配置，通过代理调用后端API
      ajaxURL: '/api/config/meta/list',
      ajaxConfig: {
        method: 'POST',
        headers: {
          'Authorization': basicAuth ? `Basic ${basicAuth}` : '',
          'Content-Type': 'application/json'
        }
      },
      ajaxContentType: 'json',
      
      ajaxParams: function() {
        // 获取调用时的上下文信息
        const callTime = new Date().toISOString();
        const stack = new Error().stack; // 获取调用堆栈
        
        console.group("=== ajaxParams被调用 ===");
        console.log("调用时间:", callTime);
        console.log("当前页码:", this.getPage());
        console.log("筛选条件:", this.getFilters(true));
        console.log("排序条件:", this.getSorters());
       // console.log("调用来源:", stack.split('\n')[2]?.trim() || "未知");
        console.groupEnd();
        
        return {
            page: this.getPage() || 1,
            size: this.getPageSize() || 20,
            filter: this.getFilters(true) || [],
            sort: this.getSorters() || []
        };
    },
      //       参数生成器，将Tabulator参数转换为后端期望格式
      ajaxURLGenerator:function(url: string, config: any, params: any){
      //ajaxParamsGenerator: (url: string, config: any, params: any) => {
        console.log('=== Tabulator AJAX参数生成器被调用 ===');
        console.log('请求URL:', url);
        console.log('请求配置:', config);
        console.log('原始params类型:', typeof params);
        console.log('原始params完整结构:', JSON.stringify(params, null, 2));
        
        // 详细分析params对象
        if (params) {
          console.log('params所有键:', Object.keys(params));
          console.log('page:', params.page);
          console.log('size:', params.size);
          console.log('sort类型:', typeof params.sort);
          console.log('sort值:', params.sort);
          console.log('filter类型:', typeof params.filter);
          console.log('filter值:', params.filter);
          
          // 检查可能的别名
          console.log('sorters存在?:', 'sorters' in params);
          console.log('filters存在?:', 'filters' in params);
          
          // 检查是否有外部查询条件的预留字段
          console.log('当前外部查询条件预留字段:', this.externalFilters || '未定义');
        } else {
          console.log('params为undefined或null');
          params = {};
        }
        
        // 构建请求参数，使用TabulatorMapper转换为后端期望格式
        // Tabulator 6.x发送的是 sort/filter（单数），但后端期望 sorters/filters（复数）
       // const request = TabulatorMapper.buildServerRequest(
         // params.page || 1,
          //params.size || 20,
          //params.sorts || [],      // Tabulator使用单数'sort'
          //params.filters || []     // Tabulator使用单数'filter'
        //);
        
       // console.log('生成的请求参数:', JSON.stringify(request, null, 2));
       
         const fullUrl = url + '?params=' + encodeURIComponent(JSON.stringify(params));

         console.log('完整URL:', fullUrl);
          console.log('=== 参数生成器执行结束 ===');
  
        return fullUrl;
    
        // 返回完整的请求配置对象
  // return {
  //   method: 'POST',  // 使用POST方法
  //   headers: {
  //     'Content-Type': 'application/json',
  //     'Authorization': 'Basic YWRtaW46MTIz',  // 你的认证信息
  //     // 可以添加其他需要的headers
  //   },
  //   body: JSON.stringify({
  //     filter: params.filter || [],  // 根据后端期望的字段名调整
  //     page: params.page || 1,
  //     size: params.size || 20,
  //     sort: params.sorter || []     // 根据后端期望的字段名调整
   //  })
  //};
      },
      
      // 响应处理，将后端响应转换为Tabulator期望格式
      // ajaxResponse: (url: string, params: any, response: any) => {
      //   console.log('Tabulator AJAX响应处理', { url, params, response });
        
      //   // 检查响应格式
      //   if (response && typeof response === 'object') {
      //     // 后端返回格式：{success: true, data: [...], totalCount: N, last_page: N}
      //     const data = response.data || [];
      //     const totalCount = response.totalCount || 0;
      //     const pageSize = params.size || 20;
      //     const lastPage = response.last_page || Math.ceil(totalCount / pageSize);
          
      //     return {
      //       data: data,
      //       last_page: lastPage
      //     };
      //   }
        
      //   // 如果响应格式不符合预期，返回空数据
      //   console.warn('响应格式不符合预期:', response);
      //   return {
      //     data: [],
      //     last_page: 0
      //   };
      // },
      
      tableAjaxError: (error: any) => {
        console.error('Tabulator AJAX错误:', error);
        if (error.status === 401 || error.status === 403) {
          console.warn('认证失败，跳转到登录页面');
          this.authService.logout();
        }
      },
      

      
      // 表格样式
      layout: 'fitColumns',
      responsiveLayout: 'collapse',
      height: '800px',
      
      // 初始加载
      ajaxInitialLoad: true,
      
      // 分页位置
      paginationCounter: 'rows',
      paginationButtonCount: 5
    });
  }
  

   onRegister() {
      console.log('注册按钮被点击');
      //this.registering = true;
      this.headerButtons[0].loading = true;
      
      this.configMetaService.initConfigMeta().subscribe({
        next: (result: any) => {
         // this.registering = false;
          this.headerButtons[0].loading = false;
          //this.errorMessage = null;
          if (result.success) {
            console.log('注册完成:', result.data);
            
            // 注册后切换到真实API数据
            //this.debugInfo.useMockData = false;
            //this.updateDataConfig();
            
            // 重新加载数据
            //this.loadData(1);
            
            console.log('注册成功，数据已重新加载');
          } else {
            console.error('注册失败:', result);
          }
        },
        error: (error) => {
         // this.registering = false;
          this.headerButtons[0].loading = false;
          console.error('注册请求失败:', error);
        }
      });
    }
    
    onHeaderButtonAction(name: string) {
      console.log(`头部按钮点击: ${name}`);
      switch (name) {
        case 'register':
          this.onRegister();
          break;
        case 'refresh':
          this.refresh();
          break;
        default:
          console.warn(`未知按钮操作: ${name}`);
      }
    }
   /**
    * 刷新表格 - 重新加载数据
    */
   refresh(): void {
     if (this.tabulator) {
       this.headerButtons[1].loading = true;
       this.tabulator.replaceData();
       // 简单延迟后清除loading状态
       setTimeout(() => {
         this.headerButtons[1].loading = false;
       }, 500);
     }
   }
  
  /**
   * 重置筛选和排序
   */
  reset(): void {
    if (this.tabulator) {
      this.tabulator.clearFilter();
      this.tabulator.clearSort();
    }
  }

  /**
   * 刷新表格 - 模板别名
   */
  refreshTable(): void {
    this.refresh();
  }

  /**
   * 重置表格 - 模板别名
   */
  resetTable(): void {
    this.reset();
  }

  /**
   * 导出数据
   */
  exportData(): void {
    if (this.tabulator) {
      this.tabulator.download('csv', 'config-meta-data.csv');
    }
  }
}