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

<sf #sf [compact]="true" [ui]="ui" [schema]="schema" [button]="'none'" [formData]="formData">
  <ng-template sf-template="smsVerifyCode" let-me let-ui="ui" let-schema="schema">
    <div class="valid-code">
      <input
        type="text"
        maxlength="6"
        nz-input
        [ngModel]="me.formProperty.value"
        (ngModelChange)="me.setValue($event)"
        placeholder="请输入验证码"
      />
      <button class="btn-code" nz-button nzType="link" [disabled]="count > 0"  (click)="getCaptcha()">
        {{ count > 0 ? '请等待' + count + 's' : '获取验证码' }}
      </button>
    </div>
  </ng-template>
</sf>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
  <button nz-button type="button" nzType="primary" (click)="submitForm()" [disabled]="!sf.valid">下一步</button>
</div>

<nz-modal [(nzVisible)]="isVisibleView"  [nzWidth]="600" [nzFooter]="nzModalFooterview" nzTitle="修改手机号码" (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel('1')">
  <ng-container *nzModalContent>
    <sf #sfView [schema]="schemaView" [ui]="uiView" [compact]="true" [button]="'none'">
      <ng-template sf-template="smsVerifyCode" let-me let-ui="uiView" let-schema="schemaView">
        <div style="position: relative;">
          <input
            type="text"
            maxlength="6"
            nz-input
            [ngModel]="me.formProperty.value"
            (ngModelChange)="me.setValue($event)"
            placeholder="请输入验证码"
          />
          <button style="position: absolute;
          top: 0;
          right: 0;
          z-index: 9;" nz-button nzType="link" [disabled]="count2 > 0"  (click)="getCaptcha2()">
            {{ count2 > 0 ? '请等待' + count2 + 's' : '获取验证码' }}
          </button>
        </div>
      </ng-template>
    </sf>
  </ng-container>
  <ng-template #nzModalFooterview>
    <button nz-button nzType="default" (click)="handleCancel('1')">取消</button>
    <button nz-button nzType="primary" (click)="handleNew()">确定</button>
  </ng-template>
</nz-modal>
<nz-modal [(nzVisible)]="isVisibleOk"  [nzWidth]="600"   (nzOnCancel)="handleCancel('1')" [nzFooter]='null' >
  <ng-container *nzModalContent>
    <nz-result
    nzStatus="success"
    nzTitle="修改成功!"
    nzSubTitle="您已绑定新手机号，以后可用新手机号登录！"
  >
    <div nz-result-extra>
      <button nz-button nzType="primary" (click)="handleCancel('3')">确定</button>
    </div>
  </nz-result>
  </ng-container>
</nz-modal>