<template>
  <div class="loginPage">
    <section class="mobileMain" v-if="$isMobile">
      <header class="headerBox">
        <img
          @click="handelJump(`/`)"
          src="../../assets/mobile/login/LOGO.svg"
          alt="logo"
        />
        <span class="title">{{ $t(`user.resetPassword`) }}</span>
        <span></span>
      </header>
      <div class="imgTop">
        <img
          src="../../assets/mobile/login/logointop.svg"
          alt="reset password"
          loading="lazy"
        />
      </div>
      <section class="formInput">
        <el-form
          :model="loginForm"
          status-icon
          :rules="loginRules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="email">
            <el-input
              prefix-icon="el-icon-user"
              v-model="loginForm.email"
              @input="handleEmailInput($event)"
              autocomplete="off"
              :placeholder="$t('user.Account')"
            ></el-input>
          </el-form-item>
          <el-form-item prop="resetPwdCode">
            <div class="verificationCode">
              <el-input
                type="text"
                prefix-icon="el-icon-chat-line-square"
                v-model="loginForm.resetPwdCode"
                @input="handleCodeInput($event)"
                autocomplete="off"
                :placeholder="$t(`user.verificationCode`)"
              ></el-input>
              <el-button
                class="codeBtn"
                :loading="securityLoading"
                :disabled="btnDisabled"
                @click="handelCode"
                ><span v-if="countDownTime < 60 && countDownTime > 0">{{
                  countDownTime
                }}</span
                >{{ $t(bthText) }}</el-button
              >
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              @input="handlePasswordInput($event)"
              prefix-icon="el-icon-unlock"
              autocomplete="off"
              showPassword
              :placeholder="$t('user.password')"
            ></el-input>
            <p class="remind" :title="$t(`user.passwordPrompt`)">
              {{ $t(`user.passwordPrompt`) }}
            </p>
          </el-form-item>
          <el-form-item prop="newPassword">
            <el-input
              type="password"
              v-model="loginForm.newPassword"
              @input="handleNewPasswordInput($event)"
              prefix-icon="el-icon-unlock"
              autocomplete="off"
              showPassword
              :placeholder="$t('user.newPassword')"
            ></el-input>
        
          </el-form-item>
          <!-- <el-form-item prop="gCode" v-if="isItBound">
          <el-input 
           
            v-model="loginForm.gCode"
               prefix-icon="el-icon-unlock"
            autocomplete="off"
          
            :placeholder="$t('personal.oneTimePassword')"
          ></el-input>
        
        </el-form-item>
    -->

          <div class="registerBox">
            <span style="color: #661fff" @click="handelJump(`login`)">{{
              $t("user.returnToLogin")
            }}</span>
          </div>
          <el-form-item>
            <el-button
              style="
                width: 100%;
                background: #661fff;
                color: aliceblue;
                margin-top: 6%;
              "
              :loading="loginLoading"
              @click="submitForm('ruleForm')"
              >{{ $t("user.changePassword") }}</el-button
            >
            <div style="text-align: left">
              <el-radio @input="handelRadio" v-model="radio" label="zh"
                >简体中文</el-radio
              >
              <el-radio @input="handelRadio" v-model="radio" label="en"
                >English</el-radio
              >
            </div>
          </el-form-item>
        </el-form>
      </section>
    </section>

    <section class="loginModular" v-else>
      <div class="leftBox">
        <img
          class="logo"
          src="../../assets/img/WILOGO.png"
          alt="logo"
          @click="handleClick"
        />
        <img src="../../assets/img/logicon.png" alt="reset password" />
      </div>

      <div class="loginBox">
        <div class="closeBox" @click="handleClick">
          <i class="iconfont icon-guanbi1 close"></i>
        </div>

        <el-form
          :model="loginForm"
          status-icon
          :rules="loginRules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item>
            <p class="loginTitle">{{ $t(`user.resetPassword`) }}</p>
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              prefix-icon="el-icon-user"
              v-model="loginForm.email"
              @input="handleEmailInput($event)"
              autocomplete="off"
              :placeholder="$t('user.Account')"
            ></el-input>
          </el-form-item>
          <el-form-item prop="resetPwdCode">
            <div class="verificationCode">
              <el-input
                type="text"
                prefix-icon="el-icon-chat-line-square"
                v-model="loginForm.resetPwdCode"
                @input="handleCodeInput($event)"
                autocomplete="off"
                :placeholder="$t(`user.verificationCode`)"
              ></el-input>
              <el-button
                class="codeBtn"
                :loading="securityLoading"
                :disabled="btnDisabled"
                @click="handelCode"
                ><span v-if="countDownTime < 60 && countDownTime > 0">{{
                  countDownTime
                }}</span
                >{{ $t(bthText) }}</el-button
              >
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              @input="handlePasswordInput($event)"
              prefix-icon="el-icon-unlock"
              autocomplete="off"
              showPassword
              :placeholder="$t('user.password')"
            ></el-input>
            <p class="remind" :title="$t(`user.passwordPrompt`)">
              {{ $t(`user.passwordPrompt`) }}
            </p>
          </el-form-item>
          <el-form-item prop="newPassword">
            <el-input
              type="password"
              v-model="loginForm.newPassword"
              @input="handleNewPasswordInput($event)"
              prefix-icon="el-icon-unlock"
              autocomplete="off"
              showPassword
              :placeholder="$t('user.newPassword')"
            ></el-input>
          
          </el-form-item>
          <!-- <el-form-item prop="gCode" v-if="isItBound">
          <el-input 
           
            v-model="loginForm.gCode"
               prefix-icon="el-icon-unlock"
            autocomplete="off"
          
            :placeholder="$t('personal.oneTimePassword')"
          ></el-input>
        
        </el-form-item>
    -->

          <div class="registerBox">
            <span @click="handelJump(`login`)">{{
              $t("user.returnToLogin")
            }}</span>
          </div>
          <el-form-item>
            <el-button
              style="
                width: 100%;
                background: #661fff;
                color: aliceblue;
                margin-top: 6%;
              "
              :loading="loginLoading"
              @click="submitForm('ruleForm')"
              >{{ $t("user.changePassword") }}</el-button
            >
            <div style="text-align: left">
              <el-radio @input="handelRadio" v-model="radio" label="zh"
                >简体中文</el-radio
              >
              <el-radio @input="handelRadio" v-model="radio" label="en"
                >English</el-radio
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script>
import { getResetPwd, getResetPwdCode } from "../../api/login";
import { encryption } from "../../utils/fun";
import { getEmailIfBind } from "../../api/personalCenter";
import { Debounce,throttle }from "../../utils/publicMethods";
import { validatePassword, formatPasswordErrors } from "../../utils/passwordValidator";
export default {
  data() {
    return {
      loginForm: {
        email: "",
        password: "",
        resetPwdCode: "",
        newPassword: "",
        // gCode:"",
      },
      loginRules: {
        email: [
          {
            required: true,
            trigger: "blur",
            message: this.$t(`user.inputEmail`),
            type: "email",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: this.$t(`user.inputPassword`),
          },
        ],
        newPassword: [
          {
            required: true,
            trigger: "blur",
            message: this.$t(`user.confirmPassword2`),
          },
        ],
        resetPwdCode: [
          {
            required: true,
            trigger: "change",
            message: this.$t(`user.inputCode`),
          },
        ],
        gCode: [
          {
            required: true,
            trigger: "change",
            message: this.$t(`personal.gCode`),
          },
        ],
      },
      radio: `zh`,
      btnDisabled: false,
      bthText: "user.obtainVerificationCode",
      time: "",
      loginLoading: false,
      accountList: [],
      newPassword: "",
      securityLoading: false,
      isItBound: false,
      countDownTime: 60,
      timer: null,
      lang: "zh",
    };
  },
  computed: {
    countDown() {
      const minutes = Math.floor(this.countDownTime / 60);
      const seconds = this.countDownTime % 60;
      const m = minutes < 10 ? "0" + minutes : minutes;
      const s = seconds < 10 ? "0" + seconds : seconds;
      return `${s}`;
      // return`${s}`
    },
  },
  created() {
    if (window.sessionStorage.getItem("Reset_time")) {
      this.countDownTime = Number(window.sessionStorage.getItem("Reset_time"));
      this.startCountDown();
      this.btnDisabled = true;
      this.bthText = `user.again`;
    }
  },

  watch: {
    "$i18n.locale": function () {
      this.translate();
    },
  },
  mounted() {
    this.lang = this.$i18n.locale;
    this.radio = localStorage.getItem("lang")
      ? localStorage.getItem("lang")
      : "en";
  },
  methods: {
    translate() {
      this.loginRules = {
        email: [
          {
            required: true,
            type: "email",
            trigger: "blur",
            message: this.$t(`user.inputEmail`),
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: this.$t(`user.inputPassword`),
          },
        ],
        newPassword: [
          {
            required: true,
            trigger: "blur",
            message: this.$t(`user.confirmPassword2`),
          },
        ],
        resetPwdCode: [
          {
            required: true,
            trigger: "change",
            message: this.$t(`user.inputCode`),
          },
        ],
        gCode: [
          {
            required: true,
            trigger: "change",
            message: this.$t(`personal.gCode`),
          },
        ],
      };
    },

    async fetchIfBind(params) {
      this.securityLoading = true;
      const data = await getEmailIfBind(params);
      if (data && data.code === 200) {
        if (data.data) {
          this.isItBound = true;
        } else if (!data.data) {
          this.isItBound = false;
        }
        this.fetchResetPwdCode({ email: this.loginForm.email });
        this.time = 60;
        let timer = setInterval(() => {
          if (this.time) {
            this.time--;
            this.btnDisabled = true;
            // this.bthText=this.time+`s后重新获取`
            this.bthText = `user.again`;
          } else {
            this.btnDisabled = false;
            this.bthText = `user.obtainVerificationCode`;
            this.time = "";
            clearTimeout(timer);
          }
        }, 1000);
      }
      this.securityLoading = false;
    },
    async fetchResetPwd(params) {
      const data = await getResetPwd(params);

      if (data && data.code == 200) {
        // this.$addStorageEvent(1,`miningAccountList`,JSON.stringify(data.data))
        this.$message({
          message: this.$t(`user.modifiedSuccessfully`),
          type: "success",
          showClose: true,
        });
        for (const key in this.loginForm) {//清空表单
          this.loginForm[key] = "";
        }

        this.$router.push(`/${this.lang}/login`);
      }
    },
    async fetchResetPwdCode(params) {
      const data = await getResetPwdCode(params);
      if (data && data.code == 200) {
        this.$message({
          message: this.$t(`user.codeSuccess`),
          type: "success",
          showClose: true,
        });
      }
    },
    handelCode() {
      //邮箱格式验证
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
      let isMailbox = emailRegex.test(this.loginForm.email);

      if (!this.loginForm.email || !isMailbox) {
        this.$message({
          message: this.$t(`user.emailVerification`),
          type: "error",
          customClass: "messageClass",
          showClose: true,
        });
        return;
      }
      // this.fetchIfBind({email:this.loginForm.email})
      this.fetchResetPwdCode({ email: this.loginForm.email });
      if (window.sessionStorage.getItem("Reset_time") == null) {
        this.startCountDown();
      } else {
        this.countDownTime = Number(
          window.sessionStorage.getItem("Reset_time")
        );
        this.startCountDown();
      }

      // this.time = 60;
      //   let timer = setInterval(()=>{
      //     if (this.time) {
      //       this.time--
      //       this.btnDisabled = true;
      //       // this.bthText=this.time+`s后重新获取`
      //       this.bthText=`user.again`
      //     }else {
      //       this.btnDisabled = false;
      //       this.bthText=`user.obtainVerificationCode`
      //       this.time = "";
      //       clearTimeout(timer)
      //     }
      //   },1000)
    },
    startCountDown() {
      this.timer = setInterval(() => {
        if (this.countDownTime <= 1) {
          //当监测到countDownTime为0时,清除计数器并且移除sessionStorage,然后执行提交试卷逻辑
          clearInterval(this.timer);
          sessionStorage.removeItem("Reset_time");

          this.countDownTime = 60;
          this.btnDisabled = false;
          this.bthText = `user.obtainVerificationCode`;
        } else if (this.countDownTime > 0) {
          //每秒让countDownTime -1秒,并设置到sessionStorage中
          this.countDownTime--;
          this.btnDisabled = true;
          this.bthText = `user.again`;
          window.sessionStorage.setItem("Reset_time", this.countDownTime);
        }
      }, 1000);
    },

    handelJump(url) {
      const cleanPath = url.startsWith("/") ? url.slice(1) : url;
      this.$router.push(`/${this.lang}/${cleanPath}`);
    },
    handelRadio(val) {
      // 保存旧的语言值
      const oldLang = this.lang;

      // 更新语言设置
      this.lang = val;
      this.$i18n.locale = val;
      localStorage.setItem("lang", val);

      // 更新当前路由的语言部分
      const currentPath = this.$route.path;
      const newPath = currentPath.replace(`/${oldLang}`, `/${val}`);

      // 保持查询参数
      this.$router
        .push({
          path: newPath,
          query: this.$route.query,
        })
        .catch((err) => {
          if (err.name !== "NavigationDuplicated") {
            console.error("Navigation failed:", err);
          }
        });
    },

    submitForm:Debounce(function(){
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //去空格
          this.loginForm.userName = this.loginForm.email.trim();
          this.loginForm.password = this.loginForm.password.trim();
          this.loginForm.newPassword = this.loginForm.newPassword.trim();
          if (this.loginForm.password !== this.loginForm.newPassword) {
            this.$message({
              message: this.$t(`user.confirmPassword2`),
              type: "error",
              customClass: "messageClass",
              showClose: true,
            });

            return;
          }
          //邮箱格式验证
          const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;

          let isMailbox = emailRegex.test(this.loginForm.email);
          if (!isMailbox) {
            this.$message({
              message: this.$t(`user.emailVerification`),
              type: "error",
              customClass: "messageClass",
              showClose: true,
            });

            return;

            //用户名规则1.长度限制：3<=用户名<=16; 字符限制：仅允许使用字母、数字、下划线 用户名必须以字母开头
            // const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/; // 正则表达式
            // const isValid = regex.test(this.loginForm.email);
            // if (!isValid) {
            //   // 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
            //   this.$message({
            //     message: this.$t(`user.accountReminder`),
            //     type: "error",
            //     customClass: "messageClass",
            //     showClose: true
            //   });

            //   return;
            // }
          }

          // 密码验证 - 使用优化后的详细校验逻辑
          const validation = validatePassword(this.loginForm.password);
          if (!validation.valid) {
            // 生成友好的逐项错误提示
            const errorMessage = formatPasswordErrors(validation.errors, this.$t.bind(this));
            this.$message({
              message: errorMessage,
              type: "error",
              showClose: true,
              duration: 5000, // 延长显示时间,因为错误信息可能有多条
            });

            return;
          }
          // ,gCode: this.loginForm.gCode,
          let obj = {
            email: this.loginForm.email,
            password: this.loginForm.password,
            resetPwdCode: this.loginForm.resetPwdCode,
          };
          //加密
          // const form = { ...this.loginForm };
          // form.password = encryption(this.loginForm.password);
          const form = { ...obj };
          form.password = encryption(obj.password);
          this.fetchResetPwd(form);
        }
      });
    },200),
    // submitForm() {
    //   this.$refs.ruleForm.validate((valid) => {
    //     if (valid) {
    //       //去空格
    //       this.loginForm.userName = this.loginForm.email.trim();
    //       this.loginForm.password = this.loginForm.password.trim();
    //       this.loginForm.newPassword = this.loginForm.newPassword.trim();
    //       if (this.loginForm.password !== this.loginForm.newPassword) {
    //         this.$message({
    //           message: this.$t(`user.confirmPassword2`),
    //           type: "error",
    //           customClass: "messageClass",
    //           showClose: true,
    //         });

    //         return;
    //       }
    //       //邮箱格式验证
    //       const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;

    //       let isMailbox = emailRegex.test(this.loginForm.email);
    //       if (!isMailbox) {
    //         this.$message({
    //           message: this.$t(`user.emailVerification`),
    //           type: "error",
    //           customClass: "messageClass",
    //           showClose: true,
    //         });

    //         return;

    //         //用户名规则1.长度限制：3<=用户名<=16; 字符限制：仅允许使用字母、数字、下划线 用户名必须以字母开头
    //         // const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/; // 正则表达式
    //         // const isValid = regex.test(this.loginForm.email);
    //         // if (!isValid) {
    //         //   // 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
    //         //   this.$message({
    //         //     message: this.$t(`user.accountReminder`),
    //         //     type: "error",
    //         //     customClass: "messageClass",
    //         //     showClose: true
    //         //   });

    //         //   return;
    //         // }
    //       }

    //       // 密码验证 8<=密码<=32 包含大小写字母、数字和特殊字符（！@#￥%……&*）
    //       const regexPassword =
    //         /^(?!.*[\u4e00-\u9fa5])(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/; // 正则表达式
    //       const PasswordIsValid = regexPassword.test(this.loginForm.password);
    //       if (!PasswordIsValid) {
    //         // 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
    //         this.$message({
    //           message: this.$t(`user.PasswordReminder`),
    //           type: "error",
    //           showClose: true,
    //         });

    //         return;
    //       }
    //       // ,gCode: this.loginForm.gCode,
    //       let obj = {
    //         email: this.loginForm.email,
    //         password: this.loginForm.password,
    //         resetPwdCode: this.loginForm.resetPwdCode,
    //       };
    //       //加密
    //       // const form = { ...this.loginForm };
    //       // form.password = encryption(this.loginForm.password);
    //       const form = { ...obj };
    //       form.password = encryption(obj.password);
    //       this.fetchResetPwd(form);
    //     }
    //   });
    // },
    handleClick() {
      this.$router.push(`/${this.lang}`);
    },
    /**
     * 去除输入值中的空格
     * @param {string} value - 输入值
     * @returns {string} 去除空格后的值
     */
    removeSpaces(value) {
      if (typeof value === 'string') {
        return value.replace(/\s/g, '');
      }
      return value;
    },
    /**
     * 处理邮箱输入，自动去除空格
     * @param {string} value - 输入值
     */
    handleEmailInput(value) {
      this.loginForm.email = this.removeSpaces(value);
    },
    /**
     * 处理验证码输入，自动去除空格
     * @param {string} value - 输入值
     */
    handleCodeInput(value) {
      this.loginForm.resetPwdCode = this.removeSpaces(value);
    },
    /**
     * 处理密码输入，自动去除空格
     * @param {string} value - 输入值
     */
    handlePasswordInput(value) {
      this.loginForm.password = this.removeSpaces(value);
    },
    /**
     * 处理新密码输入，自动去除空格
     * @param {string} value - 输入值
     */
    handleNewPasswordInput(value) {
      this.loginForm.newPassword = this.removeSpaces(value);
    },
  },
};
</script>

