<template>
  <div>
    <n-steps :current="current">
      <n-step title="邮箱" description=""></n-step>
      <n-step title="修改密码"></n-step>
    </n-steps>
    <div class="step1 mt-5" v-if="current == 1">
      <n-form-item-row label="邮箱">
        <n-input v-model:value="form1.username" placeholder="请填写邮箱" @keyup.enter="getCode" />
      </n-form-item-row>
      <n-form-item-row label="验证码">
        <n-input-group>
          <n-input v-model:value="form1.code" placeholder="请填写验证码" />
          <n-button type="info" @click="getCode">获取验证码</n-button>
        </n-input-group>
      </n-form-item-row>
    </div>

    <n-form ref="pass" :model="form2" class="step2 mt-5" v-if="current == 2" :rules="rules">
      <n-form-item label="密码" path="password">
        <n-input v-model:value="form2.password" type="password" show-password-on="mousedown" placeholder="请输入密码"
          @keydown.enter.prevent />
      </n-form-item>
      <n-form-item label="重复密码" path="repassword">
        <n-input ref="reInput" type="password" show-password-on="mousedown" v-model:value="form2.repassword"
          placeholder="请再次输入密码" @keyup.enter="" />
      </n-form-item>
    </n-form>

    <div class="btns">
      <n-button v-if="current == 1" type="primary" secondary @click="back">返回登录</n-button>
      <n-button v-if="current == 2" type="primary" secondary @click="current--">上一步</n-button>
      <n-button v-if="current == 1" type="primary" @click="next">下一步</n-button>
      <n-button v-if="current == 2" type="primary" @click="submit">确定改密</n-button>
    </div>
  </div>
</template>

<script setup>

const emit = defineEmits(["back"]);

const pass = ref(null)
const repass = ref(null)

const current = ref(1);
const form1 = reactive({
  username: "",
  code: "",
});
const form2 = reactive({
  username: "",
  password: "",
  repassword: "",
});


const rules = {
  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"] },
  ],
};


function validatePasswordSame(rule, value) {
  return value === form2.password;
}
function validatePassword(r, v) {
  return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/.test(v);
}

async function getCode() {
  if (!form1.username) {
    $msg.error("请输入邮箱");
    return;
  }
  const res = await $http.addr.sendMailinpass({ mail: form1.username });
  console.log(888, res);
  if (res.code == "1") $msg.success(res.msg);
  else if (res.code == "0") $msg.error(res.msg);
}
async function next() {
  if (!form1.username) {
    $msg.error("请输入邮箱");
    return;
  }
  if (!form1.code) {
    $msg.error("请输入验证码");
    return;
  }
  const res = await $http.user.rexpass(form1);
  if (res.code == "1") {
    $msg.success(res.msg);
    current.value++;
    form2.username = form1.username;
  } else if (res.code == "0") $msg.error(res.msg);
}
function submit() {
  pass.value.validate(async errors => {
    if (!errors) {
      const res = await $http.user.updatepass(form2);
      if (res.code == "1") {
        $msg.success(res.msg);
        emit("back");
      } else if (res.code == "0") $msg.error(res.msg);
    } else {
      $msg.error(errors[0][0].message)
    }
  });
}

function back() {
  emit("back");
}
</script>

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

  :deep(.n-button) {
    width: 45%;
  }
}

:deep(.n-step--wait-status) {
  .n-step-indicator {
    border: 1px solid @blue;

    .n-step-indicator-slot__index {
      color: @blue;
    }
  }

  .n-step-content-header__title {
    color: @blue;
  }
}

:deep(.n-step--finish-status) {
  .n-step-content-header__title {
    color: @purple;
  }
}
</style>
