<template>
  <div class="LoginIDItem">
    <div class="backIdLogin">
      <i class="el-icon-arrow-left"  @click="backLogin(1)" style="opacity: 1;"></i>
      <span>邮箱登录</span>
    </div>
    <el-form class="login-form">
      <div class="emailNoLogin">
        <el-form-item>
          <el-input v-model="emailNo" placeholder="请输入邮箱" prefix-icon="el-icon-user" :clearable="true" :style="{'--inputColor': emailinfo ? infoRex : infoRexerr}">
          </el-input>
          <p class="errorInfo" v-show="isDisplay">{{ errorInfo }}</p>
        </el-form-item>
        <el-form-item>
          <div class="inputDeep emailCodeWrap">
            <el-input v-model="emailCode" type="emailCode" placeholder="请输入验证码"
              @keydown.enter.native="login" prefix-icon="iconfont icon-dunpaibaoxianrenzheng_o" :style="{'--inputColor': !emailinfo ? infoRex : infoRexerr}"></el-input>
              <p class="errorInfo" v-show="isCodeDisplay">{{ errorCodeInfo }}</p>

            <div class="getemailCode" @click="timeCount" :class="{'send': !isBegainGetCode, 'reget': isBegainGetCode}">
              {{ isBegainGetCode ? `${countTime}s后重新获取` : "发送" }}
            </div>

          </div>
        </el-form-item>

      </div>
      <el-form-item>
        <div class="btnWrap">
          <el-button type="primary" style="width:100%;" @click="login">登 录</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import user from '@/http/api/user'
import { setToken } from '@/utils/auth'
export default {
  name: "LoginForEmail",
  data(){
    return{
      username:"",
      password:"",
      remeberPassWord:false,
      tabIndex:1,
      emailNo:null,
      emailCode:null,
      countTime:60,
      isBegainGetCode:false,
      errorInfo:"",
      errorCodeInfo:"",
      infoRex:"#DCDFE6",
      isDisplay:false,
      isCodeDisplay:false,
      emailinfo:true,
      infoRexerr:"#DCDFE6"
    }
  },
  mounted(){
  },
  methods: {
    login(){
      let data = {
        email:this.emailNo,
        code:this.emailCode
      }
      
      user.emailLogin(data).then((res)=>{
        if(res.code!=200){
          this.errorCodeInfo = res.msg;
          this.isCodeDisplay = true;
          this.infoRex = "#F56C6C";
          this.emailinfo = false;
          return;
        } else {
          setToken(res.data.tokenValue)
          this.$store.dispatch('user/SET_TOKEN', res.data.tokenValue)
          let directUrl = this.$route.query.redirect;
          let url = directUrl?directUrl:'/userInfo';
          this.$router.push({path:url})
          this.$message({
            message:'验证通过，登录成功',
            type: "success"
          });
        }
        console.log(res);
      }).catch(()=>{
        this.$message({
            message: "请求超时，请检查网络连接",
            type: 'error'
          });
      })
      
    },
    changeRemeberPW(e){
      // console.log(e,"e--=")
      if(e){
        localStorage.setItem("userName",this.username);
        localStorage.setItem("userPassWord",this.password);
      }else{
        localStorage.setItem("userName","");
        localStorage.setItem("userPassWord","");
      }
    },
    goHome(){

    },
    loginTabChange(index){
      this.tabIndex = index;
    },
    timeCount(){
      this.isCodeDisplay = false;
      // let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[A-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if(!this.emailNo){
        this.errorInfo = '请输入邮箱号';
        this.infoRex = "#F56C6C";
        this.isDisplay = true;
        this.emailinfo = true;
        return;
      }else if(this.emailNo !=="" && !reg.test(this.emailNo)) {
        this.errorInfo = '该邮箱不存在';
        this.infoRex = "#F56C6C";
        this.isDisplay = true;
        this.emailinfo = true;
        return; 
      }else{
        this.errorInfo = "";
        this.infoRex = "#DCDFE6";
        this.isDisplay = false;
        this.emailinfo = true;
      }
        
      
      if(this.isBegainGetCode)return;
      this.countTime = 60;
      this.isBegainGetCode=true;
      let that = this;
      function countdown() {
        that.countTime = that.countTime -1;
        if (that.countTime <= 0) {
          clearTimeout(timeout);
          that.isBegainGetCode=false;
        } else {
          timeout = setTimeout(countdown, 1000);
        }
      }
      let timeout = setTimeout(countdown, 1000);
      let params = {
        "email":this.emailNo
      }
      user.sendLoginEmailCode(params).then((res)=>{
        if(res.code!=200){
          this.$message({
            message: res.data,
            type: 'warning'
          });
          return;
        }else{
          this.$message({
            message: "已发送验证码",
            type: 'success'
          });
        }
       
      }).catch(()=>{
        this.$message({
            message: "请求超时，请检查网络连接",
            type: 'error'
          });
      })
    },
    backLogin(newStatus){
      this.$emit('update-nav-status', newStatus);
    }
  }
}
</script>
<style lang="scss" scoped>
.LoginIDItem {
  width: 354px;
  padding-bottom: 20px;
  .inputTab {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    div {
      width: 100%;
      height: 40px;
      color: #409EFF;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      border-bottom: 1px solid #DCDFE6;

      &.active {
        color: #409EFF;
        border-bottom: 1px solid #409EFF;
      }
    }
  }

  .itmeWrap {
    display: flex;
  }

  .btnWrap {
    width: 100%;
  }

  .emailCodeWrap {
    position: relative;

    .getemailCode {
      position: absolute;
      right: 10px;
      top: 15px;
      font-size: 12px;
      cursor: pointer;
      border-left: 0.5px solid #C6C6C6;
      height: 25px;
      line-height: 25px;
      padding-left: 5px;
    }
    .send {
      color: #2E64FA; /* 发送字体颜色为蓝色 */
    }
    
    .reget {
      color: #606266;; /* 重新获取字体颜色为灰色 */
    }
  }
  .login-form{
    margin-top: 160px;
    .el-form-item{
      margin-top:20px;
      .errorInfo{
        color: #F56C6C;
        font-size: 12px;
        text-align: left;
      }
      :deep()  .el-input__inner{
        height: 53px;
        line-height: 53px;
        border-radius: 10px;
        border-color: var(--inputColor);
      }
      :deep() .el-form-item__content{
        line-height: 18px;
      }
    }
  }
  .btnWrap {
    height: 53px;
    margin-top: 70px;
    .el-button{
      height:53px;
      border-radius: 10px;
      font-size:16px;
    }
  }
}
.backIdLogin{
  width: 88.57px;
  height: 22px;
  
  span{
    font-size: 16px;
    font-weight: 500;
    line-height: 22.4px;
    text-align: left;
    color: #303133;

  }
  i{
    width: 20.57px;
    height: 18px;
    gap: 0px;
    opacity: 0px;
    cursor: pointer;
  }

}
</style>