<template>
    <div class="LoginIDItem">
      <!-- <el-steps  :active="active" finish-status="success" style="margin-top: 40px;">
        <el-step title="验证信息"></el-step>
        <el-step title="绑定完成"></el-step>
      </el-steps>  -->
      <el-form class="login-form" ref="register" :style="{ marginTop: active == 1 ? '55px' : '30px' }">
        <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" style="margin-top: 138px;">
          <div style="font-size:16px;text-align:center;">恭喜你，邮箱绑定成功！</div>
        </el-form-item>
        <el-form-item>
          <div class="btnWrap" :style="{ marginTop: computedMarginTop }">
            <el-button type="primary" style="width:100%;" @click="nextInfo">{{ active==1 ? "完成":"绑定邮箱" }}</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: "bindEmail",
    props: {
      rowsData: {
        type: Object,
        required: true
      }
    },
    data(){
      return{
        emailNo:null,
        emailCode:null,
        countTime:60,
        isBegainGetCode:false,
        errorInfo:"",
        errorCodeInfo:"",
        infoRex:"#DCDFE6",
        isDisplay:false,
        isCodeDisplay:false,
        emailinfo:true,
        infoRexerr:"#DCDFE6",
        active:0,
      }
    },
    mounted(){
  
    },
    computed: {
      computedMarginTop() {
        if(this.active == 0 ){
          return '16px'
        }else if(this.active == 1){
          return '105px'
        }else{
          return '70px'
        }
      }
    },
    methods: {
      nextInfo(){
          if(this.active == 0){
            let data = {
              email:this.emailNo,
              code:this.emailCode
            }
            this.$api.school.bindCurrentUserEmail(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){
            this.$emit('update-showEmailSuccess', false);
            location.reload();
          }else{
            if (this.active++ == 1) return this.active = 1;
          }
      },
      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,
          "userId":this.rowsData.id,
          }
          this.$api.user.sendBindEmailCode(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'
            });
        })
      },
    }
  }
  </script>
  <style lang="scss" scoped>
  .LoginIDItem {
    padding: 20px 40px;
    .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: 50px;
        top: 15px;
        font-size: 16px;
        cursor: pointer;
        border-left: 0.5px solid #C6C6C6;
        height: 25px;
        line-height: 25px;
        padding-left: 10px;
      }
      .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;
    }
  }
  .valid {
    color: #15BC83;
  }
  :deep() .el-input__icon.el-icon-user,:deep() .el-input__icon.iconfont.icon-dunpaibaoxianrenzheng_o,:deep() .el-input__suffix i,:deep() .el-input__inner{
    font-size:16px;
  }
  </style>