<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="用户信息修改"
    width="500px"
    :before-close="handleClose"
    class="user-profile-modal"
  >
    <div class="profile-content">
      <!-- 头像上传区域 -->
      <div class="avatar-section">
        <div class="avatar-wrapper">
          <el-avatar
            :size="80"
            :src="userInfo.avatar || '/default-avatar.png'"
            class="user-avatar"
          />
          <div class="avatar-overlay">
            <el-icon class="upload-icon"><Camera /></el-icon>
          </div>
        </div>
        <el-upload
          class="avatar-upload"
          action="#"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          accept="image/*"
        >
          <el-button type="primary" size="small" class="upload-btn">
            更换头像
          </el-button>
        </el-upload>
      </div>

      <!-- 用户信息表单 -->
      <el-form
        ref="formRef"
        :model="userInfo"
        :rules="rules"
        label-width="80px"
        class="profile-form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="userInfo.username"
            placeholder="请输入用户名"
            class="form-input"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" class="cancel-btn" style="background-color: #f5f5f5; border-color: #dcdfe6; color: black">取消</el-button>
        <el-button type="primary" @click="handleSave" class="save-btn" style="background-color: #f5f5f5; border-color: #dcdfe6; color: black;">
          保存修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits } from 'vue'
import { Camera } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getPostSignature } from '../api/files'
import { useUserStore } from '../store/user'
import { updateUserProfile, getCurrentUser } from '../api/user'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    default: () => ({
      username: '',
      avatar: ''
    })
  }
})

const emit = defineEmits(['update:visible', 'save'])

// 获取用户store
const userStore = useUserStore()

const formRef = ref()
const userInfo = reactive({
  username: '',
  avatar: ''
})

// 监听props变化，更新本地数据
import { watch } from 'vue'

watch(() => props.userInfo, (newUserInfo) => {
  if (newUserInfo) {
    userInfo.username = newUserInfo.username || ''
    userInfo.avatar = newUserInfo.avatar || ''
  }
}, { immediate: true, deep: true })

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度在 2 到 20 个字符', trigger: 'blur' }
  ]
}

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false)
}

