<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2021-11-29 13:50:46
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-01-18 17:14:50
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\account\\components\\edit-password\\edit-password.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->

<nz-alert style="margin-bottom: 15px;" nzType="info" nzMessage="密码为字母和数字组成的8-16个字符，支持符号“_”和“-”。" nzShowIcon></nz-alert>
<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label nzRequired>新密码</nz-form-label>
    <nz-form-control nzErrorTip="密码格式错误">
      <nz-input-group [nzSuffix]="suffixTemplate"  name='passWord'>
        <input
          [type]="passwordVisible ? 'text' : 'password'"
          nz-input
          placeholder="请输入新密码"
          [(ngModel)]="password"
          formControlName="passWord"
        />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzRequired>确认新密码</nz-form-label>
    <nz-form-control nzErrorTip="密码不一致">
      <nz-input-group [nzSuffix]="suffixTemplate2"   name='passWordTo'>
        <input
          [type]="passwordVisible2 ? 'text' : 'password'"
          nz-input
          formControlName="passWordTo"
          placeholder="请确认输入新密码"
          [(ngModel)]="password2"
        />
      </nz-input-group>
      <ng-template #suffixTemplate2>
        <i nz-icon [nzType]="passwordVisible2 ? 'eye-invisible' : 'eye'" (click)="passwordVisible2 = !passwordVisible2"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzRequired>手机号</nz-form-label>
   {{this.record?.phone}}
  </nz-form-item> 
   <nz-form-item>
    <nz-form-label
      nzFor="smsVerifyCode"
      nzRequired
      [nzTooltipIcon]="captchaTooltipIcon"
    >
      验证码
    </nz-form-label>
    <nz-form-control
      [nzSm]="14"
      [nzXs]="24"
    >
      <div nz-row [nzGutter]="8">
        <div nz-col [nzSpan]="12">
          <input nz-input [maxlength]="6" formControlName="smsVerifyCode" id="smsVerifyCode" />
        </div>
        <div nz-col [nzSpan]="12" style="display: flex; align-items: center;">
          <button nz-button *ngIf="count < 1;" (click)="getCaptcha($event)">获取验证码</button>
          <span *ngIf="count > 1;">{{ count > 0 ? '请等待' + count + 's' : '获取验证码' }}</span>
        </div>
      </div>
    </nz-form-control>
  </nz-form-item>
</form>
<div *nzModalFooter>
  <button nz-button nzType="default" (click)="destroyModal()">取消</button>
  <button nz-button nzType="primary" (click)="save()" >确定</button>
</div>


<nz-modal [(nzVisible)]="isVisibleView"  [nzWidth]="600"   (nzOnCancel)="handleCancel()" [nzFooter]='null' >
  <ng-container *nzModalContent>
    <nz-result
    nzStatus="success"
    nzTitle="密码设置成功!"
    nzSubTitle="请牢记您的新密码，修改密码后需重新登录，3秒后自动跳转至登录页..."
  >
    <div nz-result-extra>
      <button nz-button nzType="primary" (click)="handleOK()">重新登录</button>
    </div>
  </nz-result>
  </ng-container>
</nz-modal>
