<!--
 * @Description: User Profile Page
 * @Author: gcz
 * @Date: 2025-03-10 17:37:39
 * @LastEditors: gcz
 * @LastEditTime: 2025-03-14 15:41:59
 * @FilePath: \knowledge_userui\src\views\UserInfo.vue
 * @Copyright: Copyright (c) 2016~2025 by gcz, All Rights Reserved. 
-->
<template>
  <div class="user-profile">
    <div class="profile-card">
      <div class="avatar-section">
        <div class="avatar-wrapper" @click="triggerUpload">
          <el-avatar 
            :size="100" 
            :src="userStore.userInfo.headUrl" 
            class="user-avatar">
            <img src="@/assets/user-avatar.png" />
          </el-avatar>
          <div class="avatar-overlay">
            <i class="el-icon-camera"></i>
            <span>更换头像</span>
          </div>
        </div>
        <input
          type="file"
          ref="fileInput"
          style="display: none"
          accept="image/*"
          @change="handleAvatarUpload"
        />
      </div>

      <div class="user-info">
        <h2>{{ userStore.userInfo.realName||userStore.userInfo.username }}</h2>
        <p class="department">{{ userStore.userInfo.deptName }}</p>
      </div>

      <el-button 
        type="danger" 
        class="logout-btn"
        @click="handleLogout">
        退出登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { get, post, del, put } from '../utils/request'
import { useUserStore } from '../stores/user'

const router = useRouter()
const fileInput = ref(null)
const userStore = useUserStore()


const triggerUpload = () => {
  fileInput.value.click()
}

const handleAvatarUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  const formData = new FormData()
  formData.append('file', file)

  try {
    const token = localStorage.getItem('token') // 获取存储的token
    // 上传文件
    const uploadRes = await post('/admin/sys/oss/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    console.log('uploadRes', uploadRes);

    if (uploadRes.data.url) {
      // 更新用户头像
      const updateRes = await put('/admin/sys/user/updateHead', {
        headUrl: uploadRes.data.url
      })
      console.log('updateRes', updateRes);
      if (updateRes.code === 0) {
        // userInfo.headUrl = uploadRes.data.url
        // 获取用户信息
        const userInfoRes = await get('/admin/sys/user/info')||{}
        userStore.setUserInfo(userInfoRes.data)
        // userStore.userInfo.headUrl = uploadRes.data.url
        ElMessage.success('头像更新成功')
      }
    }
  } catch (error) {
    ElMessage.error('头像上传失败')
    console.error('Upload error:', error)
  }
}

const handleLogout = () => {
  // 这里添加登出逻辑
  localStorage.removeItem('token')
  router.push('/login')
}
</script>

<style scoped>
.user-profile {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.profile-card {
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.avatar-section {
  margin-bottom: 24px;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}

.user-avatar {
  border: 4px solid #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.user-info {
  margin-bottom: 32px;
}

.user-info h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.department {
  color: #909399;
  margin: 8px 0 0;
}

.logout-btn {
  width: 100%;
  margin-top: 16px;
}
</style>
