<template>
    <div class="LoginIDItem">
      <div class="backIdLogin">
        <i class="el-icon-arrow-left"  @click="backLogin(1)" style="opacity: 1;"></i>
        <span>忘记密码</span>
      </div>
      <el-steps  :active="active" finish-status="success" style="margin-top: 40px;">
        <el-step title="验证信息"></el-step>
        <el-step title="设置密码"></el-step>
        <el-step title="修改完成"></el-step>
      </el-steps> 
      <el-form class="login-form" ref="register" :style="{ marginTop: active == 1 ? '55px' : '68px' }" :rules="rules">
        <div class="emailNoLogin">
          <el-form-item v-show="active==0">
            <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 v-show="active==0">
            <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 v-show="active==1" prop="password">
            <el-input v-model="register.password" :type="showPassword ? 'text' : 'password'" placeholder="请输入新密码" :clearable="true" @keydown.enter.native="login"
            prefix-icon="el-icon-lock" :style="{'--inputColor': emailNewinfo ? infoRex : infoRexerr}"  @input="validatePassword">
            <template #suffix>
              <i
                :class="showPassword ? 'el-icon-view' : 'iconfont icon-ttubiao_hide'"
                @click="togglePasswordVisibility"
              ></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-show="active==1" prop="checkPassword">
          <el-input v-model="register.checkPassword" :type="showCheckPassword ? 'text' : 'password'" placeholder="请再次输入新密码" :clearable="true" @keydown.enter.native="login"
          prefix-icon="el-icon-lock" :style="{'--inputColor': !emailNewinfo ? infoRex : infoRexerr}">
            <template #suffix>
              <i
                :class="showCheckPassword ? 'el-icon-view' : 'iconfont icon-ttubiao_hide'"
                @click="togglecheckPasswordVisibility"
              ></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item v-show="active==1">
          <div style="text-align: left;color:#606266;font-size:12px;">
            <p><i :class="['el-icon-success', passwordValidations.lengthValid ? 'valid' : '']"></i>&nbsp;<span>密码由8-16位数字、字母或符号组成</span></p>
            <p style="margin-top: 5px;"><i :class="['el-icon-success', passwordValidations.complexityValid ? 'valid' : '']"></i>&nbsp;<span>至少包含大写字母、小写字母、数字和特殊符号中的至少三种组合</span></p>
          </div>
        </el-form-item>
        <el-form-item v-show="active==2" style="margin-top: 138px;">
          <div style="font-size:16px;">恭喜你，密码修改成功！</div>
        </el-form-item>
        <el-form-item>
          <div class="btnWrap" :style="{ marginTop: computedMarginTop }">
            <el-button type="primary" style="width:100%;" @click="nextInfo">{{ active==2 ? "立即登录":"下一步" }}</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: "LoginForID",
    data(){
      // 密码验证
      let validatePass = (rule, value,callback) =>{
        if(this.register.password == "" || this.register.password == undefined){
          this.infoRex = "#F56C6C";
          this.emailNewinfo = true;
          callback(new Error('请输入密码'));
          // callback()
        }else{
          if(this.register.checkPassword !=""){
            this.$refs.register.validateField('checkPassword');
          }
          callback()
        }
      }
      // 密码再次验证
      let validateCheckPass = (rule, value,callback) =>{
        if(this.register.checkPassword == "" || this.register.checkPassword == undefined){
          this.infoRex = "#F56C6C";
          this.emailNewinfo = false;
          callback(new Error('请再次输入密码'));
          // callback()
        }else{
          if(this.register.checkPassword !=this.register.password){
            this.infoRex = "#F56C6C";
            this.emailNewinfo = false;
            callback(new Error('两次输入密码不一致！'));
            // callback()
          } else{
            this.infoRex = "#DCDFE6";
            callback();
          }
        }
      }
      return{
        emailNo:null,
        emailCode:null,
        countTime:60,
        isBegainGetCode:false,
        errorInfo:"",
        emailNewinfo:"",
        errorCodeInfo:"",
        infoRex:"#DCDFE6",
        isDisplay:false,
        isCodeDisplay:false,
        emailinfo:true,
        infoRexerr:"#DCDFE6",
        active:0,
        showPassword:false,
        showCheckPassword:false,
        register:{
          password:"",
          checkPassword:""
        },
        rules:{
          password:[{validator: validatePass, trigger: "blur"}],
          checkPassword:[{validator: validateCheckPass, trigger: "blur"}],
        },
        passwordValidations: {
          lengthValid: false,
          complexityValid: false,
        },
      }
    },
    mounted(){
  
    },
    computed: {
      computedMarginTop() {
        if(this.active == 1 ){
          return '16px'
        }else if(this.active == 2){
          return '105px'
        }else{
          return '70px'
        }
      }
    },
    methods: {
      nextInfo(){
          if(this.active == 0){
            let data = {
              email:this.emailNo,
              code:this.emailCode
            }
            user.checkEmailCode(data).then((res)=>{
              if(res.code!=200){
                this.errorCodeInfo = res.msg;
                this.isCodeDisplay = true;
                this.infoRex = "#F56C6C";
                this.emailinfo = false;
                return;
              } else {
                this.active=1;
              }
            }).catch(()=>{
              this.$message({
                  message: "请求超时，请检查网络连接",
                  type: 'error'
                });
            })
            // this.active++
          }else if(this.active == 1){
            if(!this.passwordValidations.complexityValid){
              this.$message({
                  message: "密码中至少包含大写字母、小写字母、数字和特殊符号中的至少三种组合",
                  type: 'warning'
                });
                return;
            }
            if(!this.passwordValidations.lengthValid){
              this.$message({
                  message: "密码由8-16位数字、字母或符号组成",
                  type: 'warning'
                });
                return;
            }
            let data = {
              email:this.emailNo,
              newPassword:this.register.password,
              confirmNewPassword:this.register.checkPassword,
              code:this.emailCode
            }
            user.updateEmailCodePassword(data).then((res)=>{
              if(res.code!=200){
                this.errorCodeInfo = res.msg;
                this.isCodeDisplay = true;
                this.infoRex = "#F56C6C";
                this.emailinfo = false;
                return;
              } else {
                this.active=2;
              }
            }).catch(()=>{
              this.$message({
                  message: "请求超时，请检查网络连接",
                  type: 'error'
                });
            })
          }else if(this.active == 2){
            this.$emit('update-nav-status', 1);
          }else{
            if (this.active++ == 2) return this.active = 2;
          }
      },
      changeRemeberPW(e){
       
      },
      goHome(){
  
      },
      timeCount(){
        this.isCodeDisplay = false;
        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.sendReSetPwdEmailCode(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);
      },
      togglePasswordVisibility(){
        this.showPassword = !this.showPassword;
      },
      togglecheckPasswordVisibility(){
        this.showCheckPassword = !this.showCheckPassword;
      },
      validatePassword() {
        let lengthRegex = /.{8,16}/;
        let upperCaseRegex = /[A-Z]/;
        let lowerCaseRegex = /[a-z]/;
        let numberRegex = /[0-9]/;
        let specialCharRegex = /[!@#$%^&*(),.?":{}|<>]/;

        let lengthValid = lengthRegex.test(this.register.password);
        let upperCaseValid = upperCaseRegex.test(this.register.password);
        let lowerCaseValid = lowerCaseRegex.test(this.register.password);
        let numberValid = numberRegex.test(this.register.password);
        let specialCharValid = specialCharRegex.test(this.register.password);

        this.passwordValidations.lengthValid = lengthValid;

        let validCount = 0;
        if (upperCaseValid) validCount++;
        if (lowerCaseValid) validCount++;
        if (numberValid) validCount++;
        if (specialCharValid) validCount++;

        this.passwordValidations.complexityValid = validCount >= 3;
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  .LoginIDItem {
    width: 354px;
    margin: 0 auto;
    .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: 100px;
      .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;
      }
    }
    :deep() .el-steps .el-step .is-process .el-step__icon  {
      background-color: #2E64FA; /* 修改图标背景色 */
      border-color: #2E64FA;     /* 修改图标边框色 */
      color: #fff;               /* 修改图标文字色 */
    }
    :deep() .el-steps .el-step .is-process .el-step__line {
      background-color: #2E64FA; /* 修改连接线颜色 */
    }
    :deep() .el-steps .el-step .el-step__title.is-process {
      color: #2E64FA; /* 修改标题颜色 */
    }
    :deep() .el-steps .el-step .is-success .el-step__icon  {
      background-color: #15BC83; /* 修改图标背景色 */
      border-color: #15BC83;     /* 修改图标边框色 */
      color: #fff;               /* 修改图标文字色 */
    }
    :deep() .el-steps .el-step .is-success .el-step__line {
      background-color: #15BC83; /* 修改连接线颜色 */
    }
    :deep() .el-steps .el-step .el-step__title.is-success {
      color: #15BC83; /* 修改标题颜色 */
    }
    /* 确保图标居中 */
    :deep() .el-steps .el-step .el-step__icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    :deep()  .el-input__suffix{
      line-height: 53px;
    }
  }
  .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;
    }
  
  }
  .valid {
    color: #15BC83;
  }
  </style>