<template>
  <div class="user-info-container">
    <div class="page-header">
      <h2 class="page-title">个人信息</h2>
      <div class="page-actions">
        <el-button type="primary" @click="handleEdit" v-if="!isEditing">
          <el-icon><edit /></el-icon>编辑资料
        </el-button>
      </div>
    </div>
    
    <div class="profile-layout">
      <!-- 左侧用户基本信息卡片 -->
      <div class="profile-sidebar">
        <div class="profile-card">
          <div class="profile-avatar-container">
            <el-avatar 
              :size="120" 
              :src="userInfo.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" 
              class="profile-avatar"
            />
            <div class="profile-avatar-edit" v-if="isEditing">
              <el-upload
                class="avatar-uploader"
                action="/api/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <div class="upload-trigger">
                  <el-icon><upload-filled /></el-icon>
                  <span>更换头像</span>
                </div>
              </el-upload>
            </div>
          </div>
          <h3 class="profile-name">{{ userInfo.realName }}</h3>
          <div class="profile-title">{{ userInfo.position }}</div>
          <div class="profile-role">
            <el-tag type="success" effect="plain">{{ userInfo.role }}</el-tag>
          </div>
          <div class="profile-stats">
            <div class="stat-item">
              <div class="stat-value">{{ userInfo.department }}</div>
              <div class="stat-label">部门</div>
            </div>
            <div class="divider"></div>
            <div class="stat-item">
              <div class="stat-value">{{ formatDate(userInfo.lastLogin) }}</div>
              <div class="stat-label">最近登录</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧详细信息内容 -->
      <div class="profile-content">
        <!-- 查看模式 -->
        <div v-if="!isEditing" class="info-display">
          <el-card shadow="hover" class="info-card">
            <template #header>
              <div class="card-header">
                <el-icon><user /></el-icon>
                <span>账号信息</span>
              </div>
            </template>
            <div class="info-list">
              <div class="info-item">
                <span class="info-label">用户名</span>
                <span class="info-value">{{ userInfo.username }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">真实姓名</span>
                <span class="info-value">{{ userInfo.realName }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">邮箱</span>
                <span class="info-value">{{ userInfo.email }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">手机号</span>
                <span class="info-value">{{ userInfo.phone }}</span>
              </div>
            </div>
          </el-card>
          
          <el-card shadow="hover" class="info-card bio-card">
            <template #header>
              <div class="card-header">
                <el-icon><document /></el-icon>
                <span>个人简介</span>
              </div>
            </template>
            <div class="bio-content">
              {{ userInfo.bio || '暂无个人简介' }}
            </div>
          </el-card>
          
          <el-card shadow="hover" class="info-card">
            <template #header>
              <div class="card-header">
                <el-icon><timer /></el-icon>
                <span>时间信息</span>
              </div>
            </template>
            <div class="info-list">
              <div class="info-item">
                <span class="info-label">账号创建时间</span>
                <span class="info-value">{{ formatDateFull(userInfo.createTime) }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">最后登录时间</span>
                <span class="info-value">{{ formatDateFull(userInfo.lastLogin) }}</span>
              </div>
            </div>
          </el-card>
        </div>
        
        <!-- 编辑表单部分 -->
        <div v-else class="info-edit">
          <el-card shadow="hover" class="edit-card">
            <template #header>
              <div class="card-header">
                <el-icon><edit-pen /></el-icon>
                <span>编辑个人资料</span>
              </div>
            </template>
            <el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="100px" class="edit-form">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" disabled />
              </el-form-item>
              
              <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="userForm.realName" />
              </el-form-item>
              
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email">
                  <template #prefix>
                    <el-icon><message /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="userForm.phone">
                  <template #prefix>
                    <el-icon><phone /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              
              <el-form-item label="部门">
                <el-input v-model="userForm.department">
                  <template #prefix>
                    <el-icon><office-building /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              
              <el-form-item label="职位">
                <el-input v-model="userForm.position" />
              </el-form-item>
              
              <el-form-item label="个人简介">
                <el-input v-model="userForm.bio" type="textarea" :rows="4" resize="none" maxlength="200" show-word-limit />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="submitForm" :loading="loading">保存</el-button>
                <el-button @click="cancelEdit">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  User, Edit, Document, Timer, EditPen, Message, 
  Phone, OfficeBuilding, UploadFilled 
} from '@element-plus/icons-vue'
import { useUserStore } from '@/store/userStore.js'

// 是否处于编辑模式
const isEditing = ref(false)
const loading = ref(false)

const userStore = useUserStore()

// 从localStorage或store获取用户信息
const getSavedUserInfo = () => {
  const savedInfo = userStore.userInfo
  if (savedInfo && Object.keys(savedInfo).length > 0) {
    return {
      username: savedInfo.user_name || '',
      realName: savedInfo.real_name?.Name || savedInfo.user_name || '',
      email: savedInfo.email || '',
      phone: savedInfo.phone || '',
      department: savedInfo.admin_group?.name || '',
      position: savedInfo.is_admin ? '管理员' : '普通用户',
      role: savedInfo.admin_group?.name || '普通用户',
      createTime: savedInfo.created_at || '',
      lastLogin: savedInfo.created_at || '',
      bio: savedInfo.admin_group?.note || '',
      avatar: savedInfo.cover || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      sex: savedInfo.sex || '',
      age: savedInfo.age || '',
      userId: savedInfo.user_id || '',
      userGroup: savedInfo.user_group?.Name || ''
    }
  }
  return {
    username: '',
    realName: '',
    email: '',
    phone: '',
    department: '',
    position: '',
    role: '',
    createTime: '',
    lastLogin: '',
    bio: '',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    sex: '',
    age: '',
    userId: '',
    userGroup: ''
  }
}

// 用户信息数据
const userInfo = reactive(getSavedUserInfo())

// 表单数据
const userForm = reactive({...userInfo})

// 表单校验规则
const rules = {
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

const userFormRef = ref(null)

// 日期格式化函数
const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  const now = new Date()
  
  // 如果是今天，只显示时间
  if (date.toDateString() === now.toDateString()) {
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
  
  // 否则显示日期
  return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
}

// 完整日期格式化
const formatDateFull = (dateStr) => {
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 编辑按钮点击事件
const handleEdit = () => {
  Object.assign(userForm, userInfo)
  isEditing.value = true
}

// 取消编辑
const cancelEdit = () => {
  isEditing.value = false
}

// 提交表单
const submitForm = async () => {
  if (!userFormRef.value) return
  
  await userFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 更新本地用户信息
        Object.assign(userInfo, userForm)
        ElMessage.success('个人信息更新成功')
        isEditing.value = false
        loading.value = false
      } catch (error) {
        loading.value = false
        ElMessage.error('保存失败，请重试')
        console.error(error)
      }
    }
  })
}

// 头像上传成功回调
const handleAvatarSuccess = (res) => {
  userForm.avatar = res.url
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    // 从store获取最新用户信息
    const savedInfo = getSavedUserInfo()
    Object.assign(userInfo, savedInfo)
  } catch (error) {
    ElMessage.error('获取用户信息失败')
    console.error(error)
  }
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.user-info-container {
  padding: 24px;
  min-height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1a1f36;
}

.profile-layout {
  display: flex;
  gap: 24px;
}

.profile-sidebar {
  width: 300px;
  flex-shrink: 0;
}

.profile-content {
  flex: 1;
}

.profile-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 30px;
  text-align: center;
  margin-bottom: 24px;
}

