oms/omsapp/src/app/pages/user-detail-modal.component.ts

// user-detail-modal.component.ts
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
import { NzDividerModule } from 'ng-zorro-antd/divider';
import { DatePipe } from '@angular/common';
import { User, UserService } from '../services/user.service';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-user-detail-modal',
  standalone: true,
  imports: [
    CommonModule,
    NzDescriptionsModule,
    NzDividerModule,
    NzTagModule,
    DatePipe,
  ],
  template: `
    <nz-descriptions nzTitle="用户详情" nzBordered [nzColumn]="2">
      <nz-descriptions-item nzTitle="UID">{{ user?.uid }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="项目ID">{{
        user?.project
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="来源渠道">{{
        user?.network || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="推广活动">{{
        user?.campaign || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="广告组">{{
        user?.adgroup || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="素材名称">{{
        user?.creative || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="归属产品">{{
        user?.prod || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="操作系统">{{
        user?.libraryName || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="国家代码">{{
        user?.cc || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="语言">{{
        user?.lang || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="生产厂商">{{
        user?.manufacturer || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="设备型号">{{
        user?.deviceModel || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="硬件信息">{{
        user?.hardware || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="设备信息">{{
        user?.deviceInfo || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="机身内存"
        >{{ user?.deviceMem || '-' }} GB</nz-descriptions-item
      >
      <nz-descriptions-item nzTitle="API版本">{{
        user?.apiLevel || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="软件版本">{{
        user?.versionName || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="软件编号">{{
        user?.versionCode || '-'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="首次登录时间">{{
        user?.firstLoginAt | date : 'yyyy-MM-dd HH:mm:ss'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="最后活跃时间">{{
        user?.lastActiveAt | date : 'yyyy-MM-dd HH:mm:ss'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="创建时间">{{
        user?.createdAt | date : 'yyyy-MM-dd HH:mm:ss'
      }}</nz-descriptions-item>
      <nz-descriptions-item nzTitle="更新时间">{{
        user?.updateAt | date : 'yyyy-MM-dd HH:mm:ss'
      }}</nz-descriptions-item>
    </nz-descriptions>

    <nz-descriptions nzBordered>
      <nz-descriptions-item nzTitle="FCM Token">{{
        user?.fmToken || '-'
      }}</nz-descriptions-item>
    </nz-descriptions>

    <nz-divider></nz-divider>

    <div *ngIf="user?.tags?.length">
      <h3>用户标签</h3>
      <nz-tag *ngFor="let tag of user?.tags" [nzColor]="'blue'">{{
        tag
      }}</nz-tag>
    </div>
  `,
  styles: [
    `
      :host {
        display: block;
        padding: 16px;
      }
      pre {
        background: #f5f5f5;
        padding: 8px;
        border-radius: 4px;
        overflow-x: auto;
      }
      nz-tag {
        margin-right: 8px;
        margin-bottom: 8px;
      }
    `,
  ],
})
export class UserDetailModalComponent {
  user: User | null = null;
  isLoading = false;

  // 改为通过构造函数注入
  constructor(
    public modalRef: NzModalRef,
    private userService: UserService,
    private message: NzMessageService
  ) {}

  ngOnInit(): void {
    const inputData = this.modalRef.getConfig().nzData;

    if (this.isUserObject(inputData)) {
      // 如果传入的是完整的用户对象，直接使用
      this.user = inputData;
    } else if (inputData?.uid) {
      // 如果传入的是UID，发起请求获取用户详情
      this.loadUser(inputData.uid);
    } else {
      this.message.error('无效的用户数据');
      this.modalRef.close();
    }
  }

  private isUserObject(obj: any): obj is User {
    return obj && typeof obj === 'object' && 'uid' in obj && 'project' in obj;
  }

  private loadUser(uid: string): void {
    this.isLoading = true;
    this.userService.getUserByUid(uid).subscribe({
      next: (user) => {
        this.user = user;
        this.isLoading = false;
      },
      error: (err) => {
        this.message.error('加载用户详情失败: ' + err.message);
        this.isLoading = false;
        this.modalRef.close();
      },
    });
  }
}