<template>
  <div class="forget-password-page">
    <div class="forget-password-container">
      <div class="forget-password-content">
        <div class="forget-password-header">
          <h2>重置密码</h2>
          <p class="sub-title">请填写以下信息以重置您的密码</p>
        </div>
        
        <a-form 
          ref="forgetPasswordForm"
          :model="formData"
          :rules="rules"
          layout="vertical"
        >
          <a-form-item label="用户名或手机号" name="username">
            <a-input
              v-model:value="formData.username"
              placeholder="请输入用户名或手机号"
              size="large"
            >
              <template #prefix>
                <UserOutlined style="color: rgba(0,0,0,.25)" />
              </template>
            </a-input>
          </a-form-item>
          
          <a-form-item label="验证码" name="verification_code">
            <div class="verification-code-input">
              <a-input
                v-model:value="formData.verification_code"
                placeholder="请输入验证码"
                size="large"
              >
                <template #prefix>
                  <SafetyCertificateOutlined style="color: rgba(0,0,0,.25)" />
                </template>
              </a-input>
              <a-button 
                :disabled="!!countdown || !formData.username"
                @click="sendVerificationCode"
                size="large"
              >
                {{ countdown ? `${countdown}秒后重试` : '获取验证码' }}
              </a-button>
            </div>
          </a-form-item>

          <a-form-item label="新密码" name="new_password">
            <a-input-password
              v-model:value="formData.new_password"
              placeholder="请输入新密码"
              size="large"
            >
              <template #prefix>
                <LockOutlined style="color: rgba(0,0,0,.25)" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item label="确认新密码" name="confirm_password">
            <a-input-password
              v-model:value="formData.confirm_password"
              placeholder="请再次输入新密码"
              size="large"
            >
              <template #prefix>
                <LockOutlined style="color: rgba(0,0,0,.25)" />
              </template>
            </a-input-password>
          </a-form-item>
          
          <a-form-item>
            <a-button 
              type="primary" 
              :loading="loading"
              size="large"
              block
              @click="handleSubmit"
            >
              重置密码
            </a-button>
          </a-form-item>

          <div class="form-footer">
            <a @click="$router.push('/login')" class="back-to-login">返回登录</a>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { message } from 'ant-design-vue';
import { 
  UserOutlined,
  LockOutlined,
  SafetyCertificateOutlined
} from '@ant-design/icons-vue';

export default defineComponent({
  name: 'forget-password',
  components: {
    UserOutlined,
    LockOutlined,
    SafetyCertificateOutlined
  },
  setup() {
    const router = useRouter();
    const forgetPasswordForm = ref();
    const loading = ref(false);
    const countdown = ref(0);
    
    const formData = reactive({
      username: '',
      verification_code: '',
      new_password: '',
      confirm_password: ''
    });
    
    const rules = {
      username: [
        { required: true, message: '请输入用户名或手机号' },
        { min: 4, message: '用户名长度不能小于4位' }
      ],
      verification_code: [
        { required: true, message: '请输入验证码' },
        { len: 6, message: '验证码长度必须为6位' }
      ],
      new_password: [
        { required: true, message: '请输入新密码' },
        { min: 6, message: '密码长度不能小于6位' }
      ],
      confirm_password: [
        { required: true, message: '请确认新密码' },
        { 
          validator: (rule, value) => {
            if (value && value !== formData.new_password) {
              return Promise.reject('两次输入的密码不一致');
            }
            return Promise.resolve();
          }
        }
      ]
    };

    // 发送验证码
    const sendVerificationCode = async () => {
      try {
        // 验证用户名/手机号
        await forgetPasswordForm.value.validateFields(['username']);
        
        const response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/send_verification_code`, {
          mobile: formData.username
        });

        if (response.data.code === 200) {
          message.success('验证码发送成功');
          // 开始倒计时
          countdown.value = 60;
          const timer = setInterval(() => {
            countdown.value--;
            if (countdown.value <= 0) {
              clearInterval(timer);
            }
          }, 1000);
        } else {
          message.error(response.data.message || '验证码发送失败');
        }
      } catch (error) {
        console.error('验证码发送失败:', error);
        message.error(error.response?.data?.message || '验证码发送失败');
      }
    };

    // 提交表单
    const handleSubmit = async () => {
      try {
        loading.value = true;
        await forgetPasswordForm.value.validate();
        
        const response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/forget_password`, {
          username: formData.username,
          verification_code: formData.verification_code,
          new_password: formData.new_password,
          confirm_password: formData.confirm_password
        });

        if (response.data.code === 200) {
          message.success('密码重置成功');
          router.push('/login');
        } else {
          message.error(response.data.message || '密码重置失败');
        }
      } catch (error) {
        console.error('密码重置失败:', error);
        message.error(error.response?.data?.message || '密码重置失败，请检查输入信息');
      } finally {
        loading.value = false;
      }
    };

    return {
      forgetPasswordForm,
      formData,
      rules,
      loading,
      countdown,
      handleSubmit,
      sendVerificationCode
    };
  }
});
</script>

<style lang="less" scoped>
.forget-password-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  .forget-password-container {
    width: 100%;
    max-width: 420px;
    margin: 0 20px;
  }
  
  .forget-password-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(8px);
    animation: slideUp 0.6s ease-out;
  }
  
  .forget-password-header {
    text-align: center;
    margin-bottom: 32px;
    
    h2 {
      font-size: 28px;
      color: #1a1a1a;
      margin-bottom: 8px;
      font-weight: 600;
    }
    
    .sub-title {
      color: #666;
      font-size: 14px;
    }
  }

  .verification-code-input {
    display: flex;
    gap: 8px;

    .ant-input-affix-wrapper {
      flex: 1;
    }

    .ant-btn {
      min-width: 120px;
    }
  }

  .form-footer {
    text-align: center;
    margin-top: 16px;

    .back-to-login {
      color: #667eea;
      cursor: pointer;
      
      &:hover {
        color: #764ba2;
      }
    }
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式适配
@media (max-width: 480px) {
  .forget-password-content {
    padding: 24px;
  }
  
  .forget-password-header h2 {
    font-size: 24px;
  }
}
</style> 