.profile-avatar-container {
  position: relative;
  margin-bottom: 20px;
  display: inline-block;
}

.profile-avatar {
  border: 4px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.profile-avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: pointer;
}

.upload-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #409eff;
  color: white;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.5);
}

.upload-trigger span {
  display: none;
}

.upload-trigger:hover {
  width: auto;
  height: auto;
  border-radius: 18px;
  padding: 4px 12px;
}

.upload-trigger:hover span {
  display: inline-block;
  margin-left: 4px;
}

.profile-name {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #1a1f36;
}

.profile-title {
  color: #667085;
  font-size: 16px;
  margin-bottom: 14px;
}

.profile-role {
  margin-bottom: 24px;
}

.profile-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #edf2f7;
  padding-top: 20px;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  font-weight: 600;
  color: #333;
  font-size: 16px;
  margin-bottom: 4px;
}

.stat-label {
  color: #94a3b8;
  font-size: 12px;
}

.divider {
  width: 1px;
  height: 30px;
  background-color: #edf2f7;
  margin: 0 15px;
}

.info-card {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.bio-card {
  position: relative;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #1a1f36;
}

.card-header .el-icon {
  margin-right: 8px;
  font-size: 18px;
  color: #409eff;
}

.info-list {
  display: grid;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  width: 120px;
  color: #64748b;
  font-size: 14px;
}

.info-value {
  color: #334155;
  font-weight: 500;
  flex: 1;
}

.bio-content {
  color: #475569;
  line-height: 1.6;
  font-size: 14px;
  white-space: pre-line;
}

.edit-card {
  border-radius: 8px;
  overflow: hidden;
}

.edit-form {
  padding: 16px 0;
}

@media (max-width: 992px) {
  .profile-layout {
    flex-direction: column;
  }
  
  .profile-sidebar {
    width: 100%;
  }
  
  .profile-card {
    padding: 20px;
  }
}
</style> 