<template>
  <div class="user-profile">
    <h1 class="page-title">个人信息</h1>
    
    <el-form :model="userForm" label-width="100px" class="profile-form">
      <el-form-item label="头像">
        <div class="avatar-upload">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadAvatar"
          >
            <img v-if="userForm.avatar" :src="userForm.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <el-progress v-if="uploadProgress > 0 && uploadProgress < 100" 
                      :percentage="uploadProgress" />
        </div>
      </el-form-item>
      
      <el-form-item label="用户名">
        <el-input v-model="userForm.name" />
      </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.phone" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="saveProfile">保存修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '../../stores/user'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { upload } from '../../utils/request'
import { updateUserProfile } from '../../api/user'

const userStore = useUserStore()
const loading = ref(false)

const userForm = ref({
  name: userStore.userInfo.name,
  avatar: userStore.userInfo.avatar,
  email: userStore.userInfo.email,
  phone: userStore.userInfo.phone
})
const uploadProgress = ref(0)

const saveProfile = async () => {
  loading.value = true
  try {
    const res = await updateUserProfile(userStore.userInfo.id, userForm.value)
    userStore.setUserInfo(res.data)
    ElMessage.success('个人信息保存成功')
  } catch (error) {
    console.error('保存个人信息失败:', error)
  } finally {
    loading.value = false
  }
}

// 上传前验证
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('头像图片只能是 JPG 或 PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

// 自定义上传方法
const uploadAvatar = async (options) => {
  try {
    uploadProgress.value = 0
    const res = await upload('/user/avatar', options.file, (progress) => {
      uploadProgress.value = progress
    })
    
    // 假设后端返回的数据结构是 { code: 200, data: { avatarUrl }, message: 'success' }
    userForm.value.avatar = res.data.avatarUrl
    userStore.updateUserAvatar(res.data.avatarUrl)
    ElMessage.success('头像上传成功')
  } catch (error) {
    console.error('头像上传失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.user-profile {
  .profile-form {
    max-width: 500px;
    margin-top: 20px;
  }
  
  .avatar-upload {
    .avatar-uploader {
      width: 120px;
      height: 120px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      &:hover {
        border-color: #409EFF;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        line-height: 120px;
      }
    }
  }
}
</style> 