<template>
  <div class="forget_box">
    <div class="forget_form">
      <div class="back" @click="handleBack">返回</div>
      <h3 class="title">忘记密码</h3>
      <el-steps :active="stepActive" align-center class="steps">
        <el-step title="验证手机号" />
        <el-step title="重置密码" />
        <el-step title="重置成功" />
      </el-steps>
      <!-- 验证手机号 -->
      <el-form v-if="stepActive === 1" :model="resetForm">
        <el-form-item>
          <el-input
            v-model="resetForm.phone"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="请输入绑定手机号"
          >
            <template #prefix
              ><svg-icon icon-class="user" class="el-input__icon input-icon"
            /></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="resetForm.code"
            size="large"
            auto-complete="off"
            placeholder="请输入验证码"
            @input="inputCode"
          >
            <template #prefix
              ><svg-icon
                icon-class="validCode"
                class="el-input__icon input-icon"
            /></template>
            <template #append>
              <div class="login-code">
                <el-button
                  size="large"
                  type="primary"
                  style="width: 100%"
                  @click="handleSendCode"
                >
                  <span>{{
                    sendCode.sending
                      ? `${sendCode.second}S后重新发送`
                      : "点击发送验证码"
                  }}</span>
                </el-button>
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width: 100%"
            :disabled="nextDisabled"
            @click="handleNextStep(1)"
          >
            <span>下一步</span>
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 重置密码 -->
      <el-form
        v-if="stepActive === 2"
        :model="resetForm"
        ref="resetFormRef"
        :rules="resetRules"
      >
        <el-form-item prop="newPassword">
          <el-input
            v-model="resetForm.newPassword"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="请输入新密码"
          >
            <template #prefix
              ><svg-icon
                icon-class="password"
                class="el-input__icon input-icon"
            /></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="resetPassword">
          <el-input
            v-model="resetForm.resetPassword"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="请再次输入新密码"
          >
            <template #prefix
              ><svg-icon
                icon-class="password"
                class="el-input__icon input-icon"
            /></template>
          </el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width: 100%"
            @click="handleNextStep(2)"
          >
            <span>确定</span>
          </el-button>
        </el-form-item>
      </el-form>
      <!--返回登录 -->
      <div v-if="stepActive === 3" class="last_step">
        <div class="success">
          <el-icon><SuccessFilled /></el-icon>
          <div class="text">重置密码成功</div>
        </div>
        <el-button
          :loading="loading"
          size="large"
          type="primary"
          style="width: 100%"
          @click="handleNextStep(3)"
        >
          <span>返回登录</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  sendSmsCaptchaApi,
  checkCodeApi,
  resetPasswordApi,
} from "@/api/smartCampus/index";
import { onUnmounted } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["backLogin"]);
const stepActive = ref(1);
const nextDisabled = ref(true); //下一步按钮
const loading = ref(false);
const sendCode = ref({
  second: 60,
  sending: false,
}); //验证码;
const sendCodeTimer = ref();
const resetForm = ref({
  phone: "",
  code: "",
  newPassword: "",
  resetPassword: "",
});

const equalToPassword = (rule, value, callback) => {
  if (resetForm.value.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const resetRules = {
  newPassword: [
    { required: true, trigger: "blur", message: "请输入您的新密码" },
    {
      min: 8,
      max: 20,
      message: "重置密码不得少于8位",
      trigger: "blur",
    },
  ],
  resetPassword: [
    { required: true, trigger: "blur", message: "请输入您的新密码" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
};

// 发送验证码
function handleSendCode() {
  let reg = /^[1][0,1,2,3, 4, 5, 6, 7, 8, 9][0-9]{9}$/;
  if (!resetForm.value.phone) {
    return proxy.$modal.msgError("请输入您的手机号");
  }
  if (!reg.test(resetForm.value.phone)) {
    return proxy.$modal.msgError("请输入正确的手机号码");
  }
  try {
    sendCode.value.sending = true;
    sendCodeTimer.value = setInterval(() => {
      sendCode.value.second--;
      if (sendCode.value.second === 0) {
        clearInterval(sendCodeTimer.value);
        sendCode.value.sending = false;
        sendCode.value.second = 60;
      }
    }, 1000);
    sendSmsCaptchaApi({ phone: resetForm.value.phone });
  } catch (err) {
    proxy.$modal.msgError("发送失败");
  }
}
// 输入验证码
function inputCode() {
  if (resetForm.value.phone && resetForm.value.code) {
    nextDisabled.value = false;
  } else {
    nextDisabled.value = true;
  }
}
// 下一步
function handleNextStep(step) {
  switch (step) {
    case 1:
      loading.value = true;
      checkCodeApi({
        phone: resetForm.value.phone,
        code: resetForm.value.code,
      })
        .then((res) => {
          if (res.code === 200) {
            stepActive.value = 2;
            loading.value = false;
          }
        })
        .catch((err) => {
          loading.value = false;
        });
      break;
    case 2:
      proxy.$refs.resetFormRef.validate((valid) => {
        if (valid) {
          loading.value = true;
          resetPasswordApi({
            phone: resetForm.value.phone,
            newPassword: resetForm.value.newPassword,
            resetPassword: resetForm.value.resetPassword,
          })
            .then((res) => {
              if (res.code === 200) {
                stepActive.value = 3;
                loading.value = false;
              }
            })
            .catch((err) => {
              loading.value = false;
            });
        }
      });
      break;
    case 3:
      emits("backLogin", 3);
      break;
  }
}
// 返回
function handleBack() {
  emits("backLogin");
}
onUnmounted(() => {
  clearInterval(sendCodeTimer.value);
});
</script>

<style lang="scss" scoped>
.forget_box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.forget_form {
  position: relative;
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  min-height: 346px;
  padding: 25px 25px 5px 25px;
  .back {
    position: absolute;
    top: 6px;
    left: 8px;
    color: #c6c6c6;
    font-size: 14px;
    cursor: pointer;
    &:hover {
      color: #3894ff;
    }
  }
  .steps {
    margin-bottom: 36px;
  }
  :deep(.el-steps) {
    .is-process {
      color: #a8abb2;
      .is-text {
        border-color: #9ea1a9;
      }
    }
  }

  .el-input {
    height: 40px;
    input {
      height: 40px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
  :deep(.el-input-group__append) {
    background-color: #3894ff !important;
    color: #fff;
  }
  .last_step {
    display: flex;
    flex-direction: column;
    align-items: center;

    .success {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 34px;
      width: 140px;
      height: 80px;
      background-color: #252525;
      color: #fff;
      border-radius: 6px;
      .text {
        margin-top: 8px;
      }
    }
  }
}
</style>
