<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-04 15:41:06
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-08-18 13:43:29
 * @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 class="" 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>
        <div class="logindiv">
          <span class="sopan">账号</span>
          <van-field @input="noChange"  v-model="loginNo"  :border="true" placeholder="请输入手机号或身份证号"
             />
              
             <!-- :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" -->
        </div>
        <van-divider :style="{ margin: 0 }"></van-divider>

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

        <!-- <van-divider /> -->
        <!-- </div> -->
        <!-- <div class="d-flex ">
          <div class="p-2 mr-auto ">
            <span class="sopan">验证码</span>
            <van-field center clearable v-model="imageSrcValue" placeholder="请输入验证码" />
          </div>
          <div class="p-2 ">
            <img :src="imageSrc" style="max-width: 100px; max-height: 200px;" @click="_updatePicCode()" />
          </div>
        </div> -->

        <!-- <template >
           <img :src="imageSrc" style="max-width: 100px; max-height: 200px;" /> 
        </template> -->
        <div v-show = "showCode"  class="authCode">
          <span class="sopan">短信验证码</span>
          <van-row class="">
            <van-col span="16">
              <van-field v-model="sms" center clearable placeholder="请输入短信验证码">
              
              </van-field>
            </van-col>
            <van-col span="8"><a style="  color:#3672F1; display:inline-block;font-size:12px;line-height:44px; margin-left: 25%;" @click="getPhonePost()">{{ getCmstotal }}</a></van-col>
          </van-row>
              <van-divider :style="{ margin: 0 }"></van-divider>
        </div>

        <div style="margin: 16px;">
          <van-button square block type="info" native-type="submit" @click="loginSystem()">登录</van-button>
        </div>
      </van-form>
      <!-- <div>
        
        <van-row type="flex" justify="center">
          <van-col span="12"><a class="font-size-12-dhc"> 忘记密码</a></van-col>
          <van-col span="12"><a class="font-size-12-dhc"> 用户注册</a></van-col>
        </van-row>
      </div> -->
      <div class="d-flex " style="padding: 0px 10px 0px 10px;color: #3672F1;">
        <div class="p-3 mr-auto "><a class="font-size-12-dhc" @click="forgetspass()"> 忘记密码</a></div>
        <div class="p-3 "><a class="font-size-12-dhc" @click="loginbyid()"> 身份证号登录</a></div>
        <div class="p-3 "><a class="font-size-12-dhc" @click="regeist()"> 用户注册</a></div>
        <div class="p-3 "><a class="font-size-12-dhc" @click="demo()"> demo测试</a></div>

      </div>
    </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 loginApi from "@/constants/api/login/login-mgt.api";
import { Code } from "@/constants/enum/general/code.enum";
import { RestfulResponse } from "@/model/domain/RestfulResponse";
import commonApi from "@/constants/api/login/common.api";
import { sys } from "typescript";
import { log } from "mathjs";


@Component({
  name: "LoginView",
  [VanImage.name]: VanImage,
})
export default class LoginView extends Vue {
  getCmstotal = "获取验证码";
  tatleName = "用户登录";
  loginNo: string = "";//登录账号
  password: string = "";//密码
  imageSrc: any = "";//图形
  imageSrcValue: string = "";//图形验证码
  sms: string = "";//短信验证
  timer: any = "";//定时器
  time: number = 60;//计数
  imageVerifyKey: string = "";//验证码Key
  passwordType = "password";
  showCode = false;
  //方法

  created(){
    if(localStorage.getItem("loginNo")!=null)
    this.loginNo = String(localStorage.getItem("loginNo"));
  }

  noChange(s:string){
    if(this.verifyPhone(s)){
      this.showCode=true;
    }else{
      this.showCode=false;
    }
    //测试 只要内容发生改变就保存
    //  localStorage.setItem('loginNo', this.loginNo);
  }
  switchPasswordType() {
    this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
  }

  //身份证号登录
  loginbyid() {
    this.$router.push({
      name: `LoginByID`
    })

  }
  //手机号
  verifyPhone(s:string) {
     return /^1[3-9]\d{9}$/.test(s) // 返回true或false
  }
  //获取图形验证码
  _updatePicCode() {
    //请求图形验证码
    apiService.general(loginApi.updatePicCode, undefined, undefined, undefined).then((response: RestfulResponse) => {
      if (response.code == Code.SUCCESS.code) {
        this.imageSrc = 'data:image/png;base64,' + response.data.imageVerifyCodeStr.replace(/[\r\n]/g, "");
        this.imageVerifyKey = response.data.imageVerifyKey
      }
    });
  }
  //计时器
  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.loginNo
    }
    apiService.general(commonApi.getPicCode, param, undefined, undefined).then((response: RestfulResponse) => {

      if (response.code == Code.SUCCESS.code) {
        Toast('短信发送成功，5分钟有效');
        this.changeCmstotal()
      } else {
        Toast('短信发送失败,请重试');
      }
    })
  }
  loginSystem() {
    //TODO
    //登录失败刷新
    //验证码失败刷新
    //this._updatePicCode();
    let param = {
      phone: this.loginNo,
      //图形验证码
      imageVerifyKey: this.imageSrcValue,
      //渠道
      loginType: "2",
      //手机验证码
      messCode: this.sms,
      //密码
      passWord: this.password
    }
    apiService.general(loginApi.loginSystem, undefined, param, undefined).then((response: RestfulResponse) => {
      console.log(response);
      //发送请求就保存账号
         localStorage.setItem('loginNo', this.loginNo);
      if (response.code == Code.SUCCESS.code) {
        this.$router.push({
          name: `Mianview`,
          params: {
            data: response.data
          }
        })
        //登录成功后保存账号
         localStorage.setItem('loginNo', this.loginNo);
      } else {
        // this._updatePicCode();
        Toast(response.msg + "");
      }
    });
  }
  // created() {
  //   this._updatePicCode()
  // }
  //忘记密码
  forgetspass() {
    this.$router.push({
      name: `ForgetPass`,
      params: {
        phone: this.loginNo
      }
    });
  }
  regeist() {
    this.$router.push({
      path: `Register`,
    })
  }
  demo() {
    this.$router.push({
      path: `Mianview`,
    })
  }
  demoll() {
    this.$router.push({
      path: `workbench/commonly-used/personal/business-inquiry`,
    })
  }
}

</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>