<ng-container>
  <!-- 页头 -->
  <page-header-wrapper [title]="'员工详情'" [logo]="logo" [content]="content">
    <ng-template #logo>
      <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
        <i nz-icon nzType="left" nzTheme="outline"></i>
      </button>
    </ng-template>
    <ng-template #content>
      <nz-skeleton [nzLoading]="service.http.loading">
        <div class="user-info" nz-row>
          <div nz-col nzSpan="24" class="d-flex">
            <img [src]="userDetail?.avatar" />
            <div style="flex: 1;">
              <div nz-row>
                <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24">
                  <p style="margin-bottom: 0;">{{ userDetail?.name }}
                    <nz-badge nzStatus="success" nzText="正常" *ngIf="!userDetail?.stateLocked" class="ml-sm"></nz-badge>
                    <nz-badge nzStatus="error" nzText="冻结" *ngIf="userDetail?.stateLocked" class="ml-sm"></nz-badge>
                  </p>
                </div>
              </div>
              <div nz-row>
                <div nz-col [nzLg]="8" [nzSm]="24" [nzXs]="24">
                  <p>手机号：{{ userDetail?.phone }}</p>
                </div>
                <div nz-col [nzLg]="8" [nzSm]="24" [nzXs]="24">
                  申请时间：{{userDetail?.createTime}}
                </div>
                <div nz-col [nzXl]="8" [nzLg]="8" [nzSm]="24" [nzXs]="24" class="d-flex"
                  style="justify-content: flex-end;">
                  <button [nzLoading]="service.http.loading" nz-button nzType="primary" nzGhost (click)="userAction(1)">
                    启用
                  </button>
                  <button [nzLoading]="service.http.loading" nz-button nzDanger (click)="userAction(0)">
                    冻结
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nz-skeleton>
    </ng-template>
  </page-header-wrapper>

  <nz-card [nzLoading]="service.http.loading">
    <sv-container col="2">
      <sv-title>个人信息
        <label *ngIf="userIdentityDetail?.certificationStatus===1" style="color: #52c41a;"><i nz-icon
            nzType="check-circle" nzTheme="fill" class="mr-xs"></i>审核通过
        </label>
        <label *ngIf="userIdentityDetail?.certificationStatus===2" style="color: #ff4d4f;"><i nz-icon
            nzType="close-circle" nzTheme="fill" class="mr-xs"></i>驳回
        </label>
        <div style="float: right;">
          <button nz-button nzType="default" nzDanger (click)="auditPass()" *ngIf="userIdentityDetail.certificationStatus===0">审核通过</button>
          <button nz-button nzType="default" nzDanger (click)="auditNo()" *ngIf="userIdentityDetail.certificationStatus===0">驳回审核</button>
          <button nz-button nzType="default" nzDanger (click)="ratify()">修改</button>
        </div>
      </sv-title>
      <sv label="姓名">
        {{ userIdentityDetail?.name }}
      </sv>
      <sv label="身份证号码">
        {{ userIdentityDetail?.certificateNumber }}
      </sv>
      <sv label="身份证照">
        <app-imagelist
          [imgList]="[userIdentityDetail?.certificatePhotoFrontWatermark,userIdentityDetail?.certificatePhotoBackWatermark]">
        </app-imagelist>
      </sv>
    </sv-container>
    <nz-divider></nz-divider>
    <sv-container col="3" class="mt16">
      <sv-title>关联企业</sv-title>
      <!-- <st #st [bordered]="true" [columns]="columns" [data]="detailData.goodsList" [ngStyle]="{ margin: '1rem 0' }"
        multiSort size="small" [page]="{ show: false }">
      </st> -->
    </sv-container>

  </nz-card>
</ng-container>

<ng-template #redectModal>
  <div nz-row nzGutter="8">
    <div nz-col nzSpan="24" se-container [labelWidth]="120">
      <se [col]="1" label="姓名">
        {{ userIdentityDetail?.name }}
      </se>
      <se [col]="1" label="备注" required>
        <textarea nz-input rows="3" style="width: 325px;margin-left: 14px;" [(ngModel)]="approvalOpinion"></textarea>
      </se>
      <se [col]="1" label="可选理由">
        <nz-tag *ngFor="let tag of reasonTags" nzColor="default" nzMode="checkable"
          (nzCheckedChange)="approvalOpinion=approvalOpinion+'、'+tag">
          {{ tag }}
        </nz-tag>
      </se>
    </div>
  </div>
</ng-template>