<!-- 页头 -->
<page-header-wrapper [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>
    <div class="user-info" nz-row>
      <div nz-col nzSpan="24" class="d-flex">
        <img [src]="detailData?.enterpriseLogo" />
        <div style="flex: 1;">
          <div nz-row>
            <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24">
              <p style="margin-bottom: 0;">{{ detailData?.enterpriseName }}</p>
            </div>
            <div nz-col [nzLg]="12" [nzSm]="24" [nzXs]="24" class="text-right mb-sm">
              <label style="font-size: 18px;font-weight: 600;">{{statusE[detailData?.approvalStatus] }}</label>
            </div>
          </div>
          <div nz-row>
            <div nz-col [nzLg]="8" [nzSm]="24" [nzXs]="24">
              <p>{{ detailData?.unifiedSocialCreditCode }}</p>
            </div>
            <div nz-col [nzLg]="8" [nzSm]="24" [nzXs]="24">
              申请时间：{{detailData?.createTime}}
            </div>
            <div nz-col [nzXl]="8" [nzLg]="8" [nzSm]="24" [nzXs]="24" class="d-flex" style="justify-content: flex-end;">
              <ng-container *ngIf="isEdit;else editButton">
                <button [nzLoading]="service.http.loading" nz-button (click)="reset()">
                  取消
                </button>
                <button [nzLoading]="service.http.loading" nz-button nzDanger (click)="save()">
                  保存
                </button>
              </ng-container>
              <ng-template #editButton>
                <button [nzLoading]="service.http.loading" nz-button nzDanger (click)="auditPass()">
                  通过
                </button>
                <button [nzLoading]="service.http.loading" nz-button nzDanger (click)="auditNo()">
                  驳回
                </button>
                <button [nzLoading]="service.http.loading" nz-button nzDanger (click)="ratify()">
                  修改
                </button>
              </ng-template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
</page-header-wrapper>

<nz-card [class]="isEdit?'edit-box':'readOnly-box'">
  <sv-container col="3">
    <sv-title>企业管理员信息</sv-title>
    <sv label="姓名">
      <input nz-input type="text" [(ngModel)]="detailData.adminUserInfo.name" [readonly]="!isEdit"
        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="手机号">
      <input nz-input type="text" [(ngModel)]="detailData.adminUserInfo.mobile" [readonly]="!isEdit"
        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="身份证号">
      <input nz-input type="text" [(ngModel)]="detailData.legalPersonIdentityVO.certificateNumber" [readonly]="!isEdit"
        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="身份证照" col="2">
      <div class="d-flex">
        <ng-container
          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.adminUserInfo?.certificatePhotoFrontWatermark,key:'certificatePhotoFrontWatermark',hover:'adminFront'}">
        </ng-container>
        <ng-container
          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.adminUserInfo?.certificatePhotoBackWatermark,key:'certificatePhotoBackWatermark',hover:'adminBack'}">
        </ng-container>
      </div>
    </sv>
    <sv label="企业授权函" col="2">
      <ng-container
        *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.adminUserInfo?.certificatePhotoBackWatermark,key:'certificatePhotoBackWatermark',hover:'adminPhoto'}">
      </ng-container>
    </sv>
  </sv-container>
  <nz-divider></nz-divider>

  <sv-container col="3">
    <sv-title>
      <label class="mr-md">企业基本信息</label>
      <label *ngIf="detailData?.approvalStatus===10" style="color: #1890ff;"><i nz-icon nzType="info-circle"
          nzTheme="fill" class="mr-xs"></i>待审核
      </label>
      <label *ngIf="detailData?.approvalStatus===20" style="color: #52c41a;"><i nz-icon nzType="check-circle"
          nzTheme="fill" class="mr-xs"></i>审核通过
      </label>
      <label *ngIf="detailData?.approvalStatus===30" style="color: #ff4d4f;"><i nz-icon nzType="close-circle"
          nzTheme="fill" class="mr-xs"></i>驳回
      </label>
    </sv-title>
    <sv label="公司名称">
      <input nz-input type="text" [(ngModel)]="detailData.enterpriseName" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="统一社会信用代码">
      <input nz-input type="text" [(ngModel)]="detailData.unifiedSocialCreditCode" [readonly]="!isEdit"
        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="公司类型">
      <input nz-input type="text" [(ngModel)]="detailData.enterpriseType" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="注册资本">
      <ng-container *ngIf="isEdit; else registrationCapitalTemplate">
        <input nz-input type="number" [(ngModel)]="detailData.registrationCapital" [readonly]="!isEdit"
          [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'" class="mr-sm">
      </ng-container>
      <ng-template #registrationCapitalTemplate>
        {{detailData?.registrationCapital}}
      </ng-template>
      <span *ngIf="detailData?.registrationCapital">万元</span>
    </sv>
    <sv label="成立日期">
      <nz-date-picker [(ngModel)]="detailData.enterpriseRegistrationTime" [nzDisabled]="!isEdit"
        [nzPlaceHolder]="isEdit?'':'-'" [nzBorderless]="!isEdit" [nzSuffixIcon]="isEdit?'calendar':''"></nz-date-picker>
    </sv>
    <sv label="营业期限">
      <ng-container *ngIf="isEdit; else operatingelseTemplate">
        <nz-range-picker [ngModel]="[detailData?.operatingStartTime,detailData?.operatingEndTime]"
          (ngModelChange)="changeTime($event)"></nz-range-picker>
      </ng-container>
      <ng-template #operatingelseTemplate>
        <div *ngIf="!!detailData?.operatingStartTime && !!detailData?.operatingEndTime">
          {{ detailData?.operatingStartTime }} 至 {{ detailData?.operatingEndTime }}
        </div>
        <div *ngIf="!detailData?.operatingStartTime && !detailData?.operatingEndTime">长期</div>
        <div *ngIf="!!detailData?.operatingStartTime && !detailData?.operatingEndTime">{{ detailData?.operatingStartTime
          }} 至 长期</div>
      </ng-template>
    </sv>
    <sv label="公司所在地" col="3">
      <ng-container *ngIf="isEdit; else cascaderelseTemplate">
        <nz-cascader [(ngModel)]="values" [nzLoadData]="loadData" (ngModelChange)="changeCascader($event)">
        </nz-cascader>
      </ng-container>
      <ng-template #cascaderelseTemplate>
        {{ detailData?.fullRegionVO?.provinceName }}{{ detailData?.fullRegionVO?.cityName }}{{
        detailData?.fullRegionVO?.areaName }}
      </ng-template>
    </sv>
    <sv label="公司详细地址" col="2">
      {{ detailData?.enterpriseAddress }}
    </sv>
  </sv-container>
  <sv-container col="1" class="mt16">
    <sv label="经营范围">
      {{ detailData?.businessScope }}
    </sv>
    <sv label="税务机关" col="2">
      <input nz-input type="text" [(ngModel)]="detailData.taxAuthority" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="营业执照" col="2">
      <ng-container
        *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.licensePhotoWatermark,key:'licensePhotoWatermark',hover:'detailPhoto'}">
      </ng-container>
    </sv>
  </sv-container>
  <nz-divider></nz-divider>
  <sv-container col="3" class="mt16">
    <sv-title>企业法人信息</sv-title>
    <sv label="法定代表人">
      <input nz-input type="text" [(ngModel)]="detailData.legalPersonIdentityVO.name" [readonly]="!isEdit"
        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="身份证号码">
      <input nz-input type="text" [(ngModel)]="detailData.legalPersonIdentityVO.certificateNumber" [readonly]="!isEdit"
        [nzBorderless]="!isEdit" [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="身份证有效期">
      {{ detailData?.legalPersonIdentityVO?.validStartTime }} -
      {{ detailData?.legalPersonIdentityVO?.validEndTime || '长期' }}
    </sv>
    <sv label="身份证照" col="1">
      <div class="d-flex">
        <ng-container
          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.legalPersonIdentityVO?.certificatePhotoFrontWatermark,key:'certificatePhotoFrontWatermark',hover:'legalFront'}">
        </ng-container>
        <ng-container
          *ngTemplateOutlet="uploadTemplate;context:{image:detailData?.legalPersonIdentityVO?.certificatePhotoBackWatermark,key:'certificatePhotoBackWatermark',hover:'legalBack'}">
        </ng-container>
      </div>
    </sv>
  </sv-container>
  <nz-divider></nz-divider>
  <sv-container col="3" class="mt16">
    <sv-title>企业开票信息</sv-title>
    <sv label="开户银行">
      <input nz-input type="text" [(ngModel)]="detailData.createBank" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'">
    </sv>
    <sv label="银行账户">
      <input nz-input type="text" [(ngModel)]="detailData.bankAccount" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'">
      {{ detailData?.bankAccount }}
    </sv>
    <sv label="注册电话">
      <input nz-input type="text" [(ngModel)]="detailData.registerPhone" [readonly]="!isEdit" [nzBorderless]="!isEdit"
        [placeholder]="isEdit?'':'-'">
      {{ detailData?.registerPhone }}
    </sv>
    <sv label="注册地址">
      {{ detailData?.registerAddress }}
    </sv>
  </sv-container>
