<template>
  <view class="user-home-container">
    <!-- 顶部导航栏 -->
    <view class="top-navbar">
      <text class="title">图片收集系统</text>
      <image class="avatar" src="@/static/common/user.svg" mode="aspectFit" @click="navigateTo('/pages/user-profile/user-profile')"></image>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y enable-back-to-top>
      <!-- 待完成任务区域 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">待完成任务</text>
          <text class="more" @click="navigateTo('/pages/task-management/task-management')">查看全部</text>
        </view>
        
        <view class="task-list">
          <view v-for="task in taskList" :key="task.id" class="task-card" @click="viewTaskDetail(task.id)">
            <view class="task-header">
              <text class="task-title">{{ task.title }}</text>
              <view class="task-status" :class="task.statusClass">
                {{ task.status }}
              </view>
            </view>
            <text class="task-desc">{{ task.description }}</text>
            <view class="task-footer">
              <text class="task-deadline">截止：{{ task.deadline }}</text>
              <text class="task-progress">{{ task.progress }}%</text>
            </view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: task.progress + '%' }"></view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 已上传图片区域 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">我的上传</text>
          <text class="more" @click="navigateTo('/pages/my-images/my-images')">查看全部</text>
        </view>
        
        <view class="image-grid">
          <view v-for="image in imageList" :key="image.id" class="image-item" @click="viewImageDetail(image.id)">
            <image class="image" :src="image.url" mode="aspectFill"></image>
            <text class="image-title">{{ image.title }}</text>
            <view class="image-status" :class="image.statusClass">
              {{ image.status }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 上传按钮 -->
    <view class="upload-btn" @click="navigateTo('/pages/image-upload/image-upload')">
      <u-icon name="plus" size="60"></u-icon>
    </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/image-upload/image-upload')">
        <u-icon name="camera" 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 {
      taskList: [
        {
          id: '1',
          title: '项目进度拍摄',
          description: '拍摄项目各环节的进度照片，要求清晰展示工作状态',
          deadline: '2023-12-31',
          progress: 60,
          status: '进行中',
          statusClass: 'status-ing'
        },
        {
          id: '2',
          title: '设备巡检',
          description: '对设备进行定期巡检并拍摄设备状态照片',
          deadline: '2023-12-15',
          progress: 30,
          status: '进行中',
          statusClass: 'status-ing'
        },
        {
          id: '3',
          title: '活动照片收集',
          description: '收集公司年会活动的精彩瞬间照片',
          deadline: '2024-01-10',
          progress: 10,
          status: '待开始',
          statusClass: 'status-waiting'
        }
      ],
      imageList: [
        {
          id: '1',
          title: '项目启动会',
          url: 'https://cdn.uviewui.com/uview/example/grid1.jpg',
          status: '已通过',
          statusClass: 'status-approved'
        },
        {
          id: '2',
          title: '设备安装现场',
          url: 'https://cdn.uviewui.com/uview/example/grid2.jpg',
          status: '审核中',
          statusClass: 'status-reviewing'
        },
        {
          id: '3',
          title: '团队协作',
          url: 'https://cdn.uviewui.com/uview/example/grid3.jpg',
          status: '已通过',
          statusClass: 'status-approved'
        },
        {
          id: '4',
          title: '会议记录',
          url: 'https://cdn.uviewui.com/uview/example/grid4.jpg',
          status: '已通过',
          statusClass: 'status-approved'
        },
        {
          id: '5',
          title: '现场勘查',
          url: 'https://cdn.uviewui.com/uview/example/grid5.jpg',
          status: '审核中',
          statusClass: 'status-reviewing'
        },
        {
          id: '6',
          title: '产品展示',
          url: 'https://cdn.uviewui.com/uview/example/grid6.jpg',
          status: '已拒绝',
          statusClass: 'status-rejected'
        }
      ]
    }
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({ url })
    },
    viewTaskDetail(taskId) {
      this.navigateTo(`/pages/task-detail/task-detail?id=${taskId}`)
    },
    viewImageDetail(imageId) {
      this.navigateTo(`/pages/image-detail/image-detail?id=${imageId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.user-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;
    }
    
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
  }
  
  .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-list {
      .task-card {
        padding: 20rpx 0;
        border-bottom: 2rpx solid #f5f7fa;
        
        &:last-child {
          border-bottom: none;
        }
        
        .task-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 10rpx;
          
          .task-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            flex: 1;
            margin-right: 20rpx;
          }
          
          .task-status {
            padding: 4rpx 16rpx;
            border-radius: 20rpx;
            font-size: 20rpx;
            
            &.status-ing {
              background-color: #e6f7ff;
              color: #1890ff;
            }
            
            &.status-waiting {
              background-color: #fff7e6;
              color: #fa8c16;
            }
          }
        }
        
        .task-desc {
          font-size: 24rpx;
          color: #606266;
          margin-bottom: 10rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .task-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;
          
          .task-deadline {
            font-size: 22rpx;
            color: #909399;
          }
          
          .task-progress {
            font-size: 24rpx;
            color: #1989fa;
          }
        }
        
        .progress-bar {
          height: 8rpx;
          background-color: #f5f7fa;
          border-radius: 4rpx;
          overflow: hidden;
          
          .progress-fill {
            height: 100%;
            background-color: #1989fa;
            border-radius: 4rpx;
          }
        }
      }
    }
    
    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16rpx;
      
      .image-item {
        position: relative;
        
        .image {
          width: 100%;
          aspect-ratio: 1;
          border-radius: 8rpx;
        }
        
        .image-title {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 10rpx;
          font-size: 22rpx;
          color: #ffffff;
          background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
          border-radius: 0 0 8rpx 8rpx;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .image-status {
          position: absolute;
          top: 10rpx;
          right: 10rpx;
          padding: 4rpx 16rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
          
          &.status-approved {
            background-color: rgba(82, 196, 26, 0.8);
            color: #ffffff;
          }
          
          &.status-reviewing {
            background-color: rgba(24, 144, 255, 0.8);
            color: #ffffff;
          }
          
          &.status-rejected {
            background-color: rgba(255, 73, 73, 0.8);
            color: #ffffff;
          }
        }
      }
    }
  }
  
  .upload-btn {
    position: fixed;
    right: 40rpx;
    bottom: 150rpx;
    width: 120rpx;
    height: 120rpx;
    background-color: #1989fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 4rpx 20rpx rgba(25, 137, 250, 0.4);
  }
  
  .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>