<template>
  <div class="account-settings">
    <div class="settings-section">
      <h3>修改密码</h3>
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="120px">
        <el-form-item label="当前密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
        </el-form-item>
        
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleChangePassword">修改密码</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="settings-section">
      <h3>账号安全</h3>
      <div class="security-items">
        <div class="security-item">
          <div class="item-info">
            <i class="icon">📱</i>
            <div>
              <h4>手机绑定</h4>
              <p>已绑定手机：138****8888</p>
            </div>
          </div>
          <el-button size="small">修改</el-button>
        </div>
        
        <div class="security-item">
          <div class="item-info">
            <i class="icon">✉️</i>
            <div>
              <h4>邮箱绑定</h4>
              <p>已绑定邮箱：user@example.com</p>
            </div>
          </div>
          <el-button size="small">修改</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage, type FormInstance, type FormRules } from 'element-plus';

const passwordFormRef = ref<FormInstance>();

const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const passwordRules: FormRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码至少6个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

async function handleChangePassword() {
  if (!passwordFormRef.value) return;
  
  try {
    await passwordFormRef.value.validate();
    // TODO: 调用修改密码API
    ElMessage.success('密码修改成功');
    passwordFormRef.value.resetFields();
  } catch (error) {
    console.error('表单验证失败', error);
  }
}
</script>

<style lang="scss" scoped>
.account-settings {
  max-width: 600px;
}

.settings-section {
  padding: 24px 0;
  border-bottom: 1px solid #e0e0e0;
  
  &:last-child {
    border-bottom: none;
  }
  
  h3 {
    font-size: 20px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 24px;
  }
}

.security-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.item-info {
  display: flex;
  align-items: center;
  gap: 16px;
  
  .icon {
    font-size: 32px;
  }
  
  h4 {
    font-size: 16px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 4px;
  }
  
  p {
    font-size: 14px;
    color: #666;
  }
}
</style>

