<page-header-wrapper [title]="''" [logo]="logo">
  <ng-template #logo>
      <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
          <i nz-icon nzType="left" nzTheme="outline"></i>
      </button>
  </ng-template>
</page-header-wrapper>
<nz-card>
  <div class="container">
    <div>
      <div style="display: flex; align-items: center; min-height: 150px">
        <nz-steps [nzCurrent]="step" style="display: contents" [nzProgressDot]="progressTemplate">
          <nz-step nzTitle="安全验证"></nz-step>
          <nz-step nzTitle="重设密码"></nz-step>
          <nz-step nzTitle="完成"></nz-step>
        </nz-steps>
        <ng-template #progressTemplate let-dot let-status="status" let-index="index">
          <ng-container *ngIf="status === 'finish'; else finshTemplate">
            <i nz-icon nzType="check" nzTheme="outline" style="color: #fff"></i>
          </ng-container>
          <ng-template #finshTemplate>
            {{ index + 1 }}
          </ng-template>
        </ng-template>
      </div>
      <nz-card [nzBordered]="false">
        <div style="width: 480px; margin: 0 auto" [ngSwitch]="step.toString()">
          <div *ngSwitchCase="0">
            <sf #step1sf *ngIf="step1Schema" [schema]="step1Schema" button="none" [layout]="'horizontal'">
              <ng-template sf-template="smsVerifyCode" let-smsVerifyCode let-ui="ui" let-schema="schema">
                <nz-input-group [nzSuffix]="suffixTemplateInfo">
                  <input
                    type="text"
                    maxlength="6"
                    nz-input
                    placeholder="请输入验证码"
                    [ngModel]="smsVerifyCode.formProperty.value"
                    (ngModelChange)="smsVerifyCode.setValue($event)"
                  />
                </nz-input-group>
              </ng-template>
              <div nz-col [nzPush]="5">
                <button
                  nz-button
                  type="submit"
                  nzType="primary"
                  (click)="nextStep()"
                  [disabled]="!step1sf.valid"
                  [nzLoading]="service.http.loading"
                >
                  下一步
                </button>
              </div>
            </sf>
          </div>

          <div *ngSwitchCase="1">
            <form nz-form [formGroup]="formGroup3" class="myForm">
              <nz-form-item>
                <nz-form-label nzSpan="6" nzRequired nzFor="passWord">设置支付密码</nz-form-label>
                <nz-form-control nzSpan="18" [nzErrorTip]="passwordErrorTpl">
                  <nz-input-group [nzSuffix]="pwdIconEye">
                    <input
                      nz-input
                      [type]="isShowPwd ? 'text' : 'password'"
                      formControlName="passWord"
                      minlength="6"
                      maxlength="6"
                      (ngModelChange)="validateConfirmPassword()"
                      placeholder="请输入支付密码"
                    />
                  </nz-input-group>
                  <ng-template #pwdIconEye>
                    <span (click)="isShowPwd = !isShowPwd">
                      <ng-container *ngIf="isShowPwd; else showPwdTempalte">
                        <i nz-icon nzType="eye" nzTheme="outline"></i>
                      </ng-container>
                      <ng-template #showPwdTempalte>
                        <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
                      </ng-template>
                    </span>
                  </ng-template>
                  <ng-template #passwordErrorTpl let-control>
                    <ng-container *ngIf="control.hasError('required')"> 请输入支付密码! </ng-container>
                    <ng-container *ngIf="control.hasError('minlength') || control.hasError('pattern')  || control.hasError('confirm')">
                      6位数字，不能为连续数字或者相同数字（如123456、111111）
                    </ng-container>
                  </ng-template>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label nzSpan="6" nzRequired nzFor="passWordTo">重复支付密码</nz-form-label>
                <nz-form-control nzSpan="18" nzDisableAutoTips [nzErrorTip]="confirmPasswordErrorTpl">
                  <nz-input-group [nzSuffix]="confirmPwdIconEye">
                    <input
                      nz-input
                      [type]="isShowConfirmPwd ? 'text' : 'password'"
                      formControlName="passWordTo"
                      minlength="6"
                      maxlength="6"
                      (ngModelChange)="validateConfirmPassword()"
                      placeholder="请输入支付密码"
                    />
                  </nz-input-group>
                  <ng-template #confirmPwdIconEye>
                    <span (click)="isShowConfirmPwd = !isShowConfirmPwd">
                      <ng-container *ngIf="isShowConfirmPwd; else showConfirmPwdTempalte">
                        <i nz-icon nzType="eye" nzTheme="outline"></i>
                      </ng-container>
                      <ng-template #showConfirmPwdTempalte>
                        <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
                      </ng-template>
                    </span>
                  </ng-template>
                  <ng-template #confirmPasswordErrorTpl let-control>
                    <ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
                    <ng-container *ngIf="control.hasError('passWordTo')"> 两次输入的密码不一致! </ng-container>
                  </ng-template>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-control nzSpan="18" nzOffset="6">
                  <button
                    [disabled]="!formGroup3.valid"
                    [nzLoading]="service.http.loading"
                    nz-button
                    nzType="primary"
                    (click)="formSubmit()"
                    style="width: 74px"
                  >
                    确认
                  </button>
                </nz-form-control>
              </nz-form-item>
            </form>
          </div>
          <div *ngSwitchCase="2" class="success-card">
            <div class="card-icon">
              <i nz-icon nzType="check" nzTheme="outline" style="color: #fff; font-size: 20px"></i>
            </div>
            <p class="card-title">密码设置成功</p>
            <p class="card-descr">请牢记您的新支付密码，3秒后自动跳转至个人中心...</p>
            <!-- <button
              nz-button
              type="button"
              nzType="primary"
              nzSize="large"
              class="mt-lg"
              style="font-size: 14px"
              [routerLink]="['/passport/login']"
            >
              立即登录
            </button> -->
          </div>
          <div *ngSwitchDefault></div>
        </div>
      </nz-card>
    </div>
  </div>
</nz-card>

<ng-template #suffixTemplateInfo>
  <ng-container *ngIf="count < 1; else intervalTemplate">
    <span class="msg-btn" style="color: #3370ff; cursor: pointer" (click)="getMsgCode()">获取验证码</span>
  </ng-container>
  <ng-template #intervalTemplate>
    <!-- {{ count > 0 ? '请等待' + count + 's' : ('app.register.get-verification-code' | translate) }} -->
    {{ count > 0 ? '请等待' + count + 's' : ('app.register.get-verification-code') }}
  </ng-template>
</ng-template>
<app-captcha #dun [phone]="phone" (done)="captchaDone($event)"></app-captcha>
