<template>
  <view class="user-profile-container">
    <!-- 顶部导航栏 -->
    <view class="top-navbar">
      <text class="title">个人中心</text>
      <text class="settings" @click="goToSettings">设置</text>
    </view>
    
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info">
        <view class="avatar">
          <image :src="userInfo.avatar" mode="aspectFill"></image>
        </view>
        <view class="info">
          <text class="name">{{ userInfo.name }}</text>
          <text class="role">{{ userInfo.roleName }}</text>
          <text class="department">{{ userInfo.department }}</text>
        </view>
      </view>
      <view class="user-stats">
        <view class="stat-item">
          <text class="count">{{ userInfo.uploadCount }}</text>
          <text class="label">上传总数</text>
        </view>
        <view class="stat-item">
          <text class="count">{{ userInfo.passedCount }}</text>
          <text class="label">审核通过</text>
        </view>
        <view class="stat-item">
          <text class="count">{{ userInfo.taskCount }}</text>
          <text class="label">参与任务</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-item" @click="viewMyUploads">
        <view class="menu-left">
          <u-icon name="image" size="32" color="#606266"></u-icon>
          <text class="menu-title">我的上传</text>
        </view>
        <u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
      </view>
      <view class="menu-item" @click="viewMyTasks">
        <view class="menu-left">
          <u-icon name="task-list" size="32" color="#606266"></u-icon>
          <text class="menu-title">我的任务</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
      </view>
      <view class="menu-item" @click="viewReviewHistory">
        <view class="menu-left">
          <u-icon name="time" size="32" color="#606266"></u-icon>
          <text class="menu-title">审核历史</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
      </view>
    </view>
    
    <!-- 系统设置 -->
    <view class="menu-section">
      <view class="menu-item" @click="goToAccountSettings">
        <view class="menu-left">
          <u-icon name="account" size="32" color="#606266"></u-icon>
          <text class="menu-title">账号与安全</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
      </view>
      <view class="menu-item" @click="goToNotificationSettings">
        <view class="menu-left">
          <u-icon name="bell" size="32" color="#606266"></u-icon>
          <text class="menu-title">通知设置</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
      </view>
      <view class="menu-item" @click="goToPrivacySettings">
        <view class="menu-left">
          <u-icon name="lock" size="32" color="#606266"></u-icon>
          <text class="menu-title">隐私设置</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
      </view>
    </view>
    
    <!-- 关于 -->
    <view class="menu-section">
      <view class="menu-item" @click="viewAbout">
        <view class="menu-left">
          <u-icon name="info" size="32" color="#606266"></u-icon>
          <text class="menu-title">关于我们</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
      </view>
      <view class="menu-item" @click="viewHelp">
        <view class="menu-left">
          <u-icon name="help-circle" size="32" color="#606266"></u-icon>
          <text class="menu-title">帮助与反馈</text>
        </view>
        <u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
      </view>
    </view>
    
    <!-- 退出登录按钮 -->
    <button class="logout-btn" @click="showLogoutConfirm">退出登录</button>
    
    <!-- 退出登录确认弹窗 -->
    <u-modal v-model="showLogoutModal" title="确认退出" @confirm="logout" :close-on-click-modal="false">
      <text class="modal-content">确定要退出登录吗？</text>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息（演示数据）
      userInfo: {
        name: '张三',
        roleName: '普通用户',
        department: '研发部',
        avatar: '/static/uview/example/avatar.jpg',
        uploadCount: 28,
        passedCount: 25,
        taskCount: 5
      },
      showLogoutModal: false
    }
  },
  methods: {
    // 导航方法
    goToSettings() {
      this.$u.toast('设置页面待实现')
    },
    viewMyUploads() {
      this.$u.toast('我的上传页面待实现')
    },
    viewMyTasks() {
      uni.switchTab({
        url: '/pages/task-management/task-management'
      })
    },
    viewReviewHistory() {
      this.$u.toast('审核历史页面待实现')
    },
    goToAccountSettings() {
      this.$u.toast('账号与安全页面待实现')
    },
    goToNotificationSettings() {
      this.$u.toast('通知设置页面待实现')
    },
    goToPrivacySettings() {
      this.$u.toast('隐私设置页面待实现')
    },
    viewAbout() {
      this.$u.toast('关于我们页面待实现')
    },
    viewHelp() {
      this.$u.toast('帮助与反馈页面待实现')
    },
    
    // 退出登录相关
    showLogoutConfirm() {
      this.showLogoutModal = true
    },
    logout() {
      // 模拟退出登录
      this.showLogoutModal = false
      this.$u.toast('退出登录成功')
      
      // 延迟跳转到登录页
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/login/index'
        })
      }, 1000)
    }
  },
  onLoad() {
    // 实际项目中，这里应该从后端获取用户信息
    // this.getUserInfo()
  }
}
</script>

<style lang="scss" scoped>
.user-profile-container {
  padding-top: 44px; // 适配顶部导航栏
  height: 100vh;
  box-sizing: border-box;
  background-color: #f5f7fa;
  
  .top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 999;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .settings {
      font-size: 32rpx;
      color: #1989fa;
    }
  }
  
  // 用户信息卡片
  .user-card {
    background-color: #ffffff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      
      .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 70rpx;
        overflow: hidden;
        margin-right: 30rpx;
        
        image {
          width: 100%;
          height: 100%;
        }
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .role {
          font-size: 28rpx;
          color: #1989fa;
          background-color: #ecf5ff;
          padding: 3rpx 15rpx;
          border-radius: 15rpx;
          display: inline-block;
          margin-bottom: 8rpx;
        }
        
        .department {
          font-size: 26rpx;
          color: #909399;
        }
      }
    }
    
    // 用户统计
    .user-stats {
      display: flex;
      justify-content: space-around;
      padding-top: 20rpx;
      border-top: 2rpx solid #f0f2f5;
      
      .stat-item {
        text-align: center;
        
        .count {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          display: block;
          margin-bottom: 5rpx;
        }
        
        .label {
          font-size: 24rpx;
          color: #909399;
        }
      }
    }
  }
  
  // 功能菜单区域
  .menu-section {
    background-color: #ffffff;
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      
      &:not(:last-child) {
        border-bottom: 2rpx solid #f0f2f5;
      }
      
      .menu-left {
        display: flex;
        align-items: center;
        
        u-icon {
          margin-right: 20rpx;
        }
        
        .menu-title {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
  
  // 退出登录按钮
  .logout-btn {
    margin: 50rpx 20rpx 30rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    background-color: #ffffff;
    color: #f56c6c;
    border: 2rpx solid #f56c6c;
    border-radius: 45rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  // 弹窗内容样式
  .modal-content {
    display: block;
    text-align: center;
    font-size: 28rpx;
    color: #606266;
    padding: 20rpx 0;
  }
}
</style>