<div class="main">
  <page-grid>
    <nz-steps [nzCurrent]="step" nzLabelPlacement="vertical" class="step-title">
      <nz-step nzTitle="安全验证"></nz-step>
      <nz-step nzTitle="重设密码"></nz-step>
      <nz-step nzTitle="完成"></nz-step>
    </nz-steps>

    <div class="steps-content">
      <ng-container *ngIf="step === 0">
        <div nz-row>
          <div nz-col nzOffset="7" nzMd="9">
            <form nz-form [formGroup]="formGroup1" class="myForm">
              <nz-form-item>
                <nz-form-label nzSpan="6" nzRequired nzFor="phone">手机号</nz-form-label>
                <nz-form-control nzSpan="18" nzErrorTip="请输入正确的手机号">
                  <input type="text" nz-input formControlName="phone" maxlength="11" nzSize="large"
                    placeholder="请输入手机号" />
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label nzSpan="6" nzRequired nzFor="smsVerifyCode">验证码</nz-form-label>
                <nz-form-control nzSpan="18" nzErrorTip="请输入6位验证码">
                  <nz-input-group [nzSuffix]="suffixTemplateInfo" nzSize="large">
                    <input type="text" nz-input formControlName="smsVerifyCode" maxlength="6" placeholder="请输入验证码" />
                  </nz-input-group>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-control nzSpan="6" nzOffset="6">
                  <button class="btn-submit" [disabled]="!formGroup1.valid" [nzLoading]="service.http.loading" nz-button
                    nzBlock="true" nzType="primary" (click)="formSubmit()">
                    下一步
                  </button>
                </nz-form-control>
              </nz-form-item>
            </form>
          </div>
        </div>
      </ng-container>

      <ng-container *ngIf="step === 1">
        <div nz-row>
          <div nz-col nzOffset="7" nzMd="17">
            <form nz-form [formGroup]="formGroup2" class="myForm">
              <nz-form-item>
                <nz-form-label nzSpan="4" nzRequired nzFor="passWord">设置新密码</nz-form-label>
                <nz-form-control nzSpan="8" nzErrorTip="请输入新密码">
                  <nz-input-group [nzSuffix]="passWordType" nzSize="large">
                    <input nz-input [type]="isPassWordHide?'password':'text'" formControlName="passWord"
                      (ngModelChange)="validateConfirmPassword()" placeholder="请输入新密码" />
                  </nz-input-group>
                  <ng-template #passWordType>
                    <i nz-icon [nzType]="isPassWordHide?'eye-invisible':'eye'" (click)="isPassWordHide=!isPassWordHide"
                      nzTheme="outline" style="color: #bdb7b7;font-size: 18px;cursor: pointer;"></i>
                  </ng-template>
                </nz-form-control>
                <div class="input-tootip">
                  <div *ngIf="formGroup2?.value?.passWord;else NodataTemplate">
                    <i *ngIf="formGroup2?.controls?.passWord?.errors" nz-icon nzType="close-circle" nzTheme="fill"
                      class="valid-icon"></i>
                    <i *ngIf="!formGroup2?.controls?.passWord?.errors" nz-icon nzType="check-circle" nzTheme="fill"
                      class="invalid-icon"></i>
                  </div>
                  <label class="tootip-label"> 8-16个字符，支持字母、数字、符号“_”和“-”，必须包含字母和数字</label>
                </div>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label nzSpan="4" nzRequired nzFor="passWordTo">重复新密码</nz-form-label>
                <nz-form-control nzSpan="8" nzDisableAutoTips  nzErrorTip="请输入新密码">
                  <nz-input-group [nzSuffix]="confirmPassWordType" nzSize="large">
                    <input nz-input [type]="isConfirmPassWordHide?'password':'text'" formControlName="passWordTo"
                      placeholder="再次输入密码" />
                  </nz-input-group>
                  <ng-template #confirmPassWordType>
                    <i nz-icon [nzType]="isConfirmPassWordHide?'eye-invisible':'eye'"
                      (click)="isConfirmPassWordHide=!isConfirmPassWordHide" nzTheme="outline"
                      style="color: #bdb7b7;font-size: 18px;cursor: pointer;"></i>
                    <!-- <ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
                    <ng-container *ngIf="control.hasError('passWordTo')"> 两次输入的密码不一致! </ng-container> -->
                  </ng-template>
                </nz-form-control>
                <div class="input-tootip">
                  <div *ngIf="formGroup2?.value?.passWordTo;else NodataTemplate">
                    <i *ngIf="formGroup2?.controls?.passWordTo?.errors" nz-icon nzType="close-circle" nzTheme="fill"
                      class="valid-icon"></i>
                    <i *ngIf="!formGroup2?.controls?.passWordTo?.errors" nz-icon nzType="check-circle" nzTheme="fill"
                      class="invalid-icon"></i>
                  </div>
                  <label class="tootip-label">设置新密码与重复新密码保持一致</label>
                </div>
              </nz-form-item>
              <nz-form-item>
                <nz-form-control nzSpan="6" nzOffset="6">
                  <button [disabled]="!formGroup2.valid" [nzLoading]="service.http.loading" nz-button nzBlock="true"
                    nzType="primary" (click)="formSubmit()">
                    确认
                  </button>
                </nz-form-control>
              </nz-form-item>
            </form>
          </div>
        </div>
      </ng-container>

      <ng-container *ngIf="step === 2">
        <result [type]="result ? 'success' : 'error'" [title]="title" [description]="subTitle"
          style="margin-top: 3rem;margin-bottom: 5rem;">
          <ng-template #title>
            <div class="title" style="font-size: 24px">
              <!-- {{ 'app.register-result.msg' | translate: params }} -->
              <span *ngIf="result">密码设置成功！</span>
              <span *ngIf="!result">密码设置失败！</span>
            </div>
          </ng-template>
          <ng-template #subTitle>
            <div style="font-size: 14px">请牢记您的新密码，3秒后自动跳转至登录页...</div>
          </ng-template>

          <button routerLink="/passport/login" nz-button nzType="primary">
            <!-- {{ 'app.register-result.back-home' | translate }} -->
            立即登录
          </button>
          <!-- <button routerLink="/" nz-button nzSize="large">
            {{ 'app.register-result.back-home' | translate }}
          </button> -->
        </result>
      </ng-container>
    </div>
  </page-grid>
</div>

<ng-template #suffixTemplateInfo>
  <ng-container *ngIf="count < 1; else intervalTemplate">
    <span class="msg-btn" style="color: #3370ff; cursor: pointer" (click)="getCaptcha()">获取验证码</span>
  </ng-container>
  <ng-template #intervalTemplate> 请等待{{ count }}s </ng-template>
</ng-template>

<ng-template #NodataTemplate><label class="dot">●</label></ng-template>