<style scoped lang="scss">
// 手机端适配
@media screen and (min-width: 220px) and (max-width: 1279px) {
  .mobileMain {
    width: 100vw;
    min-height: 100vh;
    background: #fff;
    background-image: url("../../assets/mobile/login/bgtop.svg");
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: 49% 47%;
  }

  .headerBox {
    width: 100%;
    height: 60px;
    // background: palegoldenrod;
    // border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    box-shadow: 0px 0px 2px 1px #ccc;
    img {
      width: 30px;
    }
    .title {
      height: 100%;
      font-weight: 600;
      line-height: 75px;
    }
  }

  .imgTop {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2%;
    img {
      height: 159px;
    }
  }

  .formInput {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .footer {
    width: 100%;
    height: 100px;
    background: #651fff;
  }
}
.loginPage {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0px;
  background-image: url(../../assets/img/logBg.png);
  background-size: cover;
  background-repeat: no-repeat;
  .loginModular {
    width: 50%;
    height: 85%;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 20px 18px #d6d2ea;
    // box-shadow: 0px 0px 20PX 30PX #000;
  }
  .leftBox {
    width: 47%;
    height: 100%;
    background-image: linear-gradient(150deg, #18b7e6 -20%, #651fff 60%);
    position: relative;
    .logo {
      position: absolute;
      left: 30px;
      top: 18px;
      width: 22%;
    }
    img {
      width: 100%;
      position: absolute;
      right: -16%;
      bottom: 0;
      z-index: 99;
    }
  }
}

.remind {
  font-size: 0.8em;
  padding: 0;
  margin: 0;
  min-height: 15px;
  line-height: 15px;
  color: #ff4081;
  // text-overflow: ellipsis;
  // overflow: hidden;
  // white-space: nowrap;
  // cursor: pointer;
}
.el-form {
  width: 90%;
  padding: 0px 20px 50px 20px;
}
.el-form-item {
  width: 100%;
}
.loginBox {
  width: 53%;
  // box-shadow: 0px 0px 5PX 1PX #ccc;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  position: relative;
  padding: 0px 35px;
  .demo-ruleForm {
    height: 100%;
    padding-top: 5%;
  }
  img {
    width: 18%;
    position: absolute;
    top: 20px;
    left: 30px;
    cursor: pointer;
  }
  .closeBox {
    position: absolute;
    top: 18px;
    right: 30px;
    cursor: pointer;
    .close {
      font-size: 1.3em;
    }
  }
  .closeBox:hover {
    color: #661fff;
  }
}
.loginTitle {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
}
.loginColor {
  width: 100%;
  height: 15px;
  background: #661fff;
}
.langBox {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.registerBox {
  display: flex;
  justify-content: start;
  margin: 0;
  font-size: 12px;
  height: 20px;
  cursor: pointer;
  span {
    padding: 5px 0px;
    display: inline-block;
    height: 100%;
    z-index: 99;
  }
  span:hover {
    color: #661fff;
  }
  .noAccount:hover {
    color: #000;
  }
  .forget {
    margin-left: 8px;
  }
}
.forget {
  margin-left: 10px;
}
.forgotPassword {
  display: inline-block;
  width: 20%;
}

.verificationCode {
  display: flex;
  .codeBtn {
    font-size: 13px;
    margin-left: 2px;
  }
}
</style>