<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-04 15:41:06
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-25 09:51:08
 * @FilePath: \mcep-h5\src\views\authentication\LoginView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="loginform">
    <div class="rarle">
      <tatle-bar :tatle="tatleName"></tatle-bar>
    </div>

    <div class="login">
      <van-row  style="padding: 10% 0%;">
        <van-col span="24">
          <p class="polog"><span class="font-size-18-dhc" style="padding: 2% 0%;font-weight: 600;">密码重置</span> </p>
        </van-col>
        <van-col span="24"><span class="font-size-12-dhc" style="font-weight: 400; font-family: 'Arial Normal', 'Arial';
}">请使用注册手机号进行密码重置</span></van-col>
      </van-row>
      <van-form @submit="onSubmit">
        <div class="logindiv">
          <span class="sopan">手机号码</span>
          <van-field v-model="phone" label="+86   |" :border="true" placeholder="请输入手机号" />
          <van-divider />
        </div>

        <div class="logindiv">
          <span class="sopan">新密码</span>
          <van-field v-model="newpassword" type="password" center clearable placeholder="请填写新密码" />
          <!-- <van-divider /> -->
        </div>
       <div class="logindiv">
          <span class="sopan">新密码</span>
          <van-field v-model="restpassword" type="password" center clearable placeholder="请确认新密码" />
          <!-- <van-divider /> -->
        </div>
        <span class="sopan">短信验证码</span>
        <div>

          <van-row >
            <van-col span="16">
              <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
                <!-- <van-divider /> -->
              </van-field>
            </van-col>
            <van-col span="8"><a href="#" @click="getPhonePost()">获取短信验证码</a></van-col>
          </van-row>


        </div>
        <div style="margin: 16px;">
          <van-button square block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Image as VanImage, Toast } from 'vant';
import apiService from "@/services/api.service";
import { Code } from "@/constants/enum/general/code.enum";
import { RestfulResponse } from "@/model/domain/RestfulResponse";
import commonApi from "@/constants/api/login/common.api";


@Component({
  name: "ForgetPassView",
  [VanImage.name]: VanImage,
})
export default class ForgetPassView extends Vue {
  getCmstotal = "获取短信验证码";
  tatleName = "密码重置"
  phone: string = "" //电话
  newpassword: string = ""//密码
  restpassword:string = ""//密码
  imageSrc: string = ""//图形
  sms: string = ""//短信
  timer: any = "";//定时器
  time: number = 60;//计数
  radio: string = "0"
  //获取图形验证码
  _updatePicCode() {
    //请求图形验证码
    this.imageSrc = 'http://localhost:8080/users/sendPicCode?=' + Math.random();
    //this.imageSrc = 'D:\GitClone\H5\mcep-h5\src\assets\images\ZYXTimg.png' + Math.random()
  }
  //计时器
  changeCmstotal() {
    this.getCmstotal = this.time + "s重发验证码";
    this.timer = setInterval(() => {
      this.time--;
      this.getCmstotal = this.time + "s重发验证码";
      if (this.time < 0) {
        clearInterval(this.time)
        this.getCmstotal = "获取短信验证码";
      }
    }, 1000)

  }
getPhonePost(){
 let param={
    phoneCode:this.phone
 }
 apiService.general(commonApi.getPicCode,param,undefined,undefined).then((response: RestfulResponse) => {
       
        if (response.code == Code.SUCCESS.code) {
          Toast('短信发送成功，5分钟有效');
          this.changeCmstotal()
        }else{
           Toast('短信发送失败,请重试');
        }
    })
}
  onSubmit(values: any) {
    console.log('submit', values);
  }
  created() {
    this.$nextTick(() => this._updatePicCode())
  }
}
</script>
<style lang="scss" scoped>
.loginform {
  width: 100%;
  height: 100%;
}

.logindiv {
  line-height: 20px;
}

.van-button {
  border-radius: 6px;
}

.polog {
  margin: 0px;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  font-kerning: normal;
}



.van-col--15 {
  margin-top: 2%;
}

.van-col--24 {
  margin-left: 6%;
}

.forget {}

.sopan {

  margin-top: 5px;
  margin-left: 6%;
}

// .login{
//   margin-top: 20%;
// }
</style>
