<script setup lang="ts">
  import type { FormInstanceFunctions, FormProps } from 'tdesign-vue-next';
  const store = useLoginStore();
  const { currentType, resetForm } = storeToRefs(store);
  const form = ref<FormInstanceFunctions>();
  const rules: FormProps['rules'] = {
    usernameOrEmail: [
      { required: true, message: '请输入邮箱或用户名', trigger: 'blur' },
    ],
    identifyingCode: [
      { required: true, message: '请输入验证码', trigger: 'blur' },
    ],
    password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
    passwordRepeat: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      {
        validator: (val) => val === resetForm.value.password,
        message: '两次输入密码不一致',
        trigger: 'change',
      },
    ],
  };
  async function submit() {
    if (!form.value) return;
    const result = await form.value.validate();
    if (typeof result === 'boolean' && result) form.value.submit();
  }
  const coldTime = ref(0);
  async function sendIdentifyingCode() {
    if (await store.sendResetIdentifyingCode()) {
      coldTime.value = 60;
      const timer: NodeJS.Timeout = setInterval(() => {
        if (coldTime.value > 0) coldTime.value--;
        else {
          clearInterval(timer);
        }
      }, 1000);
    }
  }

  function backToLogin() {
    form.value?.reset();
    currentType.value = PageType.login;
  }
</script>

<template>
  <div class="w-full">
    <t-form
      ref="form"
      :label-width="10"
      :data="resetForm"
      :rules="rules"
      class="flex flex-col items-center gap-4"
      @submit="store.reset(backToLogin)"
    >
      <div
        class="flex md:flex-row items-center md:justify-center w-full flex-col gap-4 md:gap-0"
      >
        <div class="flex flex-col items-center gap-4 w-full">
          <!--      <TInput class="w-56" placeholder="请输入邮箱" />-->
          <!--      <TButton class="w-56">发送验证码</TButton>-->
          <!--      <TInput class="w-56" placeholder="请输入验证码" />-->
          <!--      <TInput class="w-56" type="password" placeholder="请输入新密码" />-->
          <!--      <TButton class="w-56">确认</TButton>-->
          <t-form-item name="usernameOrEmail" class="w-64 md:w-60">
            <div class="flex flex-row items-center gap-2 w-full">
              <TInput
                v-model="resetForm.usernameOrEmail"
                placeholder="邮箱 / 用户名"
                class="max-w-32 md:max-w-28"
              />
              <TButton
                :disabled="coldTime > 0"
                class="w-32"
                @click="sendIdentifyingCode"
                >{{ coldTime > 0 ? coldTime : '发送验证码' }}</TButton
              >
            </div>
          </t-form-item>
          <t-form-item name="identifyingCode" class="w-64 md:w-60">
            <TInput v-model="resetForm.identifyingCode" placeholder="验证码" />
          </t-form-item>
        </div>
        <div
          class="hidden md:flex flex-col items-center gap-4 w-2/5 max-w-16 select-none"
        >
          <div class="w-1 h-44 bg-gray-200"></div>
        </div>
        <div class="flex flex-col items-center gap-4 w-full">
          <t-form-item name="password" class="w-64 md:w-60">
            <TInput v-model="resetForm.password" placeholder="新密码" />
          </t-form-item>
          <t-form-item name="passwordRepeat" class="w-64 md:w-60">
            <TInput
              v-model="resetForm.passwordRepeat"
              class="w-56"
              placeholder="确认新密码"
            />
          </t-form-item>
        </div>
      </div>
    </t-form>

    <div
      class="flex flex-row items-center bg-gray-600 w-full h-10 justify-around rounded-b-md mt-4"
    >
      <button class="text-white" @click="submit">修改密码</button>
      <button class="text-white" @click="backToLogin">返回登录 </button>
    </div>
  </div>
</template>
<style scoped lang="less">
  :deep(.t-form__item) {
    @apply mb-0;
  }
</style>
