<!--
 * @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" style="background: #0B54E0"></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-row type="flex" justify="center" style=" margin-top: 60px;">

            <van-col span="24"> 
                  <div><img style=" width: 96%;" src="../../assets/images/hljnx.png" alt="" /></div>
            </van-col>         
        </van-row>
      <van-form @submit="onSubmit">
        <div class="logindiv" style="margin-top :20%;">
          <span class="sopan">账号</span>
          <van-field

            v-model="loginNo"
            :border="true"
            placeholder="请输入手机号码"
          />

        </div>
        <!-- <van-divider :style="{ margin: 0 }"></van-divider> -->


        <div class="logindiv">
          <span class="sopan">新密码</span>
          <van-field
            v-model="newpassword"
            :type="passwordType"
            clickable
            center
            clearable
            placeholder="请填写新密码"

          >
            <template slot="right-icon">
              <span class="solts" @click="switchPasswordType">
                <van-icon name="closed-eye" v-if="passwordType === 'password'" />
                <van-icon name="eye" v-else/>
              </span>
            </template>
          </van-field>
          <!-- <van-divider /> -->
        </div>
        <!-- <van-divider :style="{ margin: 0 }"></van-divider> -->
        <div class="logindiv">
          <span class="sopan">确认密码</span>
          <van-field
            v-model="restpassword"
            :type="passwordTypeNext"
            clickable
            center
            clearable
            placeholder="请确认新密码"

          >
          <template slot="right-icon">
              <span class="solts" @click="switchPasswordTypeNext">
                <van-icon name="closed-eye" v-if="passwordTypeNext === 'password'" />
                <van-icon name="eye" v-else/>
              </span>
            </template>
          </van-field>
          <!-- <van-divider /> -->
        </div>
        <!-- <van-divider :style="{ margin: 0 }"></van-divider> -->
        <div>
         <span class="sopan">短信验证码</span>
          <van-row style="padding: 10px 6%;">
            <van-col span="16">
              <van-field  style=" border-bottom: 0px solid #f5f5f5;   padding: 0 0%;"   v-model="sms" center clearable placeholder="请输入短信验证码">

              </van-field>
            </van-col>
            <van-col span="8" style="height:24px; border-bottom: 1px solid #f5f5f5;" ><a style="  color:#3672F1; display:inline-block;font-size:12px;line-height:24px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
          </van-row>
        </div>
        <!-- <van-divider :style="{ margin: 0 }"></van-divider> -->
        <div style="margin: 16px">
          <van-button square block type="info" native-type="submit" style="background-color: #3672F1;border-radius: 5px;"
            >确定</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";
import forgetPassAPI from "@/constants/api/login/forget-pass-mgt";

@Component({
  name: "ForgetPassView",
  [VanImage.name]: VanImage,
})
export default class ForgetPassView extends Vue {
  smsCss=""
  password = "password";
  passwordType="password"
  passwordTypeNext="password"
  getCmstotal = "获取验证码";
  tatleName = "密码重置";
  loginNo: string = ""; //登录账号
  newpassword: string = ""; //密码
  restpassword: string = ""; //密码
  imageSrc: string = ""; //图形
  sms: string = ""; //短信
  timer: any = ""; //定时器
  time: number = 60; //计数
  radio: string = "0";
  
  // showCode =false;

  //  noChange(s:string){
  //   if(this.verifyPhone(s)){
  //     this.showCode=true;
  //   }else{
  //     this.showCode=false;
  //   }
  // }
  //手机号
  verifyPhone(s:string) {
    return /[1][3,4,5,7,8][0-9]{9}/.test(s) // 返回true或false
  }

  //获取图形验证码
  _updatePicCode() {
    //请求图形验证码
    this.imageSrc = "http://localhost:8080/users/sendPicCode?=" + Math.random();
    //this.imageSrc = 'D:\GitClone\H5\mcep-h5\src\assets\images\ZYXTimg.png' + Math.random()
  }
  //方法
   switchPasswordType() {
      this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
    }
  switchPasswordTypeNext() {
    this.passwordTypeNext = this.passwordTypeNext === 'password' ? 'text' : 'password'
  }
  //计时器
  changeCmstotal() {
    localStorage.setItem("smsTime",String(this.time))
    this.getCmstotal = this.time + "s重发验证码";
       this.timer = setInterval(() => {
         
      this.time--;
      //倒计时存入localStorage 防止刷新页面 丢失
      localStorage.setItem("smsTime",String(this.time))
      this.getCmstotal = this.time + "s重发验证码";
      if (this.time < 0) {
        localStorage.removeItem("smsTime");
        this.smsCss=""
        clearInterval(this.timer)
        this.getCmstotal = "获取验证码";
      }
    }, 1000)

    
   

  }
  getPhonePost() {
    let param = {
      phoneCode: this.loginNo,
    };
         //禁用 超链接并设置倒计时时间
    this.smsCss="smsCss"
    this.time=60;
    apiService
      .general(commonApi.getPicCode, param, undefined, undefined)
      .then((response: RestfulResponse) => {
        if (response.code == Code.SUCCESS.code) {
          Toast("短信发送成功，5分钟有效");
          this.changeCmstotal();
        } else {
          Toast(String(response.msg));
          this.getCmstotal = "获取验证码";
         //取消不可点击
        this.smsCss=""
        //删除缓存
        localStorage.removeItem("smsTime")
        //删除定时任务
       clearInterval(this.timer)
        }
      });
  }
  onSubmit(values: any) {
      let param = {
       phone:this.loginNo ,
       newPassword: this.newpassword,
       phoneVerifyCode:this.sms ,
       requirePassword:this.restpassword 
      };
      apiService
     .general(forgetPassAPI.ForgetPass, undefined, param, undefined)
      .then((response: RestfulResponse) => {
           if (response.code == Code.SUCCESS.code) {
          this.$router.replace({
            path: `/login`,
            params: {
              data: response.data
            }
          })
        }
      });
  }
  created() {
    this.$nextTick(() => this._updatePicCode());
      //获取验证码剩余时间，并启动倒计时 ,禁用超链接
    if(localStorage.getItem("smsTime")!=null){

       this.time =Number(localStorage.getItem("smsTime"));
       this.changeCmstotal();
      this.smsCss="smsCss"
       
    }
  }
}
</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%;
}

 ::v-deep  .van-field__value {
    overflow: visible;
    border-bottom: 1px solid #f5f5f5;
}
::v-deep .van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 6%;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
 
}

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