<!--
 * @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" style="background: #0B54E0"></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-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>
       
        
        <div class="logindiv" style="margin-top: 20%">
          <span class="sopan">账号</span>
          <van-field @input="noChange"  v-model="loginNo"  :border="false" clearable placeholder="请输入手机号或身份证号"
             />

             <!-- :rules="[{ validator: verifyPhone, message: '请输入正确的手机号码' }]" -->
        
        </div>

          <span class="sopan">密码</span>

        <van-field v-model="password" :type="passwordType" :border="false" 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 :style="{ margin: 0 }"></van-divider> -->

        <!-- <div class="logindiv"> -->

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

        <div style="margin: 16px;">
          <van-button square block type="info" style="background-color: #3672F1;border-radius: 5px;" 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 /^(13[0-9]|14[01,4-9]|15[0-3,5-9]|16[5-7]|17[0135678]|18[0-9]|19[189])\d{8}$/.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 = {
      loginNo: this.loginNo,
      //图形验证码
      imageVerifyKey: this.imageSrcValue,
      //渠道
      loginType: "5",
      //手机验证码
      messCode: this.sms,
      //密码
      credential: this.password
    }
    apiService.general(loginApi.loginSystem, undefined, param, undefined).then((response: RestfulResponse) => {
      console.log(response);
      //发送请求就保存账号
         localStorage.setItem('loginNo', this.loginNo);
        //  debugger;
      if (response.code == Code.SUCCESS.code) {
        Toast(response.msg+"");
        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%;
}


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