<template>
  <view class="admin-home-container">
    <!-- 顶部导航栏 -->
    <view class="top-navbar">
      <text class="title">图片收集系统</text>
      <view class="user-info" @click="navigateTo('/pages/user-profile/user-profile')">
        <image class="avatar" src="@/static/common/admin.svg" mode="aspectFit"></image>
        <text class="user-name">{{ currentUser.name }}</text>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y enable-back-to-top>
      <!-- 待处理任务卡片 -->
      <view class="section task-section">
        <view class="task-card">
          <view class="task-item">
            <text class="task-number">{{ pendingImages }}</text>
            <text class="task-label">待审核图片</text>
          </view>
          <view class="task-item">
            <text class="task-number">{{ pendingTasks }}</text>
            <text class="task-label">待完成任务</text>
          </view>
          <view class="task-item">
            <text class="task-number">{{ totalDepartments }}</text>
            <text class="task-label">管理部门</text>
          </view>
        </view>
      </view>
      
      <!-- 统计数据卡片 -->
      <view class="section stats-section">
        <view class="section-header">
          <text class="section-title">数据统计</text>
        </view>
        <view class="stats-cards">
          <view class="stat-card">
            <text class="stat-number">{{ totalImages }}</text>
            <text class="stat-label">总图片数</text>
          </view>
          <view class="stat-card">
            <text class="stat-number">{{ totalUsers }}</text>
            <text class="stat-label">用户总数</text>
          </view>
          <view class="stat-card">
            <text class="stat-number">{{ totalTasks }}</text>
            <text class="stat-label">任务总数</text>
          </view>
          <view class="stat-card">
            <text class="stat-number">{{ todayUploads }}</text>
            <text class="stat-label">今日上传</text>
          </view>
        </view>
      </view>
      
      <!-- 上传趋势图表 -->
      <view class="section chart-section">
        <view class="section-header">
          <text class="section-title">近期上传趋势</text>
        </view>
        <view class="chart-container">
          <!-- 简单的柱状图模拟 -->
          <view class="bar-chart">
            <view v-for="(item, index) in chartData" :key="index" class="chart-bar">
              <view class="bar" :style="{ height: item.value + '%' }"></view>
              <text class="bar-label">{{ item.label }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 部门任务进度 -->
      <view class="section dept-section">
        <view class="section-header">
          <text class="section-title">部门任务进度</text>
        </view>
        <view class="dept-progress-list">
          <view v-for="dept in departmentProgress" :key="dept.id" class="dept-progress-item">
            <view class="dept-info">
              <text class="dept-name">{{ dept.name }}</text>
              <text class="dept-progress">{{ dept.progress }}%</text>
            </view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: dept.progress + '%' }"></view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 最新上传图片 -->
      <view class="section images-section">
        <view class="section-header">
          <text class="section-title">最新上传</text>
          <text class="more" @click="navigateTo('/pages/image-management/image-management')">查看全部</text>
        </view>
        <view class="image-list">
          <view v-for="image in recentImages" :key="image.id" class="image-item" @click="viewImageDetail(image.id)">
            <image class="image" :src="image.url" mode="aspectFill"></image>
            <view class="image-info">
              <text class="image-title">{{ image.title }}</text>
              <text class="image-uploader">{{ image.uploader }}</text>
              <text class="image-time">{{ image.time }}</text>
              <view class="image-status" :class="image.statusClass">
                {{ image.status }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item active">
        <u-icon name="home" size="44"></u-icon>
        <text>首页</text>
      </view>
      <view class="tab-item" @click="navigateTo('/pages/task-management/task-management')">
        <u-icon name="todo-list" size="44"></u-icon>
        <text>任务</text>
      </view>
      <view class="tab-item" @click="navigateTo('/pages/user-profile/user-profile')">
        <u-icon name="user" size="44"></u-icon>
        <text>我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentUser: {
        name: '管理员',
        role: 'admin'
      },
      // 统计数据
      pendingImages: 28,
      pendingTasks: 12,
      totalDepartments: 6,
      totalImages: 1286,
      totalUsers: 256,
      totalTasks: 78,
      todayUploads: 56,
      // 图表数据
      chartData: [
        { label: '周一', value: 45 },
        { label: '周二', value: 65 },
        { label: '周三', value: 40 },
        { label: '周四', value: 80 },
        { label: '周五', value: 75 },
        { label: '周六', value: 30 },
        { label: '周日', value: 20 }
      ],
      // 部门进度数据
      departmentProgress: [
        { id: '1', name: '研发部', progress: 85 },
        { id: '2', name: '市场部', progress: 62 },
        { id: '3', name: '行政部', progress: 90 },
        { id: '4', name: '财务部', progress: 75 },
        { id: '5', name: '人力资源部', progress: 88 },
        { id: '6', name: '销售部', progress: 55 }
      ],
      // 最新上传图片
      recentImages: [
        {
          id: '1',
          title: '2023年度总结会议',
          url: 'https://cdn.uviewui.com/uview/example/album1.jpg',
          uploader: '张三',
          department: '行政部',
          time: '10:23',
          status: '待审核',
          statusClass: 'status-pending'
        },
        {
          id: '2',
          title: '新品发布会现场',
          url: 'https://cdn.uviewui.com/uview/example/album2.jpg',
          uploader: '李四',
          department: '市场部',
          time: '09:45',
          status: '已通过',
          statusClass: 'status-approved'
        },
        {
          id: '3',
          title: '产品原型设计',
          url: 'https://cdn.uviewui.com/uview/example/album3.jpg',
          uploader: '王五',
          department: '研发部',
          time: '08:30',
          status: '已通过',
          statusClass: 'status-approved'
        }
      ]
    }
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    viewImageDetail(imageId) {
      this.navigateTo(`/pages/image-detail/image-detail?id=${imageId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.admin-home-container {
  padding-top: 44px; // 适配顶部安全区域
  padding-bottom: 120rpx; // 适配底部导航栏
  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;
    }
    
    .user-info {
      display: flex;
      align-items: center;
      
      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }
      
      .user-name {
        font-size: 28rpx;
        color: #606266;
      }
    }
  }
  
  .content {
    height: calc(100% - 44px);
    padding: 20rpx;
  }
  
  .section {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .more {
        font-size: 28rpx;
        color: #1989fa;
      }
    }
    
    // 任务卡片样式
    &.task-section {
      .task-card {
        display: flex;
        justify-content: space-between;
        
        .task-item {
          flex: 1;
          text-align: center;
          padding: 20rpx;
          
          &:not(:last-child) {
            border-right: 2rpx solid #f5f7fa;
          }
          
          .task-number {
            font-size: 40rpx;
            font-weight: bold;
            color: #1989fa;
            display: block;
          }
          
          .task-label {
            font-size: 24rpx;
            color: #606266;
            margin-top: 10rpx;
            display: block;
          }
        }
      }
    }
    
    // 统计卡片样式
    &.stats-section {
      .stats-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
        
        .stat-card {
          background-color: #f8f8f8;
          padding: 20rpx;
          border-radius: 12rpx;
          text-align: center;
          
          .stat-number {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            display: block;
          }
          
          .stat-label {
            font-size: 24rpx;
            color: #606266;
            margin-top: 10rpx;
            display: block;
          }
        }
      }
    }
    
    // 图表样式
    &.chart-section {
      .chart-container {
        height: 300rpx;
        
        .bar-chart {
          display: flex;
          align-items: flex-end;
          height: 100%;
          padding-bottom: 30rpx;
          
          .chart-bar {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            
            .bar {
              width: 60rpx;
              background-color: #1989fa;
              border-radius: 8rpx 8rpx 0 0;
              margin-bottom: 10rpx;
            }
            
            .bar-label {
              font-size: 22rpx;
              color: #909399;
            }
          }
        }
      }
    }
    
    // 部门进度样式
    &.dept-section {
      .dept-progress-list {
        .dept-progress-item {
          margin-bottom: 20rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .dept-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10rpx;
            
            .dept-name {
              font-size: 28rpx;
              color: #333;
            }
            
            .dept-progress {
              font-size: 26rpx;
              color: #1989fa;
              font-weight: bold;
            }
          }
          
          .progress-bar {
            height: 10rpx;
            background-color: #f5f7fa;
            border-radius: 5rpx;
            overflow: hidden;
            
            .progress-fill {
              height: 100%;
              background-color: #1989fa;
              border-radius: 5rpx;
            }
          }
        }
      }
    }
    
    // 图片列表样式
    &.images-section {
      .image-list {
        .image-item {
          display: flex;
          padding: 15rpx 0;
          border-bottom: 2rpx solid #f5f7fa;
          
          &:last-child {
            border-bottom: none;
          }
          
          .image {
            width: 160rpx;
            height: 120rpx;
            border-radius: 8rpx;
            margin-right: 20rpx;
          }
          
          .image-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            
            .image-title {
              font-size: 28rpx;
              color: #333;
              font-weight: bold;
            }
            
            .image-uploader {
              font-size: 24rpx;
              color: #606266;
              margin-top: 5rpx;
            }
            
            .image-time {
              font-size: 22rpx;
              color: #909399;
              margin-top: 5rpx;
            }
            
            .image-status {
              align-self: flex-start;
              padding: 4rpx 16rpx;
              border-radius: 20rpx;
              font-size: 20rpx;
              margin-top: 10rpx;
              
              &.status-pending {
                background-color: #fff7e6;
                color: #fa8c16;
              }
              
              &.status-approved {
                background-color: #f6ffed;
                color: #52c41a;
              }
            }
          }
        }
      }
    }
  }
  
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background-color: #ffffff;
    display: flex;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      color: #909399;
      
      &.active {
        color: #1989fa;
      }
      
      text {
        margin-top: 8rpx;
      }
    }
  }
}
</style>