<template>
  <view class="task-management-container">
    <!-- 顶部导航栏 -->
    <view class="top-navbar">
      <text class="title">任务管理</text>
    </view>
    
    <!-- 筛选器 -->
    <view class="filter-bar">
      <view class="filter-item" :class="{ active: activeFilter === 'all' }" @click="activeFilter = 'all'">
        <text>全部</text>
      </view>
      <view class="filter-item" :class="{ active: activeFilter === 'pending' }" @click="activeFilter = 'pending'">
        <text>待完成</text>
      </view>
      <view class="filter-item" :class="{ active: activeFilter === 'completed' }" @click="activeFilter = 'completed'">
        <text>已完成</text>
      </view>
    </view>
    
    <!-- 任务列表 -->
    <scroll-view class="task-list" scroll-y>
      <view v-if="filteredTasks.length === 0" class="empty-state">
        <u-icon name="task-list" size="120" color="#c0c4cc"></u-icon>
        <text class="empty-text">暂无任务</text>
      </view>
      
      <view 
        v-for="task in filteredTasks" 
        :key="task.id" 
        class="task-card" 
        @click="viewTaskDetail(task)"
      >
        <!-- 任务标题和状态 -->
        <view class="task-header">
          <text class="task-title">{{ task.title }}</text>
          <view class="task-status" :class="task.status">
            <text>{{ getStatusText(task.status) }}</text>
          </view>
        </view>
        
        <!-- 任务信息 -->
        <view class="task-info">
          <view class="info-item">
            <u-icon name="calendar" size="24" color="#909399"></u-icon>
            <text>截止日期：{{ task.deadline }}</text>
          </view>
          <view class="info-item">
            <u-icon name="time" size="24" color="#909399"></u-icon>
            <text>创建时间：{{ task.createTime }}</text>
          </view>
        </view>
        
        <!-- 任务描述 -->
        <text class="task-description">{{ task.description }}</text>
        
        <!-- 完成进度 -->
        <view class="progress-container">
          <view class="progress-info">
            <text>完成进度</text>
            <text>{{ task.progress }}%</text>
          </view>
          <u-progress :percent="task.progress" height="8" active></u-progress>
        </view>
        
        <!-- 附件信息 -->
        <view class="attachments">
          <u-icon name="image" size="24" color="#909399"></u-icon>
          <text>已上传 {{ task.uploadedCount }}/{{ task.totalCount }} 张图片</text>
        </view>
        
        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button v-if="task.status === 'pending'" class="upload-btn" @click.stop="navigateToUpload(task)">
            上传图片
          </button>
          <button v-if="task.status === 'pending' && task.uploadedCount > 0" class="preview-btn" @click.stop="viewUploadedImages(task)">
            查看已上传
          </button>
        </view>
      </view>
    </scroll-view>
    
    <!-- 任务详情弹窗 -->
    <u-modal v-model="showTaskDetail" title="任务详情" :close-on-click-modal="false">
      <view class="task-detail">
        <view class="detail-item">
          <text class="detail-label">任务标题：</text>
          <text class="detail-value">{{ selectedTask.title }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">任务状态：</text>
          <text class="detail-value status" :class="selectedTask.status">
            {{ getStatusText(selectedTask.status) }}
          </text>
        </view>
        <view class="detail-item">
          <text class="detail-label">发布部门：</text>
          <text class="detail-value">{{ selectedTask.department }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">创建时间：</text>
          <text class="detail-value">{{ selectedTask.createTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">截止日期：</text>
          <text class="detail-value">{{ selectedTask.deadline }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">任务描述：</text>
          <text class="detail-value description">{{ selectedTask.description }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">图片要求：</text>
          <text class="detail-value">{{ selectedTask.totalCount }} 张</text>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeFilter: 'all',
      tasks: [
        {
          id: '1',
          title: '研发部办公环境更新拍摄',
          description: '对研发部新装修的办公区域进行全面拍摄，包括公共区域、会议室、办公工位等，要求多角度拍摄，清晰展示新环境特点。',
          deadline: '2024-12-31',
          createTime: '2024-12-20',
          status: 'pending',
          progress: 30,
          uploadedCount: 3,
          totalCount: 10,
          department: '行政部'
        },
        {
          id: '2',
          title: '产品测试场景照片收集',
          description: '为新产品测试提供实际使用场景照片，需要包含不同角度、不同光线条件下的产品展示，用于产品宣传材料制作。',
          deadline: '2024-12-28',
          createTime: '2024-12-18',
          status: 'pending',
          progress: 50,
          uploadedCount: 5,
          totalCount: 10,
          department: '产品部'
        },
        {
          id: '3',
          title: '公司年会筹备照片',
          description: '记录年会筹备过程中的重要环节和准备工作，包括场地布置、物资准备、彩排等场景，用于后续宣传报道。',
          deadline: '2024-12-25',
          createTime: '2024-12-15',
          status: 'completed',
          progress: 100,
          uploadedCount: 12,
          totalCount: 10,
          department: '人力资源部'
        },
        {
          id: '4',
          title: '设备巡检照片记录',
          description: '对公司服务器机房设备进行巡检并拍照记录，要求每个设备的正面、侧面、背面都要拍摄，并重点关注有异常的设备。',
          deadline: '2025-01-10',
          createTime: '2024-12-22',
          status: 'pending',
          progress: 0,
          uploadedCount: 0,
          totalCount: 15,
          department: 'IT运维部'
        },
        {
          id: '5',
          title: '新项目启动会议照片',
          description: '记录新项目启动会议的全过程，包括会议前准备、会议进行、讨论环节、合影等，用于项目文档和宣传。',
          deadline: '2024-12-23',
          createTime: '2024-12-21',
          status: 'completed',
          progress: 100,
          uploadedCount: 8,
          totalCount: 8,
          department: '项目部'
        }
      ],
      showTaskDetail: false,
      selectedTask: {}
    }
  },
  computed: {
    filteredTasks() {
      if (this.activeFilter === 'all') {
        return this.tasks
      } else if (this.activeFilter === 'pending') {
        return this.tasks.filter(task => task.status === 'pending')
      } else if (this.activeFilter === 'completed') {
        return this.tasks.filter(task => task.status === 'completed')
      }
      return this.tasks
    }
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        'pending': '待完成',
        'completed': '已完成'
      }
      return statusMap[status] || '未知'
    },
    viewTaskDetail(task) {
      this.selectedTask = { ...task }
      this.showTaskDetail = true
    },
    navigateToUpload(task) {
      uni.navigateTo({
        url: '/pages/image-upload/image-upload?taskId=' + task.id + '&taskName=' + encodeURIComponent(task.title)
      })
    },
    viewUploadedImages(task) {
      this.$u.toast('查看已上传图片功能待实现')
    }
  }
}
</script>

<style lang="scss" scoped>
.task-management-container {
  padding-top: 88rpx; // 适配顶部导航栏和筛选器
  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: center;
    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;
    }
  }
  
  // 筛选器样式
  .filter-bar {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    height: 80rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 2rpx solid #ebeef5;
    z-index: 998;
    
    .filter-item {
      padding: 10rpx 40rpx;
      font-size: 28rpx;
      color: #606266;
      position: relative;
      
      &.active {
        color: #1989fa;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background-color: #1989fa;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  // 任务列表样式
  .task-list {
    height: calc(100% - 88rpx);
    padding: 20rpx;
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100rpx 0;
      
      .empty-text {
        font-size: 28rpx;
        color: #909399;
        margin-top: 20rpx;
      }
    }
    
    .task-card {
      background-color: #ffffff;
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      
      // 任务标题和状态
      .task-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20rpx;
        
        .task-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          flex: 1;
          margin-right: 20rpx;
        }
        
        .task-status {
          padding: 5rpx 15rpx;
          border-radius: 15rpx;
          font-size: 24rpx;
          
          &.pending {
            background-color: #fdf6ec;
            color: #e6a23c;
          }
          
          &.completed {
            background-color: #f0f9ff;
            color: #1989fa;
          }
        }
      }
      
      // 任务信息
      .task-info {
        display: flex;
        flex-direction: column;
        gap: 10rpx;
        margin-bottom: 20rpx;
        
        .info-item {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #909399;
          
          u-icon {
            margin-right: 10rpx;
          }
        }
      }
      
      // 任务描述
      .task-description {
        font-size: 28rpx;
        color: #606266;
        line-height: 1.5;
        margin-bottom: 20rpx;
      }
      
      // 进度条
      .progress-container {
        margin-bottom: 20rpx;
        
        .progress-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10rpx;
          font-size: 24rpx;
          color: #909399;
        }
      }
      
      // 附件信息
      .attachments {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #909399;
        margin-bottom: 20rpx;
        
        u-icon {
          margin-right: 10rpx;
        }
      }
      
      // 操作按钮
      .action-buttons {
        display: flex;
        gap: 20rpx;
        
        button {
          flex: 1;
          height: 70rpx;
          line-height: 70rpx;
          font-size: 28rpx;
          padding: 0;
          margin: 0;
          border: none;
          border-radius: 35rpx;
          
          &.upload-btn {
            background-color: #1989fa;
            color: #ffffff;
          }
          
          &.preview-btn {
            background-color: #f0f9ff;
            color: #1989fa;
            border: 2rpx solid #1989fa;
          }
        }
      }
    }
  }
  
  // 任务详情弹窗样式
  .task-detail {
    padding: 20rpx 0;
    
    .detail-item {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .detail-label {
        font-size: 28rpx;
        color: #606266;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .detail-value {
        font-size: 28rpx;
        color: #333;
        display: block;
      }
      
      .detail-value.description {
        line-height: 1.5;
      }
      
      .detail-value.status {
        display: inline-block;
        padding: 5rpx 15rpx;
        border-radius: 15rpx;
        
        &.pending {
          background-color: #fdf6ec;
          color: #e6a23c;
        }
        
        &.completed {
          background-color: #f0f9ff;
          color: #1989fa;
        }
      }
    }
  }
}
</style>