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;

  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: 80
        },
        { 
          title: '配置名称', 
          field: 'configName', 
          sorter: 'string', 
          headerFilter: 'input',
          headerFilterFunc: 'like'
        },
        { 
          title: '字段名', 
          field: 'fieldName', 
          sorter: 'string', 
          headerFilter: 'input',
          headerFilterFunc: 'like'
        },
        { 
          title: '字段类型', 
          field: 'fieldType', 
          sorter: 'string', 
          headerFilter: 'input',
          headerFilterParams: {
            values: ['string', 'number', 'boolean', 'array', 'object']
          }
        },
        { 
          title: '描述', 
          field: 'fieldDesc', 
          sorter: 'string', 
          headerFilter: 'input',
          headerFilterFunc: 'like',
          width: 300
        }
      ],
      
      // 标准远程分页配置
      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',
      
      // // 参数生成器，将Tabulator参数转换为后端期望格式
      // ajaxParamsGenerator: (url: string, config: any, params: any) => {
      //   console.log('Tabulator AJAX参数生成器被调用', { url, config });
      //   console.log('原始params类型:', typeof params);
      //   console.log('原始params完整结构:', params);
        
      //   // 详细分析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);
      //   }
        
      //   // 处理params为undefined的情况
      //   if (!params) {
      //     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('生成的请求参数:', request);
      //   return request;
      // },
      
      // 响应处理，将后端响应转换为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');
    }
  }
}