<h3>{{ 'app.register.install' | translate }}</h3>
<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="mailErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
        <input nz-input formControlName="email" placeholder="用户邮箱" />
      </nz-input-group>
      <ng-template #mailErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">{{ 'validation.email.required' | translate }}</ng-container>
        <ng-container *ngIf="i.errors?.email">{{ 'validation.email.wrong-format' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control [nzErrorTip]="customerNameErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
        <input nz-input formControlName="CustomerName" placeholder="用户名" />
      </nz-input-group>
      <ng-template #customerNameErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">{{ 'validation.customer.required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="'validation.password.required' | translate">
      <nz-input-group
        nzSize="large"
        nzAddonBeforeIcon="lock"
        nz-popover
        nzPopoverPlacement="right"
        nzPopoverTrigger="focus"
        [(nzPopoverVisible)]="visible"
        nzPopoverOverlayClassName="register-password-cdk"
        [nzPopoverOverlayStyle]="{ 'width.px': 240 }"
        [nzPopoverContent]="pwdCdkTpl"
      >
        <input nz-input type="password" formControlName="Password" placeholder="输入你的密码" />
      </nz-input-group>
      <ng-template #pwdCdkTpl>
        <div style="padding: 4px 0">
          <ng-container [ngSwitch]="status">
            <div *ngSwitchCase="'ok'" class="success">{{ 'validation.password.strength.strong' | translate }}</div>
            <div *ngSwitchCase="'pass'" class="warning">{{ 'validation.password.strength.medium' | translate }}</div>
            <div *ngSwitchDefault class="error">{{ 'validation.password.strength.short' | translate }}</div>
          </ng-container>
          <div class="progress-{{ status }}">
            <nz-progress
              [nzPercent]="progress"
              [nzStatus]="passwordProgressMap[status]"
              [nzStrokeWidth]="6"
              [nzShowInfo]="false"
            ></nz-progress>
          </div>
          <p class="mt-sm">{{ 'validation.password.strength.msg' | translate }}</p>
        </div>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="confirmErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="lock">
        <input nz-input type="password" formControlName="confirm" placeholder="再次输入你的密码" />
      </nz-input-group>
      <ng-template #confirmErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">{{ 'validation.confirm-password.required' | translate }}</ng-container>
        <ng-container *ngIf="i.errors?.equar">{{ 'validation.password.twice' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="tenantNameErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
        <input nz-input formControlName="tenantName" placeholder="租户名称" />
      </nz-input-group>
      <ng-template #tenantNameErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">{{ 'validation.tenantName.required' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control [nzErrorTip]="tenantEMailErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
        <input nz-input formControlName="tenantEMail" placeholder="租户邮箱" />
      </nz-input-group>
      <ng-template #tenantEMailErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">{{ 'validation.tenantEMail.required' | translate }}</ng-container>
        <ng-container *ngIf="i.errors?.email">{{ 'validation.tenantEMail.wrong-format' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzErrorTip]="customerEMailErrorTip">
      <nz-input-group nzSize="large" nzAddonBeforeIcon="user">
        <input nz-input formControlName="customerEMail" placeholder="客户邮箱" />
      </nz-input-group>
      <ng-template #customerEMailErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">{{ 'validation.customerEMail.required' | translate }}</ng-container>
        <ng-container *ngIf="i.errors?.email">{{ 'validation.customerEMail.wrong-format' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control [nzErrorTip]="mobileErrorTip">
      <nz-input-group nzSize="large" [nzAddOnBefore]="addOnBeforeTemplate">
        <ng-template #addOnBeforeTemplate>
          <nz-select formControlName="mobilePrefix" style="width: 100px">
            <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
            <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
          </nz-select>
        </ng-template>
        <input formControlName="phoneNumber" nz-input placeholder="电话号码" />
      </nz-input-group>
      <ng-template #mobileErrorTip let-i>
        <ng-container *ngIf="i.errors?.required">{{ 'validation.phone-number.required' | translate }}</ng-container>
        <ng-container *ngIf="i.errors?.pattern">{{ 'validation.phone-number.wrong-format' | translate }}</ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <!-- <nz-form-item >
    <nz-form-control [nzErrorTip]="'validation.verification-code.required' | translate">
      <nz-row [nzGutter]="8">
        <nz-col [nzSpan]="16">
          <nz-input-group nzSize="large" nzAddonBeforeIcon="mail">
            <input nz-input formControlName="captcha" placeholder="Captcha" />
          </nz-input-group>
        </nz-col>
        <nz-col [nzSpan]="8">
          <button type="button" nz-button nzSize="large" (click)="getCaptcha()" [disabled]="count > 0" nzBlock
            [nzLoading]="http.loading">
            {{ count ? count + 's' : ('app.register.get-verification-code' | translate) }}
          </button>
        </nz-col>
      </nz-row>
    </nz-form-control>
  </nz-form-item> -->
  <nz-form-item>
    <button nz-button nzType="primary" nzSize="large" type="submit" [nzLoading]="http.loading" class="submit">
      {{ 'app.register.register' | translate }}
    </button>
    <a class="login" routerLink="/passport/login">{{ 'app.register.sign-in' | translate }}</a>
  </nz-form-item>
</form>