</nz-card>

<ng-template #approvedModal>
  <div nz-row nzGutter="8">
    <div nz-col nzSpan="24" se-container [labelWidth]="120">
      <se [col]="1" label="公司名称">
        {{ detailData?.enterpriseName }}
      </se>
      <se [col]="1" label="网络货运人" required>
        <nz-select nzPlaceHolder="请选择" [(ngModel)]="networkTransporter">
          <nz-option [nzValue]="1" nzLabel="Jack"></nz-option>
          <nz-option [nzValue]="2" nzLabel="Lucy"></nz-option>
        </nz-select>
      </se>
    </div>
  </div>
</ng-template>

<ng-template #redectModal>
  <div nz-row nzGutter="8">
    <div nz-col nzSpan="24" se-container [labelWidth]="120">
      <se [col]="1" label="公司名称">
        {{ detailData?.enterpriseName }}
      </se>
      <se [col]="1" label="备注" required>
        <textarea nz-input rows="3" style="width: 325px;margin-left: 14px;" [(ngModel)]="approvalOpinion"></textarea>
      </se>
    </div>
  </div>
</ng-template>


<ng-template #uploadTemplate let-image="image" let-key="key" let-hover="hover">
  <nz-upload class="avatar-uploader" [nzAction]="uploadURl" nzName="multipartFile" nzListType="picture-card"
    [nzShowUploadList]="false" nzFileType="image/png,image/jpeg,image/jpg,image/gif"
    [nzDisabled]="!isEdit || disabledUpload" (nzChange)="changeUpload($event,key)">
    <ng-container *ngIf="!image && isEdit">
      <i class="upload-icon" nz-icon [nzType]="service.http.loading ? 'loading' : 'plus'"></i>
      <div class="ant-upload-text">上传</div>
    </ng-container>
    <div *ngIf="image" (mouseover)="detailData[hover]=true" (mouseleave)="detailData[hover]=false"
      (click)="$event.cancelBubble=true" class="image-hover">
      <img [src]="image" style="width: 200px;height: 160px;" />
      <div class="mask" *ngIf="detailData[hover] && isEdit"></div>
      <div class="mask-over" *ngIf="detailData[hover] && isEdit">
        <i nz-icon nzType="close-circle" nzTheme="fill" class="delete-icon" (click)="deleteImg(key)"></i>
        <div style="display: flex;align-items: center;">
          <i nz-icon nzType="eye" nzTheme="fill" class="show-icon" (click)="showImg(image)"></i>
        </div>
      </div>
    </div>
  </nz-upload>
</ng-template>