<template>
  <div class="personal-info">
    <el-form :model="userForm" label-width="120px" class="info-form">
      <el-form-item label="头像">
        <div class="avatar-upload">
          <img :src="userForm.avatar || defaultAvatar" alt="头像" class="avatar-preview" />
          <el-button size="small" @click="handleAvatarUpload">更换头像</el-button>
        </div>
      </el-form-item>
      
      <el-form-item label="用户名">
        <el-input v-model="userForm.username" disabled />
      </el-form-item>
      
      <el-form-item label="姓名">
        <el-input v-model="userForm.realName" />
      </el-form-item>
      
      <el-form-item label="性别">
        <el-radio-group v-model="userForm.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="手机号">
        <el-input v-model="userForm.phone" />
      </el-form-item>
      
      <el-form-item label="邮箱">
        <el-input v-model="userForm.email" />
      </el-form-item>
      
      <el-form-item label="部门">
        <el-input v-model="userForm.deptName" disabled />
      </el-form-item>
      
      <el-form-item label="个人简介">
        <el-input 
          v-model="userForm.bio" 
          type="textarea" 
          :rows="4"
          placeholder="介绍一下自己吧..."
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

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

// 默认头像
const defaultAvatar = new URL('@/assets/imgs/default-avatar.png', import.meta.url).href;

const userForm = ref({
  avatar: '',
  username: '',
  realName: '',
  gender: 1,
  phone: '',
  email: '',
  deptName: '',
  bio: ''
});

onMounted(() => {
  // TODO: 加载用户信息
  loadUserInfo();
});

function loadUserInfo() {
  // 模拟数据
  userForm.value = {
    avatar: '',
    username: '平台用户bc7a1b',
    realName: '张三',
    gender: 1,
    phone: '15268425987',
    email: 'zhangsan@example.com',
    deptName: '机械学院',
    bio: ''
  };
}

function handleAvatarUpload() {
  // TODO: 上传头像
  ElMessage.info('上传头像功能开发中');
}

function handleSave() {
  // TODO: 保存用户信息
  ElMessage.success('保存成功');
}

function handleCancel() {
  // 重置表单
  loadUserInfo();
}
</script>

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

.info-form {
  padding: 20px 0;
}

.avatar-upload {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e0e0e0;
}
</style>
