<template>
  <div class="personal-center-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1>个人中心 - 修改账号密码</h1>
    </div>

    <!-- 修改密码表单 -->
    <div class="password-form-section">
      <a-card title="修改密码" :bordered="false">
        <a-form
          ref="passwordFormRef"
          :model="passwordForm"
          :rules="passwordFormRules"
          layout="vertical"
          @finish="handlePasswordSubmit"
        >
          <a-form-item label="登录账号" name="username">
            <a-input
              v-model:value="passwordForm.username"
              disabled
              placeholder="登录账号"
            />
          </a-form-item>

          <a-form-item label="旧密码" name="oldPassword">
            <a-input-password
              v-model:value="passwordForm.oldPassword"
              placeholder="请输入旧密码"
              :disabled="loading"
            />
          </a-form-item>

          <a-form-item label="新密码" name="newPassword">
            <a-input-password
              v-model:value="passwordForm.newPassword"
              placeholder="请输入新密码"
              :disabled="loading"
            />
          </a-form-item>

          <a-form-item label="确认密码" name="confirmPassword">
            <a-input-password
              v-model:value="passwordForm.confirmPassword"
              placeholder="请再次输入新密码"
              :disabled="loading"
            />
          </a-form-item>

          <a-form-item>
            <a-space>
              <a-button
                type="primary"
                html-type="submit"
                :loading="loading"
                size="large"
              >
                确认
              </a-button>
              <a-button
                @click="handleReset"
                :disabled="loading"
                size="large"
              >
                重置
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import api from '@/utils/api'

// 响应式数据
const loading = ref(false)
const passwordFormRef = ref()

// 表单数据
const passwordForm = reactive({
  username: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 表单验证规则
const passwordFormRules = {
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6-20个字符', trigger: 'blur' },
    { 
      pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{6,}$/, 
      message: '密码必须包含字母和数字', 
      trigger: 'blur' 
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value) => {
        if (value !== passwordForm.newPassword) {
          return Promise.reject('两次输入的密码不一致')
        }
        return Promise.resolve()
      },
      trigger: 'blur'
    }
  ]
}

// 获取当前用户信息
const fetchUserInfo = async () => {
  try {
    const response = await api.auth.getCurrentUser()
    if (response.success) {
      passwordForm.username = response.data.username || response.data.phone || '15004901368'
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 使用默认值
    passwordForm.username = '15004901368'
  }
}

// 提交修改密码
const handlePasswordSubmit = async () => {
  try {
    await passwordFormRef.value.validate()
    loading.value = true

    const response = await api.auth.changePassword({
      oldPassword: passwordForm.oldPassword,
      newPassword: passwordForm.newPassword
    })

    if (response.success) {
      message.success('密码修改成功')
      handleReset()
    } else {
      message.error(response.message || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    if (error.message) {
      message.error(error.message)
    } else {
      message.error('密码修改失败')
    }
  } finally {
    loading.value = false
  }
}

// 重置表单
const handleReset = () => {
  passwordFormRef.value?.resetFields()
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}

// 生命周期
onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.personal-center-page {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 134px);
}

.page-header {
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.page-header h1 {
  font-size: 28px;
  color: #333;
  margin: 0;
}

.password-form-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

:deep(.ant-card-head) {
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.ant-card-head-title) {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

:deep(.ant-form-item-label > label) {
  font-weight: 500;
  color: #333;
}

:deep(.ant-input) {
  border-radius: 6px;
}

:deep(.ant-btn) {
  border-radius: 6px;
  font-weight: 500;
}

:deep(.ant-btn-primary) {
  background-color: #1890ff;
  border-color: #1890ff;
}

:deep(.ant-btn-primary:hover) {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .personal-center-page {
    padding: 16px;
  }
  
  .page-header {
    padding: 16px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
}
</style>