// 保存修改
const handleSave = async () => {
  try {
    await formRef.value.validate()
    
    // 调用更新用户信息接口
    try {
      const updateData = {
        username: userInfo.username,
        avatarUrl: userInfo.avatar || props.userInfo.avatar || ''
      }
      
      const updateResponse = await updateUserProfile(updateData)
      
      if (updateResponse.code === 200) {
        console.log('用户信息更新成功:', updateResponse)
        
        // 获取最新的用户信息
        const userInfoResponse = await getCurrentUser()
        
        if (userInfoResponse.code === 200) {
          console.log('获取最新用户信息成功:', userInfoResponse.data)
          
          // 更新全局状态库
          userStore.updateUserInfo(userInfoResponse.data)
    
    // 发送保存事件，让父组件处理用户信息更新
          emit('save', userInfoResponse.data)
    ElMessage.success('保存成功')
    handleClose()
        } else {
          console.error('获取最新用户信息失败:', userInfoResponse)
          ElMessage.warning('保存成功，但获取最新用户信息失败')
          emit('save', userInfo)
          handleClose()
        }
      } else {
        console.error('更新用户信息失败:', updateResponse)
        ElMessage.error(updateResponse.message || '保存失败')
      }
    } catch (error) {
      console.error('更新用户信息时发生错误:', error)
      // axios拦截器已经处理了认证错误，这里只需要处理其他错误
      ElMessage.error('保存失败，请重试')
    }
  } catch (error) {
    ElMessage.error('请检查表单信息')
  }
}

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

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG/PNG 格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
    return false
  }
  
  try {
    // 从userStore获取用户信息
    const storeUserInfo = userStore.getUserInfo
    console.log('userStore中的用户信息:', storeUserInfo)
    
    let userId = null
    
    // 从userStore获取用户ID
    if (storeUserInfo && storeUserInfo.id) {
      userId = storeUserInfo.id
      console.log('从userStore获取的用户ID:', userId)
    }
    
    // 如果userStore中没有用户ID，尝试从props获取
    if (!userId && props.userInfo && props.userInfo.id) {
      userId = props.userInfo.id
      console.log('从props获取的用户ID:', userId)
    }
    
    // 如果还是没有用户ID，使用默认值（参考PersonalCenterBanner.vue）
    if (!userId) {
      userId = '7079689' // 使用默认用户ID
      console.log('使用默认用户ID:', userId)
    }
    
    console.log('最终使用的用户ID:', userId)
    
    // 获取POST签名
    const response = await getPostSignature({
      fileName: file.name,
      userId: userId
    })
    
    console.log('POST签名响应:', response)
    
    if (response.code === 200 && response.data) {
      const signatureData = response.data
      
      // 创建FormData
      const formData = new FormData()
      
      // 使用后端返回的dir生成文件key
      const fileKey = signatureData.dir + Date.now() + '_' + file.name
      
      console.log('文件key:', fileKey)
      
      // COS POST 表单上传必需字段
      formData.append('key', fileKey)
      formData.append('policy', signatureData.policy)
      formData.append('q-sign-algorithm', signatureData['q-sign-algorithm'])
      formData.append('q-ak', signatureData['q-ak'])
      formData.append('q-key-time', signatureData['q-key-time'])
      formData.append('q-signature', signatureData['q-signature'])
      formData.append('file', file)
      
      // 打印FormData内容用于调试
      console.log('FormData内容:')
      for (let [key, value] of formData.entries()) {
        if (key === 'file') {
          console.log(key + ': [File] ' + value.name + ' (' + value.size + ' bytes)')
        } else {
          console.log(key + ': ' + value)
        }
      }
      
      console.log('上传到COS:', signatureData.host)
      console.log('文件路径:', fileKey)
      
      // 上传到COS
      const uploadResponse = await fetch(signatureData.host, {
        method: 'POST',
        body: formData
      })
      
      console.log('上传响应状态:', uploadResponse.status)
      console.log('上传响应头:', Object.fromEntries(uploadResponse.headers.entries()))
      
      if (uploadResponse.ok) {
        const responseText = await uploadResponse.text()
        console.log('上传成功！响应内容:', responseText)
        
        // 上传成功，使用后端返回的host构建文件URL
        const fileUrl = `${signatureData.host}/${fileKey}`
        userInfo.avatar = fileUrl
        
        // 调用更新用户信息接口
        try {
          const updateData = {
            username: userInfo.username || props.userInfo.username || '',
            avatarUrl: fileUrl
          }
          
          const updateResponse = await updateUserProfile(updateData)
          
          if (updateResponse.code === 200) {
            console.log('用户信息更新成功:', updateResponse)
            
            // 直接更新本地头像URL，不需要再次获取用户信息
            userInfo.avatar = fileUrl
            
            // 更新全局状态库（使用本地数据）
            const updatedUserInfo = {
              ...userStore.getUserInfo,
              avatarUrl: fileUrl
            }
            userStore.updateUserInfo(updatedUserInfo)
            
            ElMessage.success('头像上传成功，用户信息已更新')
          } else {
            console.error('更新用户信息失败:', updateResponse)
            ElMessage.warning('头像上传成功，但更新用户信息失败')
          }
        } catch (error) {
          console.error('更新用户信息时发生错误:', error)
          // axios拦截器已经处理了认证错误，这里只需要处理其他错误
          ElMessage.warning('头像上传成功，但更新用户信息时发生错误')
        }
      } else {
        const errorText = await uploadResponse.text()
        console.error('上传失败，状态码:', uploadResponse.status)
        console.error('响应文本:', errorText)
        ElMessage.error('头像上传失败')
      }
    } else {
      ElMessage.error('获取上传签名失败')
    }
  } catch (error) {
    console.error('头像上传错误:', error)
    ElMessage.error('头像上传失败，请重试')
  }
  
  return false // 阻止默认上传行为
}
</script>

<style scoped>
.user-profile-modal {
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --text-color: #303133;
  --text-color-secondary: #606266;
  --border-color: #dcdfe6;
  --background-color: #f5f7fa;
  --white: #ffffff;
  --black: #000000;
  --gray-light: #f5f5f5;
  --gray-medium: #e0e0e0;
  --gray-dark: #666666;
}

.user-profile-modal :deep(.el-dialog) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-profile-modal :deep(.el-dialog__header) {
  background: var(--gray-light);
  border-bottom: 1px solid var(--border-color);
  padding: 20px 24px;
}

.user-profile-modal :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
}

.user-profile-modal :deep(.el-dialog__body) {
  padding: 24px;
}

.user-profile-modal :deep(.el-dialog__footer) {
  background: var(--gray-light);
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
}

.profile-content {
  max-height: 500px;
  overflow-y: auto;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--gray-light);
  border-radius: 8px;
}

.avatar-wrapper {
  position: relative;
  margin-bottom: 16px;
}

.user-avatar {
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

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

.upload-icon {
  color: var(--white);
  font-size: 20px;
}

.upload-btn {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

.upload-btn:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.profile-form {
  margin-top: 20px;
}

.form-input {
  width: 100%;
}

.form-input :deep(.el-input__wrapper) {
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.form-input :deep(.el-input__wrapper:hover) {
  border-color: var(--primary-color);
}

.form-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px var(--primary-color);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  background: var(--white);
  border-color: var(--border-color);
  color: var(--text-color);
}

.cancel-btn:hover {
  background: var(--gray-light);
  border-color: var(--gray-medium);
}

.save-btn {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

.save-btn:hover {
  background: #337ecc;
  border-color: #337ecc;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-profile-modal :deep(.el-dialog) {
    width: 90% !important;
    margin: 5vh auto;
  }
}
</style> 