<template>
  <div>
    <t-steps class="px-8" readonly :current="currentStep" separator="arrow">
      <t-step-item :value="1" title="验证邮箱" />
      <t-step-item :value="2" title="重新设置密码" />
    </t-steps>

    <t-form class="mt-5" :data="step1" colon labelAlign="top" :rules="rules1" showErrorMessage
      scroll-to-first-error="smooth" v-if="currentStep == 1" @submit="next">
      <t-form-item label="邮箱" name="username">
        <t-input v-model="step1.username" placeholder="请输入邮箱" />
      </t-form-item>
      <t-form-item label="验证码" name="code">
        <t-input v-model="step1.code" type="number" placeholder="请输验证码" />
        <t-button theme="primary" @click="getCode">获取验证码</t-button>
      </t-form-item>
      <t-form-item class="pt-4" name="btn">
        <div class="btns">
          <t-button theme="primary" ghost @click="back">返回登录</t-button>
          <t-button theme="primary" type="submit">下一步</t-button>
        </div>
      </t-form-item>
    </t-form>

    <t-form class="mt-5" :data="step2" colon labelAlign="top" :rules="rules2" showErrorMessage
      scroll-to-first-error="smooth" v-if="currentStep == 2" @submit="submit">
      <t-form-item label="密码" name="password">
        <t-input v-model="step2.password" type="password" placeholder="请输入密码" />
      </t-form-item>
      <t-form-item label="重复密码" name="repassword">
        <t-input v-model="step2.repassword" type="password" placeholder="请再次输入密码" />
      </t-form-item>
      <t-form-item class="pt-4" name="btn">
        <div class="btns">
          <t-button theme="primary" ghost @click="currentStep--">上一步</t-button>
          <t-button theme="primary" type="submit">确定改密</t-button>
        </div>
      </t-form-item>
    </t-form>
  </div>
</template>

<script setup>

//mark import

//mark data
const emit = defineEmits(["back"]);
const currentStep = ref(1);

const step1 = reactive({
  username: "",
  code: ""
});
const step2 = reactive({
  username: "",
  password: "",
  repassword: "",
});
const rules1 = reactive({
  username: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { validator: validateMail, message: '请输入正确的邮箱', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: "验证码长度为6", trigger: "blur" },
  ]
})
const rules2 = {
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { validator: validatePassword, message: "必须是含有数字，字母的6-12位密码", trigger: "blur" },
  ],
  repassword: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { validator: validatePassword, message: "必须是含有数字，字母的6-12位密码", trigger: "blur" },
    { validator: validatePasswordSame, message: "两次密码输入不一致", trigger: ["blur", "password-input"] },
  ],
};

//mark method
async function getCode() {
  if (!step1.username) {
    $msg.error("请输入邮箱");
    return;
  }
  const res = await $http.addr.sendMailinpass({ mail: step1.username });
  if (res.code == "1") $msg.success(res.msg);
  else if (res.code == "0") $msg.error(res.msg);
}
async function next() {
  if (validateResult === true) {
    currentStep.value++;
    step2.username = step1.username;
    // const res = await $http.user.rexpass(step1);
    // if (res.code == "1") {
    //   $msg.success(res.msg);
    //   currentStep.value++;
    //   step2.username = step1.username;
    // } else if (res.code == "0") $msg.error(res.msg);
    return;
  }
  $msg.error(firstError);
}


async function submit() {
  if (validateResult === true) {
    const res = await $http.user.updatepass(step2)
    if (res.code == 1) {
      $msg.success(res.msg)
      emit("back")
      return
    }
    $msg.error(res.msg)

    return
  }
  $msg.error(firstError)
}

function back() {
  emit("back");
}

function validatePasswordSame(value) {
  return value === step2.password;
}
function validateMail(value) {
  return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(value);
}
function validatePassword(value) {
  return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(value);
}
//mark 周期、内置函数等


</script>

<style scoped lang="less">
.btns {
  width: 100%;
  display: flex;
  justify-content: space-between;

  :deep(.t-button) {
    width: 45%;
  }
}
</style>