<template>
  <view class="image-upload-container">
    <!-- 顶部导航栏 -->
    <view class="top-navbar">
      <text class="cancel" @click="navigateBack">取消</text>
      <text class="title">图片上传</text>
      <text class="save" @click="submitUpload" :class="{ disabled: !canSubmit }">提交</text>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 部门信息 -->
      <view class="dept-info">
        <text class="label">所属部门：</text>
        <text class="value">{{ currentUser.department }}</text>
      </view>
      
      <!-- 图片选择区域 -->
      <view class="section">
        <text class="section-title">选择图片</text>
        <view class="image-grid">
          <view v-for="(image, index) in selectedImages" :key="index" class="image-item">
            <image :src="image" mode="aspectFill"></image>
            <view class="delete-btn" @click="removeImage(index)">
              <u-icon name="close" size="28" color="#fff"></u-icon>
            </view>
          </view>
          <view v-if="selectedImages.length < maxImages" class="add-image" @click="chooseImage">
            <u-icon name="plus" size="60" color="#c0c4cc"></u-icon>
            <text>添加图片</text>
          </view>
        </view>
        <text class="hint">{{ selectedImages.length }}/{{ maxImages }} 张</text>
      </view>
      
      <!-- 表单信息 -->
      <view class="section">
        <text class="section-title">图片信息</text>
        
        <!-- 标题 -->
        <view class="form-item">
          <text class="form-label">标题</text>
          <u-input 
            v-model="formData.title" 
            placeholder="请输入图片标题" 
            border="bottom"
            maxlength="50"
          ></u-input>
        </view>
        
        <!-- 标签 -->
        <view class="form-item">
          <text class="form-label">标签</text>
          <view class="tags-container">
            <view 
              v-for="tag in availableTags" 
              :key="tag.value" 
              class="tag" 
              :class="{ active: formData.tags.includes(tag.value) }"
              @click="toggleTag(tag.value)"
            >
              {{ tag.label }}
            </view>
          </view>
        </view>
        
        <!-- 描述 -->
        <view class="form-item">
          <text class="form-label">描述</text>
          <u-input 
            v-model="formData.description" 
            placeholder="请输入图片描述（选填）" 
            border="bottom"
            type="textarea"
            :rows="3"
            maxlength="200"
          ></u-input>
        </view>
        
        <!-- 关联任务 -->
        <view class="form-item">
          <text class="form-label">关联任务</text>
          <u-picker 
            v-model="showTaskPicker" 
            :columns="taskOptions" 
            @confirm="onTaskConfirm"
            @cancel="showTaskPicker = false"
            title="选择任务"
            mode="selector"
            @change="onTaskChange"
          ></u-picker>
          <view class="task-select" @click="showTaskPicker = true">
            <text v-if="formData.taskId" class="selected-task">{{ selectedTaskName }}</text>
            <text v-else class="placeholder">请选择关联任务（选填）</text>
            <u-icon name="arrow-right" size="20" color="#c0c4cc"></u-icon>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 上传进度弹窗 -->
    <u-modal v-model="showUploadModal" show-cancel-button="false" :close-on-click-modal="false">
      <view class="upload-modal">
        <u-loading-icon size="60" color="#1989fa"></u-loading-icon>
        <text class="upload-status">{{ uploadStatus }}</text>
        <u-progress :percent="uploadProgress" :show-percent="true" height="10"></u-progress>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 用户信息
      currentUser: {
        name: '张三',
        department: '研发部'
      },
      // 表单数据
      formData: {
        title: '',
        tags: [],
        description: '',
        taskId: ''
      },
      // 图片相关
      selectedImages: [],
      maxImages: 9,
      // 任务选择器
      showTaskPicker: false,
      taskOptions: ['项目进度拍摄', '设备巡检', '活动照片收集', '其他任务'],
      taskMap: {
        '项目进度拍摄': '1',
        '设备巡检': '2',
        '活动照片收集': '3',
        '其他任务': '4'
      },
      // 标签选项
      availableTags: [
        { label: '工作进度', value: 'progress' },
        { label: '设备状态', value: 'equipment' },
        { label: '会议记录', value: 'meeting' },
        { label: '活动现场', value: 'activity' },
        { label: '产品展示', value: 'product' },
        { label: '其他', value: 'other' }
      ],
      // 上传相关
      showUploadModal: false,
      uploadProgress: 0,
      uploadStatus: '准备上传...'
    }
  },
  computed: {
    canSubmit() {
      return this.selectedImages.length > 0 && this.formData.title.trim() !== ''
    },
    selectedTaskName() {
      for (const [name, id] of Object.entries(this.taskMap)) {
        if (id === this.formData.taskId) {
          return name
        }
      }
      return ''
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    chooseImage() {
      const remainingCount = this.maxImages - this.selectedImages.length
      
      uni.chooseImage({
        count: remainingCount,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          this.selectedImages = [...this.selectedImages, ...tempFilePaths]
        }
      })
    },
    removeImage(index) {
      this.selectedImages.splice(index, 1)
    },
    toggleTag(tagValue) {
      const index = this.formData.tags.indexOf(tagValue)
      if (index > -1) {
        this.formData.tags.splice(index, 1)
      } else {
        this.formData.tags.push(tagValue)
      }
    },
    onTaskConfirm(e) {
      const name = this.taskOptions[e.index]
      this.formData.taskId = this.taskMap[name]
    },
    onTaskChange(e) {
      // 实时更新选中的任务名称
    },
    submitUpload() {
      if (!this.canSubmit) return
      
      // 显示上传进度弹窗
      this.showUploadModal = true
      this.uploadProgress = 0
      this.uploadStatus = '正在上传...'
      
      // 模拟上传过程
      let progress = 0
      const timer = setInterval(() => {
        progress += 10
        this.uploadProgress = progress
        
        if (progress >= 100) {
          clearInterval(timer)
          this.uploadStatus = '上传成功！'
          
          // 延迟关闭弹窗并返回
          setTimeout(() => {
            this.showUploadModal = false
            this.$u.toast('上传成功')
            
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }, 1500)
        }
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
.image-upload-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;
    
    .cancel,
    .save {
      font-size: 32rpx;
      color: #1989fa;
    }
    
    .save.disabled {
      color: #c0c4cc;
    }
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .content {
    height: calc(100% - 44px);
    padding: 20rpx;
  }
  
  .dept-info {
    background-color: #ffffff;
    padding: 20rpx 30rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    
    .label {
      color: #606266;
    }
    
    .value {
      color: #333;
      font-weight: bold;
    }
  }
  
  .section {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    // 图片网格样式
    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      margin-bottom: 15rpx;
      
      .image-item {
        position: relative;
        
        image {
          width: 100%;
          aspect-ratio: 1;
          border-radius: 8rpx;
        }
        
        .delete-btn {
          position: absolute;
          top: -15rpx;
          right: -15rpx;
          width: 40rpx;
          height: 40rpx;
          background-color: rgba(0, 0, 0, 0.6);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      
      .add-image {
        width: 100%;
        aspect-ratio: 1;
        border: 2rpx dashed #c0c4cc;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        text {
          font-size: 24rpx;
          color: #c0c4cc;
          margin-top: 10rpx;
        }
      }
    }
    
    .hint {
      font-size: 24rpx;
      color: #909399;
      text-align: right;
    }
    
    // 表单样式
    .form-item {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .form-label {
        font-size: 28rpx;
        color: #606266;
        margin-bottom: 10rpx;
        display: block;
      }
      
      // 标签样式
      .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
        
        .tag {
          padding: 10rpx 20rpx;
          border: 2rpx solid #dcdfe6;
          border-radius: 20rpx;
          font-size: 24rpx;
          color: #606266;
          
          &.active {
            border-color: #1989fa;
            background-color: #ecf5ff;
            color: #1989fa;
          }
        }
      }
      
      // 任务选择样式
      .task-select {
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #ebeef5;
        
        .selected-task {
          font-size: 28rpx;
          color: #333;
        }
        
        .placeholder {
          font-size: 28rpx;
          color: #c0c4cc;
        }
      }
    }
  }
  
  // 上传弹窗样式
  .upload-modal {
    padding: 40rpx 20rpx;
    
    .upload-status {
      display: block;
      text-align: center;
      font-size: 28rpx;
      color: #606266;
      margin: 20rpx 0;
    }
    
    :deep(.u-progress) {
      margin-top: 20rpx;
    }
  }
}
</style>