<template>
  <div class="forget-pwd">
    <t-form
      ref="form"
      :data="formData"
      :label-width="0"
      class="login-form"
      :rules="rules"
    >
      <t-form-item name="mobileNumber">
        <t-input
          v-model="formData.mobileNumber"
          clearable
          placeholder="请输入你的手机号"
          size="medium"
        >
        </t-input>
      </t-form-item>
      <t-form-item name="code">
        <div class="flex items-center">
          <t-input
            style="width: 162px"
            v-model="formData.code"
            clearable
            placeholder="验证码"
            size="medium"
          >
          </t-input>
          <t-button
            class="m-l-16px"
            variant="outline"
            style="width: 102px"
            :loading="loading"
            :disabled="isActive"
            @click="getCode"
            >{{ isActive ? lastSeconds + 's' : '获取验证码' }}</t-button
          >
        </div>
      </t-form-item>
      <t-form-item name="password">
        <t-input
          v-model="formData.password"
          type="password"
          clearable
          placeholder="请输入新密码"
          size="medium"
        >
        </t-input>
      </t-form-item>
      <t-form-item name="repeatPassword">
        <t-input
          v-model="formData.repeatPassword"
          type="password"
          clearable
          placeholder="请再次输入新密码"
          size="medium"
        >
        </t-input>
      </t-form-item>
      <t-button
        block
        class="m-t-30px"
        @click="submitHandle"
        size="medium"
        theme="primary"
        >保 存</t-button
      >
    </t-form>
  </div>
</template>

<script setup name="ForgetPwd">
import { reactive, ref, onBeforeUnmount } from 'vue';
import { clear } from '@/utils/tool';
import { useIntervalFn } from '@vueuse/core';
import { MessagePlugin } from 'tdesign-vue-next';
import { useRequest } from 'vue-request';
import { getBase64 } from '@/utils/crypto';
import { getVerifyCode, forgetPassword } from '@/api/user';

const emit = defineEmits(['success']);
const form = ref();
const { run, loading } = useRequest(getVerifyCode, {
  onSuccess: () => {
    MessagePlugin.success('验证码已发送');
    resume();
  },
});
const lastSeconds = ref(60);
const countdown = () => {
  if (lastSeconds.value == 0) {
    pause();
  } else {
    lastSeconds.value = lastSeconds.value - 1;
  }
};
const { pause, resume, isActive } = useIntervalFn(
  () => {
    countdown();
  },
  1000,
  { immediate: false }
);
onBeforeUnmount(() => {
  pause();
});
const getCode = () => {
  if (!formData.mobileNumber) {
    MessagePlugin.error('请先输入手机号');
    return;
  }
  run({
    mobileNumber: formData.mobileNumber,
  });
};
const formData = reactive({
  mobileNumber: '',
  password: '',
  code: '',
  repeatPassword: '',
});
const rules = {
  mobileNumber: [
    {
      required: true,
      message: '请输入手机号',
      type: 'error',
      trigger: 'change',
    },
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      type: 'error',
      trigger: 'change',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      type: 'error',
      trigger: 'change',
    },
  ],
  repeatPassword: [
    {
      required: true,
      message: '请输入新密码',
      type: 'error',
      trigger: 'change',
    },
    {
      validator: (val) => {
        if (val !== formData.password) {
          return {
            result: false,
            message: '两次输入的新密码不一致',
          };
        }
        return {
          result: true,
          type: 'success',
        };
      },
    },
  ],
};
const submitHandle = () => {
  form.value.validate().then(async (result) => {
    if (result === true) {
      forgetPassword({
        mobileNumber: formData.mobileNumber,
        code: formData.code,
        password: getBase64(formData.password),
      }).then(() => {
        MessagePlugin.success('密码修改成功，请登录');
        clear();
        emit('success');
      });
    }
  });
};
</script>

<style></style>
