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

import { Component, inject, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ConfigMetaService } from '../../services/config-meta.service';
import { ConfigService, StickyHeaderComponent, StickyHeaderButton, TabulatorGridComponent } from 'base-core';
import { CommonModule } from '@angular/common';
import { Observable } from 'rxjs';

@Component({
  imports: [CommonModule, StickyHeaderComponent, TabulatorGridComponent],
  selector: 'app-service-register-config',
  templateUrl: './service-register-config.component.html',
  styleUrl: './service-register-config.component.scss'
})
export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit {
  private configMetaService = inject(ConfigMetaService);
  private config = inject(ConfigService);

  @ViewChild(TabulatorGridComponent) tabulatorGrid!: TabulatorGridComponent;

   ngOnInit(): void {
     console.log('ServiceRegisterConfigComponent 初始化');
     // 确保使用代理API路径
     this.config.apiBaseUrl = '/api';
     console.log('ConfigService:', {
       useMockData: this.config.useMockData,
       apiBaseUrl: this.config.apiBaseUrl
     });
   }

  ngAfterViewInit(): void {
    console.log('👀 ServiceRegisterConfigComponent: TabulatorGrid 视图初始化完成');
  }

  title = '注册服务配置';
  hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
  headerButtons: StickyHeaderButton[] = [
    { title: '注册', name: 'register', icon: 'add', color: 'primary' },
    { title: '刷新', name: 'refresh', icon: 'refresh', color: 'accent' }
  ];
  
  // 外部查询条件预留字段（用于将来扩展）
  externalFilters: any = {};

  // 表格列定义
  columns = [
    { 
      title: 'ID', 
      field: 'id', 
      sorter: 'number', 
      headerFilter: 'input', 
      width: 220,
      headerMenu: [
        {
          label: "<i class='fa fa-filter'></i> 切换筛选",
          action: (column: any) => {
            const headerFilterEl = column.getElement().querySelector('.tabulator-header-filter');
            if (headerFilterEl) {
              const isHidden = headerFilterEl.style.display === 'none';
              headerFilterEl.style.display = isHidden ? '' : 'none';
            }
          }
        }
      ]
    },
    { 
      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' 
    }
  ];

   /**
    * 数据加载函数 - 适配 TabulatorGridComponent
    */
   dataLoader = (params: any): Observable<{ last_page: number; data: any[] }> => {
     console.group('🚨🚨🚨 ServiceRegisterConfigComponent 数据加载函数被调用 🚨🚨🚨');
     console.log('🔍 调用来源堆栈:', new Error().stack);
     console.log('🔍 原始参数结构:', {
       type: typeof params,
       isObject: params && typeof params === 'object',
       keys: params ? Object.keys(params) : [],
       hasSize: 'size' in params,
       hasPage: 'page' in params,
       hasFilter: 'filter' in params,
       hasSort: 'sort' in params
     });
     console.log('📦 原始参数详情:', params);
     
     // 深度检查筛选和排序参数
     if (params) {
       console.log('🔍 筛选参数检查:', {
         hasFilter: 'filter' in params,
         filterType: typeof params.filter,
         isArray: Array.isArray(params.filter),
         filterLength: Array.isArray(params.filter) ? params.filter.length : 'N/A',
         filterSample: Array.isArray(params.filter) && params.filter.length > 0 ? params.filter.slice(0, 2) : '空'
       });
       
       console.log('🔍 排序参数检查:', {
         hasSort: 'sort' in params,
         sortType: typeof params.sort,
         isArray: Array.isArray(params.sort),
         sortLength: Array.isArray(params.sort) ? params.sort.length : 'N/A',
         sortSample: Array.isArray(params.sort) && params.sort.length > 0 ? params.sort.slice(0, 2) : '空'
       });
     }
     
     console.log('🔗 ConfigMetaService URL:', this.configMetaService.getListUrl());
     
     // 确保参数有默认值
     const safeParams = {
       page: params?.page || 1,
       size: params?.size || 20,
       sort: params?.sort || [],
       filter: params?.filter || []
     };
     
     console.log('✅ 处理后参数:', safeParams);
     console.log('📤 发送给 listForTabulator 的参数:', JSON.stringify(safeParams, null, 2));
     console.groupEnd();
     
     return this.configMetaService.listForTabulator(safeParams);
   };

  /**
   * 注册配置元信息
   */
  onRegister(): void {
    console.log('注册按钮被点击');
    this.headerButtons[0].loading = true;

    this.configMetaService.initConfigMeta().subscribe({
      next: (result: any) => {
        this.headerButtons[0].loading = false;
        if (result.success) {
          console.log('注册完成:', result.data);
          // 注册成功后刷新表格数据
          this.refresh();
          console.log('注册成功，数据已重新加载');
        } else {
          console.error('注册失败:', result);
        }
      },
      error: (error) => {
        this.headerButtons[0].loading = false;
        console.error('注册请求失败:', error);
      }
    });
  }

  /**
   * 处理头部按钮点击事件
   */
  onHeaderButtonAction(name: string): void {
    console.log(`头部按钮点击: ${name}`);
    switch (name) {
      case 'register':
        this.onRegister();
        break;
      case 'refresh':
        this.refresh();
        break;
      default:
        console.warn(`未知按钮操作: ${name}`);
    }
  }

  /**
   * 刷新表格数据
   */
  refresh(): void {
    if (this.tabulatorGrid) {
      this.headerButtons[1].loading = true;
      this.tabulatorGrid.refresh();
      // 简单延迟后清除loading状态
      setTimeout(() => {
        this.headerButtons[1].loading = false;
      }, 500);
    }
  }

  /**
   * 重置筛选和排序
   */
  reset(): void {
    if (this.tabulatorGrid) {
      this.tabulatorGrid.reset();
    }
  }

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

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

  /**
   * 导出数据为 CSV
   */
  exportData(): void {
    if (this.tabulatorGrid) {
      this.tabulatorGrid.exportToCSV('config-meta-data.csv');
    }
  }

  /**
   * 处理表格数据加载完成事件
   */
  onDataLoaded(response: any): void {
    console.log('✅ 表格数据加载完成:', {
      last_page: response?.last_page,
      data_count: response?.data?.length,
      data_sample: response?.data?.slice(0, 2)
    });
  }

  /**
   * 处理 AJAX 错误事件
   */
  onAjaxError(error: any): void {
    console.error('❌ 表格 AJAX 错误:', error);
    console.error('错误详情:', {
      message: error?.message,
      status: error?.status,
      url: error?.url
    });
  }
}