<template>
  <div>
    <el-form
      v-if="step == 1"
      ref="mobileRef"
      :model="retrieveForm"
      :rules="mobileRules"
      class="retrieve-form"
    >
      <h3 class="title">
        <el-icon
          class="pointer"
          :size="18"
          color="#333333"
          @click="handleLogin"
        >
          <Back />
        </el-icon>
        <span>找回密码</span>
      </h3>
      <el-form-item prop="mobile">
        <el-input
          v-model="retrieveForm.mobile"
          type="text"
          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 prop="captcha" style="margin-bottom: 0">
        <el-input
          v-model="retrieveForm.captcha"
          auto-complete="off"
          placeholder="验证码"
          style="width: 65%"
        >
          <template #prefix
            ><svg-icon icon-class="validCode" class="el-input__icon input-icon"
          /></template>
        </el-input>
        <WebGetCode v-model:mobile="retrieveForm.mobile" />
        <!-- @isSuccess="isSuccess" -->
      </el-form-item>
      <el-form-item style="width: 100%; margin-top: 35px">
        <el-button
          class="x_btns"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.prevent="handleNext"
        >
          <span>下一步</span>
        </el-button>
      </el-form-item>
    </el-form>

    <el-form
      v-else
      ref="passRef"
      :model="retrieveForm"
      :rules="passRules"
      class="retrieve-form"
    >
      <h3 class="title">
        <el-icon class="pointer" :size="18" color="#333333" @click="step--">
          <Back />
        </el-icon>
        <span>找回密码</span>
      </h3>
      <el-form-item prop="password">
        <el-input
          v-model="retrieveForm.password"
          type="password"
          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="repeat_pass">
        <el-input
          v-model="retrieveForm.repeat_pass"
          type="password"
          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%; margin-top: 35px">
        <el-button
          class="x_btns"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.prevent="handleRetrieve"
        >
          <span>完 成</span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus";
import { getCodeNum, codeValid, resetPassword } from "@/api/login";
import WebGetCode from "@/components/webGetCode";

const props = defineProps({
  isLogin: Number,
});

const emit = defineEmits();

function handleLogin() {
  emit("update:isLogin", 1);
}

const router = useRouter();
const { proxy } = getCurrentInstance();

const retrieveForm = ref({
  mobile: "",
  password: "",
  repeat_pass: "",
  captcha: "",
  token: "",
});

const equalToPassword = (rule, value, callback) => {
  if (retrieveForm.value.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const mobileRules = {
  mobile: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  captcha: [{ required: true, trigger: "change", message: "请输入验证码" }],
};
const passRules = {
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    {
      min: 5,
      max: 20,
      message: "用户密码长度必须介于 5 和 20 之间",
      trigger: "blur",
    },
  ],
  repeat_pass: [
    { required: true, trigger: "blur", message: "请再次输入您的新密码" },
    { required: true, validator: equalToPassword, trigger: "blur" },
  ],
};

const step = ref(1);

function handleNext() {
  proxy.$refs.mobileRef.validate((valid) => {
    if (valid) {
      codeValid(retrieveForm.value).then((res) => {
        if (res.code == 200) {
          retrieveForm.value.token = res.data.token;
          step.value = 2;
        }
      });
    }
  });
}

function handleRetrieve() {
  proxy.$refs.passRef.validate((valid) => {
    if (valid) {
      let formData = Object.assign({}, retrieveForm.value);
      formData.password = proxy.md5(formData.password);
      formData.repeat_pass = proxy.md5(formData.repeat_pass);
      resetPassword(formData)
        .then((res) => {
          const mobile = formData.mobile;
          ElMessageBox.alert(
            "<font color='red'>恭喜你，您的账号 " +
              mobile +
              " 修改密码成功！</font>",
            "系统提示",
            {
              dangerouslyUseHTMLString: true,
              type: "success",
            }
          )
            .then(() => {
              handleLogin();
              // router.push("/login");
            })
            .catch(() => {});
        })
        .catch(() => {});
    }
  });
}
</script>

<style lang='scss' scoped>
.title {
  display: flex;
  align-items: center;
  margin: 0px auto 40px auto;
  color: #333333;
  font-size: 20px;
  font-weight: bold;
  .el-icon {
    text-align: left;
  }
  span {
    flex: 1;
    text-align: center;
  }
}

.retrieve-form {
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
