<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>
          {{ t("retrieve.retrievePassword") }}
        </span>
      </h3>
      <el-form-item prop="mobile">
        <el-input
          v-model="retrieveForm.mobile"
          type="text"
          auto-complete="off"
          :placeholder="t('input.phone')"
        >
          <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="t('input.verificationCode')"
          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>{{ t("retrieve.retrievePassword") }}</span>
      </h3>
      <el-form-item prop="password">
        <el-input
          v-model="retrieveForm.password"
          type="password"
          auto-complete="off"
          :placeholder="t('input.inputNewPassword')"
        >
          <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="t('input.confirmPassword')"
        >
          <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="default"
          type="primary"
          style="width: 100%"
          @click.prevent="handleRetrieve"
        >
          <span>
            {{ t("common.complete") }}
          </span>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus";
import { getCodeImg, resetPassword } from "@/api/login";
import WebGetCode from "@/components/webGetCode";
import { useI18n } from "vue-i18n";

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

const emit = defineEmits();

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

const { t } = useI18n();
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(t("input.passwordInconsistent")));
  } else {
    callback();
  }
};

const mobileRules = {
  mobile: [
    { required: true, message: t("input.inputPhone"), trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: t("input.phoneFormatError"),
      trigger: "blur",
    },
  ],
  captcha: [
    {
      required: true,
      trigger: "change",
      message: t("input.inputVerificationCode"),
    },
  ],
};
const passRules = {
  password: [
    { required: true, trigger: "blur", message: t("input.inputPassword") },
    {
      min: 5,
      max: 20,
      message: t("input.passwordLengthError"),
      trigger: "blur",
    },
  ],
  repeat_pass: [
    { required: true, trigger: "blur", message: t("input.inputPasswordAgain") },
    { 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'>" +
              t("common.congratulations") +
              mobile +
              t("retrieve.changePasswordSuccess") +
              " ！</font>",
            t("common.systemPrompt"),
            {
              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>
