<template>
  <div class="forgot-password-container">
    <el-card class="forgot-password-card">
      <div class="card-header">
        <h2>找回密码</h2>
        <p>请输入您的注册邮箱以接收密码重置邮件</p>
      </div>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-position="top"
        hide-required-asterisk
        @submit.prevent="handleSubmit"
        autocomplete="off"
      >
        <el-form-item label="邮箱地址" prop="email">
          <el-input
            v-model="form.email"
            placeholder="请输入您注册时使用的邮箱"
            size="large"
            autocomplete="off"
          >
           <template #append>
              <el-button
                :disabled="isSending"
                @click="handleSubmit"
              >
                {{ buttonText }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        
      </el-form>
      <div class="card-footer">
        <el-link @click="$router.push('/login')">返回登录</el-link>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus';
import { sendPasswordResetCode } from '@/api/auth';

const router = useRouter();
const formRef = ref<FormInstance>();
const isSending = ref(false);
const countdown = ref(0);

const form = reactive({
  email: '',
});

const rules = reactive({
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
  ],
});

const buttonText = computed(() => {
  if (isSending.value) {
    return `${countdown.value}s 后可重发`;
  }
  return '发送重置邮件';
});

const handleSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async (valid) => {
    if (valid) {
      isSending.value = true;
      countdown.value = 60;
      try {
        await sendPasswordResetCode(form.email);
        ElMessage.success('密码重置邮件已发送，即将跳转...');

        const timer = setInterval(() => {
          if (countdown.value > 0) {
            countdown.value--;
          } else {
            clearInterval(timer);
            isSending.value = false;
          }
        }, 1000);
        
        setTimeout(() => {
          router.push({ path: '/reset-password', query: { email: form.email } });
        }, 2000);

      } catch (error) {
        ElMessage.error('邮件发送失败，请检查邮箱地址是否正确。');
        isSending.value = false;
        countdown.value = 0;
      }
    }
  });
};
</script>

<style scoped>
.forgot-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('/forgot-password-bg.avif');
  background-size: cover;
  background-position: center;
}

.forgot-password-card {
  width: 480px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  padding: 20px;
}

.card-header {
  text-align: center;
  margin-bottom: 2rem;
}

.card-header h2 {
  color: #004d40;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.card-header p {
  color: #607d8b;
  font-size: 0.9rem;
}

.card-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.submit-button {
  width: 100%;
  border-radius: 10px;
  background-color: #004d40;
  border-color: #004d40;
  transition: background-color 0.3s ease;
  font-size: 1rem;
  padding: 1.2rem 0;
}

.submit-button:hover {
  background-color: #00695c;
  border-color: #00695c;
}

:deep(.el-input__wrapper) {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

:deep(.el-input-group__append) {
    background-color: #004d40;
    color: white;
    border: none;
    cursor: pointer;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

:deep(.el-input-group__append:hover) {
    background-color: #00695c;
}

:deep(.el-input-group__append .el-button) {
    background: transparent;
    color: white;
    border: none;
    box-shadow: none;
}
</style> 
