nongxiaoyu/pages/activity/activity-detail.vue

<template>
  <view class="page-container">
    <!-- 页面滚动区域 -->
    <scroll-view class="page-scroll" scroll-y>
      <!-- 地块信息卡片 -->
      <view class="info-card">
        <view class="card-title">
          <text>地块信息</text>
        </view>
        <view class="info-item">
          <text class="info-label">地块名称</text>
          <text class="info-value">{{ formData.fieldName || '未知' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">作物名称</text>
          <text class="info-value">{{ formData.growCrops || '未知' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">负责人</text>
          <text class="info-value">{{ formData.manager || '未知' }}</text>
        </view>
      </view>

      <!-- 任务填写表单 -->
      <view class="form-card">
        <view class="card-title">
          <text>任务信息</text>
        </view>
        
        <!-- 任务名称 -->
        <view class="form-item">
          <view class="form-label required">任务名称</view>
          <input 
            v-model="formData.taskName"
            placeholder="请输入任务名称，例如：水稻田施肥"
            :disabled="pageMode === 'view'"
            class="form-input"
          />
        </view>

        <!-- 任务类型 -->
        <view class="form-item" @click="pageMode !== 'view' && showTaskTypeSelector()">
          <view class="form-label required">任务类型</view>
          <view class="select-wrapper">
<!--            <input 
              :value="formData.typeName"
              :placeholder="dictLoading ? '加载中...' : '请选择任务类型'"
			  readonly
              class="form-input select-input"
            /> -->
			<view class="form-input select-input">
			      {{ formData.typeName || (dictLoading ? '加载中...' : '请选择任务类型') }}
			</view>
            <view v-if="pageMode !== 'view'" class="select-arrow">
              <text>▼</text>
            </view>
          </view>
        </view>

        <!-- 执行时间 -->
        <view class="form-item" @click="pageMode !== 'view' && selectExecuteTime()">
          <view class="form-label required">执行时间</view>
          <view class="select-wrapper">
<!--            <input 
              :value="formattedExecuteTime"
              placeholder="请选择任务计划时间"
              readonly
              class="form-input select-input"
              readonly
            /> -->
			<view class="form-input select-input">
			      {{ formattedExecuteTime || '请选择任务计划时间' }}
			</view>
            <view v-if="pageMode !== 'view'" class="select-arrow">
              <text>选择</text>
            </view>
          </view>
        </view>

        <!-- 负责人选择 -->
        <view class="form-item" @click="pageMode !== 'view' && showUserSelector()">
          <view class="form-label required">负责人</view>
          <view class="select-wrapper">
<!--            <input 
              :value="formData.assigneeName"
              placeholder="请选择负责人"
			  readonly
              class="form-input select-input"
            /> -->
			<view class="form-input select-input">
			      {{ formData.assigneeName || '请选择负责人' }}
			</view>
            <view v-if="pageMode !== 'view'" class="select-arrow">
              <text>选择</text>
            </view>
          </view>
        </view>

        <!-- 任务说明 -->
        <view class="form-item">
          <view class="form-label">任务说明</view>
          <textarea 
            v-model="formData.remark"
            placeholder="请输入任务要点，例如：每亩用肥20kg"
            :disabled="pageMode === 'view'"
            class="form-textarea"
            maxlength="200"
          ></textarea>
          <view class="char-count">{{ (formData.remark || '').length }}/200</view>
        </view>

        <!-- 任务完成情况 -->
        <view class="section-divider"></view>
        <view class="section-title">
          <text>任务完成情况</text>
        </view>

        <!-- 完成状态选择 - 新建和编辑模式 -->
        <view class="form-item" v-if="pageMode === 'create' || pageMode === 'edit'">
          <view class="form-label">完成状态</view>
          <view class="radio-group">
            <view 
              class="radio-item" 
              v-for="(item, index) in completionStatusOptions" 
              :key="index"
              @click="selectCompletionStatus(item.value)"
            >
              <view class="radio-circle" :class="{'radio-checked': formData.completionStatus === item.value}">
                <view v-if="formData.completionStatus === item.value" class="radio-dot"></view>
              </view>
              <text class="radio-label">{{ item.label }}</text>
            </view>
          </view>
        </view>

        <!-- 查看模式显示完成状态 -->
        <view class="form-item" v-if="pageMode === 'view'">
          <view class="form-label">完成状态</view>
          <view class="status-completed">
            <text class="status-icon">✓</text>
            <text>已完成</text>
          </view>
        </view>

        <!-- 完成时间 -->
        <view class="form-item" v-if="formData.completionStatus === '1'">
          <view class="form-label" :class="{'required': (pageMode === 'create' || pageMode === 'edit') && formData.completionStatus === '1'}">完成时间</view>
                     <view class="select-wrapper" @click="(pageMode === 'create' || pageMode === 'edit') && formData.completionStatus === '1' && selectCompletionTime()">
            <!-- <input 
              :value="formattedCompletionTime"
              placeholder="请选择实际完成时间"
              readonly
              class="form-input select-input"
            /> -->
			<view class="form-input select-input">
			      {{ formattedCompletionTime || '请选择实际完成时间' }}
			</view>
                <view v-if="(pageMode === 'create' || pageMode === 'edit') && formData.completionStatus === '1'" class="select-arrow">
               <text>选择</text>
             </view>
          </view>
        </view>

        <!-- 完成说明 -->
        <view class="form-item" v-if="formData.completionStatus === '1'">
          <view class="form-label" :class="{'required': (pageMode === 'create' || pageMode === 'edit') && formData.completionStatus === '1'}">完成说明</view>
          <textarea 
            v-model="formData.completionDesc"
            placeholder="请输入完成说明，例如：已完成并拍照记录"
            :disabled="pageMode === 'view'"
            class="form-textarea"
            maxlength="300"
          ></textarea>
          <view class="char-count">{{ (formData.completionDesc || '').length }}/300</view>
          <view class="form-error" v-if="formErrors.completionDesc">
            {{ formErrors.completionDesc }}
          </view>
        </view>

        <!-- 现场图片 -->
        <view class="form-item" v-if="formData.completionStatus === '1'">
          <view class="form-label">现场图片</view>
          
          <!-- 新建和编辑模式 -->
          <view v-if="pageMode === 'create' || pageMode === 'edit'" class="image-upload">
            <view class="image-list">
              <view 
                class="image-preview" 
                v-for="(item, index) in formData.images" 
                :key="index"
                @click="previewImage(item, index)"
              >
                <!-- <image :src="getImageUrl(item)" mode="aspectFill"/> -->
                <image :src="item.url" mode="aspectFill"/>
                <view class="delete-btn" @click.stop="deletePic(index)">
                  <text>×</text>
                </view>
              </view>
              <view 
                v-if="formData.images.length < 6" 
                class="upload-btn" 
                @click="chooseImage"
              >
                <text class="upload-icon">+</text>
                <text class="upload-text">添加图片</text>
              </view>
            </view>
            <view class="upload-tip">最多可上传6张图片</view>
          </view>

          <!-- 查看模式 -->
          <view v-else-if="pageMode === 'view' && formData.images && formData.images.length > 0" class="image-view">
            <view class="image-list">
              <view 
                class="image-preview" 
                v-for="(item, index) in formData.images" 
                :key="index"
                @click="previewImage(item, index)"
              >
                <!-- <image :src="getImageUrl(item)" mode="aspectFill"/> -->
                <image :src="item.url" mode="aspectFill"/>
              </view>
            </view>
          </view>

          <!-- 无图片提示 -->
          <view v-else class="no-images">
            <text>暂无图片</text>
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view class="bottom-safe"></view>
    </scroll-view>

    <!-- 底部提交按钮 -->
    <view class="footer-safe" v-if="pageMode !== 'view'">
      <view class="footer-content">
        <button 
          class="submit-button"
          :class="{'loading': isSubmitting}"
          @click="submitForm"
          :disabled="isSubmitting"
        >
          {{ isSubmitting ? '提交中...' : submitButtonText }}
        </button>
      </view>
    </view>



    <!-- 遮罩层 -->
    <view v-if="showTaskTypePicker || showDateTimeSelector || showUserPicker" class="picker-mask" @click="closePickers"></view>
    
    <!-- 任务类型选择弹窗 -->
    <view v-if="showTaskTypePicker" class="picker-popup">
      <view class="picker-header">
        <text class="picker-cancel" @click="showTaskTypePicker = false">取消</text>
        <text class="picker-title">选择任务类型</text>
        <text class="picker-confirm" @click="confirmTaskType">确定</text>
      </view>
      <view class="picker-content">
        <view v-if="dictLoading" class="picker-loading">
          <text>加载中...</text>
        </view>
        <view 
          v-else
          class="picker-item" 
          v-for="(item, index) in taskTypeOptions" 
          :key="index"
          :class="{'selected': tempTaskTypeIndex === index}"
          @click="tempTaskTypeIndex = index"
        >
          <text>{{ item.dictLabel }}</text>
          <text v-if="tempTaskTypeIndex === index" class="check-mark">✓</text>
        </view>
      </view>
    </view>

    <!-- 用户选择弹窗 -->
    <view v-if="showUserPicker" class="picker-popup">
      <view class="picker-header">
        <text class="picker-cancel" @click="showUserPicker = false">取消</text>
        <text class="picker-title">选择负责人</text>
        <text class="picker-confirm" @click="confirmUser">确定</text>
      </view>
      <view class="picker-content">
        <view v-if="usersLoading" class="picker-loading">
          <text>加载中...</text>
        </view>
        <view v-else-if="userList.length === 0" class="picker-empty">
          <text>暂无可选负责人</text>
        </view>
        <view 
          v-else
          class="picker-item" 
          v-for="(user, index) in userList" 
          :key="user.userId"
          :class="{'selected': tempUserIndex === index}"
          @click="tempUserIndex = index"
        >
          <text>{{ user.userName }}</text>
          <text v-if="tempUserIndex === index" class="check-mark">✓</text>
        </view>
      </view>
    </view>

    <!-- 日期时间选择弹窗 -->
    <view v-if="showDateTimeSelector" class="picker-popup datetime-picker">
      <view class="picker-header">
        <text class="picker-cancel" @click="cancelDateTime">取消</text>
        <text class="picker-title">选择时间</text>
        <text class="picker-confirm" @click="confirmDateTime">确定</text>
      </view>
      <view class="datetime-picker-content">
        <picker-view 
          class="datetime-picker-view"
          :value="dateTimePickerValue" 
          @change="onDateTimePickerChange"
          :indicator-style="'height: 80rpx;'"
          :mask-style="'background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));'"
        >
          <picker-view-column>
            <view class="picker-view-item" v-for="(item, index) in dateTimePickerRange[0]" :key="'year-'+index">
              <text class="picker-item-text">{{ item }}</text>
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-view-item" v-for="(item, index) in dateTimePickerRange[1]" :key="'month-'+index">
              <text class="picker-item-text">{{ item }}</text>
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-view-item" v-for="(item, index) in dateTimePickerRange[2]" :key="'day-'+index">
              <text class="picker-item-text">{{ item }}</text>
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-view-item" v-for="(item, index) in dateTimePickerRange[3]" :key="'hour-'+index">
              <text class="picker-item-text">{{ item }}</text>
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-view-item" v-for="(item, index) in dateTimePickerRange[4]" :key="'min-'+index">
              <text class="picker-item-text">{{ item }}</text>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import api from "@/config/api.js";
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getAgriculturalTasksById, addAgriculturalTask, updateAgriculturalTask } from '@/api/services/activity.js';
import { getUsersByPlotId, getUserInfo } from '@/api/services/user.js';
import { useDict } from '@/utils/composables/useDict';
import storage from "@/utils/storage.js";

// 使用字典组合式函数
const { dictData, dictLoading, loadDict } = useDict(['task_type', 'task_status'])

// 页面模式：create-新建, edit-编辑, view-查看
const pageMode = ref('create')

// 选择器显示状态
const showTaskTypePicker = ref(false)
const showDateTimeSelector = ref(false)
const showUserPicker = ref(false)

// 临时选择的任务类型索引
const tempTaskTypeIndex = ref(0)
const tempUserIndex = ref(0)

// 时间选择器相关
const currentTimeType = ref('')
const dateTimePickerValue = ref([0, 0, 0, 0, 0])
const dateTimePickerRange = ref([])

// 表单数据
const formData = reactive({
  // 任务ID，新建任务时为空
  id: '',
  
  // 地块基础信息
  plotId: '',
  fieldName: '',
  growCrops: '',
  manager: '',
  
  // 任务信息
  taskName: '',
  typeName: '',
  typeNameId: '',
  executeTime: new Date(),
  remark: '',
  
  // 完成情况
  taskStatus: '0',
  completionStatus: '0',
  completionTime: new Date(),
  completionDesc: '',
  images: [],
  taskImages: '',
  
  // 负责人信息
  assigneeId: '',
  assigneeName: '',
  
  // 创建人信息
  create_by: ''
})

// 完成状态选项
const completionStatusOptions = [
  { label: '待完成', value: '0' },
  { label: '已完成', value: '1' }
]

// 是否正在提交
const isSubmitting = ref(false)

// 表单验证错误
const formErrors = reactive({
  completionDesc: ''
})

// 用户列表
const userList = ref([])
const usersLoading = ref(false)

// 任务类型列表
const taskStatusList = ref([])

// 计算属性
const pageTitle = computed(() => {
  switch (pageMode.value) {
    case 'create':
      return '新建农事任务'
    case 'edit':
      return '编辑农事任务'
    default:
      return '农事任务详情'
  }
})

const submitButtonText = computed(() => {
  switch (pageMode.value) {
    case 'create':
      return '创建任务'
    case 'edit':
      return '保存修改'
    default:
      return ''
  }
})

const formattedExecuteTime = computed(() => {
  return formatDateTime(formData.executeTime)
})

const formattedCompletionTime = computed(() => {
  return formatDateTime(formData.completionTime)
})

const taskTypeOptions = computed(() => {
  return dictData.task_type
})

const taskTypeIndex = computed(() => {
  console.log("taskTypeOptions", taskTypeOptions.value)
  const index = taskTypeOptions.value.findIndex(item => item.dictValue === formData.typeNameId)
  console.log("查找：", index)
  return index >= 0 ? index : 0
})

// 初始化字典数据
loadDict().then(() => {
  console.log("dictData:",dictData.task_type);
  
  // 字典加载完成后，如果没有设置任务类型，则默认选择第一个
  if (!formData.typeName && dictData.task_type && dictData.task_type.length > 0) {
    const firstType = dictData.task_type[0]
    taskStatusList.value = dictData.task_type
    console.log("dictData", dictData.task_status[0].dictLabel)
    formData.typeName = firstType.dictLabel
    formData.typeNameId = firstType.dictValue
  }
})

// uni-app 生命周期
onLoad((options) => {
  console.log('页面加载，接收参数:', options)
  
  // 设置页面模式
  if (options.mode) {
    pageMode.value = options.mode
  }
  
  // 设置地块基础信息
  formData.fieldName = decodeURIComponent(options.fieldName === 'undefined' ? '未选择地块' : options.fieldName)
  formData.growCrops = decodeURIComponent(options.growCrops === 'undefined' ? '未选择地块' : options.growCrops)
  formData.manager = decodeURIComponent(options.manager === 'undefined' ? '未选择地块' : options.manager)
  formData.plotId = parseInt(options.plotId || '1')
  formData.farmId = parseInt(options.farmId || '1')
  
  // 加载用户列表
  loadUserList(formData.farmId)
  
  // 如果是编辑或查看模式，获取任务详情
  if (options.id && options.id !== 'new') {
    formData.id = options.id
    loadTaskDetail(options.id)
  } else if (options.id === 'new') {
    // 加载当前登录用户
    loadAssigneeInfo()
  }
  
  // 设置导航栏标题
  uni.setNavigationBarTitle({
    title: pageTitle.value
  })
  
  // 初始化时间选择器数据
  initDateTimeRange()
})

// 方法定义
// 跨端安全解析日期
const normalizeToDate = (input) => {
  if (!input) return new Date()
  let dateObj = input
  if (typeof input === 'string') {
    // 兼容 iOS：将 2025-08-12 12:30:00 转为 2025/08/12 12:30:00
    dateObj = input.replace(/-/g, '/')
  }
  if (typeof input === 'number') {
    // 秒级时间戳转毫秒
    if (input.toString().length === 10) {
      dateObj = input * 1000
    }
  }
  const d = new Date(dateObj)
  return isNaN(d.getTime()) ? new Date() : d
}

// 加载任务详情
const loadTaskDetail = (taskId) => {
  uni.showLoading({
    title: '加载中...',
    mask: true
  })
  
  getAgriculturalTasksById(taskId).then(res => {
    if (res.data.code === 200) {
      const taskDetail = res.data.data
      // 设置表单数据
      Object.assign(formData, {
        ...taskDetail,
        manager: formData.manager,
        completionStatus: taskDetail.taskStatus
      })
      
      // 转换任务类型值
      if (taskStatusList.value && taskStatusList.value.length > 0) {
        const typeDict = taskStatusList.value.find(item => item.dictValue === taskDetail.typeName.toString())
        if (typeDict) {
          formData.typeName = typeDict.dictLabel
          formData.typeNameId = typeDict.dictValue
        }
      }
      
      // 处理图片数据
      if (formData.taskImages) {
        try {
          const imageUrls = formData.taskImages.split(',')
          formData.images = imageUrls.filter(url => url && url.trim()).map(url => ({
            url: url.trim(),
            status: 'success'
          }))
          console.log('解析后的图片数据:', formData.images)
        } catch (e) {
          console.error('解析图片数据失败:', e)
          formData.images = []
        }
      } else {
        formData.images = []
      }
      console.log("formData.assigneeId", formData.assigneeId)
      console.log("!formData.assigneeName", formData.assigneeName)
      // 如果有负责人ID但没有负责人名称，获取负责人信息
      if (formData.assigneeId && !formData.assigneeName) {
        loadAssigneeInfo(formData.assigneeId)
      }
          
          uni.hideLoading();
        } else {
          uni.hideLoading();
          uni.showToast({
            title: res.data.msg || '获取任务详情失败',
            icon: 'none'
          });
          
          // 失败后返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      }).catch(err => {
        console.error('获取任务详情失败:', err);
        uni.hideLoading();
        uni.showToast({
          title: '获取任务详情失败',
          icon: 'none'
        });
        
        // 失败后返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      });
}

    // 加载负责人信息
    const loadAssigneeInfo = (userId) => {
      getUserInfo(userId).then(res => {
		  console.log("你是谁：",res);
        if (res.data.code === 200) {
          const userData = res.data.data;
          formData.assigneeName = userData.userName || '未知用户';
          formData.assigneeId = userData.userId;
        }
      }).catch(err => {
        console.error('获取负责人信息失败:', err);
        formData.assigneeName = '未知用户';
      });
}

    // 加载用户列表
    const loadUserList = (farmId) => {
      usersLoading.value = true;
      const params = {
		  pageNum: 1,
		  pageSize: 10,
		  deptId: farmId
	  }
      getUsersByPlotId(params).then(res => {
		  console.log("加载用户：",res);
        if (res.data.code === 200) {
          userList.value = res.data.rows || [];
          
          // 设置默认选中第一个用户
          if (userList.value.length > 0 && !formData.assigneeId) {
            formData.assigneeId = userList.value[0].userId;
            formData.assigneeName = userList.value[0].userName;
          }
        } else {
          console.error('获取用户列表失败:', res.data.msg);
          uni.showToast({
            title: '获取用户列表失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('获取用户列表失败:', err);
        uni.showToast({
          title: '获取用户列表失败',
          icon: 'none'
        });
      }).finally(() => {
        usersLoading.value = false;
      });
}

    // 初始化时间选择器范围数据
    const initDateTimeRange = () => {
      // 年份：从2020年开始显示10年
      const startYear = 2020;
      const years = [];
      for (let i = 0; i < 10; i++) {
        years.push((startYear + i) + '年');
      }
      
      // 月份：1-12月
      const months = [];
      for (let i = 1; i <= 12; i++) {
        months.push(i + '月');
      }
      
      // 日期：1-31日
      const days = [];
      for (let i = 1; i <= 31; i++) {
        days.push(i + '日');
      }
      
      // 小时：0-23时
      const hours = [];
      for (let i = 0; i <= 23; i++) {
        hours.push(i.toString().padStart(2, '0') + '时');
      }
      
      // 分钟：0-59分
      const minutes = [];
      for (let i = 0; i <= 59; i++) {
        minutes.push(i.toString().padStart(2, '0') + '分');
      }
      
      dateTimePickerRange.value = [years, months, days, hours, minutes];
      console.log('日期选择器范围：', {
        years: years.length,
        months: months.length,
        days: days.length,
        hours: hours.length,
        minutes: minutes.length
      });
}

    // 初始化日期时间选择器
    const initDateTimePicker = (timestamp) => {
      const date = normalizeToDate(timestamp);
      const currentYear = date.getFullYear();
      const currentMonth = date.getMonth() + 1; // 1-12
      const currentDate = date.getDate(); // 1-31
      const currentHour = date.getHours();
      const currentMinute = date.getMinutes();
      
      // 基准年份，用于计算索引
      const startYear = 2020;
      
      // 如果当前年份小于起始年份或大于结束年份，调整为合法范围内
      let yearIndex = currentYear - startYear;
      if (yearIndex < 0) yearIndex = 0;
      if (yearIndex >= 10) yearIndex = 9;
      
      console.log('初始化日期选择器:', {
        timestamp,
        year: currentYear,
        month: currentMonth,
        date: currentDate,
        hour: currentHour,
        minute: currentMinute,
        yearIndex
      });
      
      // 设置选择器的初始值
      dateTimePickerValue.value = [
        yearIndex, // 年份索引
        currentMonth - 1, // 月份索引（0-11）
        currentDate - 1, // 日期索引（0-30）
        currentHour, // 小时索引
        currentMinute // 分钟索引
      ];
      
      console.log('选择器初始值:', dateTimePickerValue.value);
      
      // 更新日期范围
      updateDaysRange();
}

    // 更新日期范围（根据选择的年月）
    const updateDaysRange = () => {
      const yearIndex = dateTimePickerValue.value[0];
      const monthIndex = dateTimePickerValue.value[1];
      
      // 计算实际年月
      const year = 2020 + yearIndex;
      const month = monthIndex + 1; // 索引为0-11，实际月份为1-12
      
      // 获取该月的天数
      const daysInMonth = new Date(year, month, 0).getDate();
      
      // 更新天数范围
      const days = [];
      for (let i = 1; i <= daysInMonth; i++) {
        days.push(i + '日');
      }
      
      // 更新日期列
      dateTimePickerRange.value[2] = days;
      
      // 如果当前选择的日期超过了该月的天数，调整为该月最后一天
      if (dateTimePickerValue.value[2] >= daysInMonth) {
        dateTimePickerValue.value[2] = daysInMonth - 1;
      }
      
      console.log('更新日期范围:', {
        year,
        month,
        daysInMonth,
        daysLength: days.length
      });
}

    // 显示任务类型选择器
    const showTaskTypeSelector = () => {
      tempTaskTypeIndex.value = taskTypeIndex.value;
      showTaskTypePicker.value = true;
}

    // 确认任务类型选择
    const confirmTaskType = () => {
      const selectedType = taskTypeOptions.value[tempTaskTypeIndex.value];
	  console.log("选中：",selectedType);
      formData.typeName = selectedType.dictLabel;
      formData.typeNameId = selectedType.dictValue; // 设置typeNameId为dictValue值
      showTaskTypePicker.value = false;
}

    // 选择执行时间
    const selectExecuteTime = () => {
      currentTimeType.value = 'executeTime';
      initDateTimePicker(formData.executeTime);
      showDateTimeSelector.value = true;
}

    // 选择完成时间
    const selectCompletionTime = () => {
      currentTimeType.value = 'completionTime';
      initDateTimePicker(formData.completionTime);
      showDateTimeSelector.value = true;
}

    // 日期时间选择器变更
    const onDateTimePickerChange = (e) => {
      dateTimePickerValue.value = e.detail.value;
      // 当年月变更时，更新日期范围
      updateDaysRange();
}

    // 确认时间选择
    const confirmDateTime = () => {
      const values = dateTimePickerValue.value;
      
      // 计算实际日期时间
      const year = 2020 + values[0];
      const month = values[1] + 1; // 索引为0-11，实际月份为1-12
      const date = values[2] + 1; // 索引为0-30，实际日期为1-31
      const hour = values[3];
      const minute = values[4];
      
      console.log('确认日期时间:', {
        selectedValues: values,
        convertedDate: `${year}-${month}-${date} ${hour}:${minute}`
      });
      
      // 创建日期对象
      const selectedTime = new Date(year, month - 1, date, hour, minute).getTime();
      
      // 更新相应的表单字段
      if (currentTimeType.value === 'executeTime') {
        formData.executeTime = selectedTime;
      } else if (currentTimeType.value === 'completionTime') {
        formData.completionTime = selectedTime;
      }
      
      // 关闭选择器
      showDateTimeSelector.value = false;
      
      uni.showToast({
        title: '时间已设置',
        icon: 'success',
        duration: 1500
      });
}

    // 取消时间选择
    const cancelDateTime = () => {
      showDateTimeSelector.value = false;
}

    // 显示用户选择器
    const showUserSelector = () => {
      tempUserIndex.value = userList.value.findIndex(user => user.userId === formData.assigneeId);
      showUserPicker.value = true;
}

    // 确认用户选择
    const confirmUser = () => {
      const selectedUser = userList.value[tempUserIndex.value];
      formData.assigneeId = selectedUser.userId;
      formData.assigneeName = selectedUser.userName;
      showUserPicker.value = false;
}

    // 关闭所有选择器
    const closePickers = () => {
      showTaskTypePicker.value = false;
      showDateTimeSelector.value = false;
      showUserPicker.value = false;
}

    // 选择完成状态
    const selectCompletionStatus = (value) => {
      formData.completionStatus = value;
      formData.taskStatus = value; // 同时设置taskStatus字段
      
      if (value === '1') {
        formData.completionTime = new Date();
      }
}

// 格式化日期时间
/**
 * 日期格式化工具（兼容 iOS 和安卓）
 * @param {string|number|Date} date - 日期对象 / 时间戳 / 日期字符串
 * @param {string} format - 格式模板，默认 'yyyy-MM-dd HH:mm:ss'
 * @returns {string} 格式化后的日期
 */
const formatDateTime = (date, format = 'yyyy-MM-dd HH:mm') => {
  if (!date) return '';

  // 如果是字符串，做 iOS 兼容（将 2025-08-12 替换为 2025/08/12）
  if (typeof date === 'string') {
    date = date.replace(/-/g, '/');
  }

  // 如果是数字（时间戳），判断是否是秒级
  if (typeof date === 'number') {
    if (date.toString().length === 10) {
      date *= 1000; // 秒转毫秒
    }
  }

  // 转换为 Date 对象
  date = new Date(date);
  if (isNaN(date.getTime())) return '';

  const map = {
    'yyyy': date.getFullYear(),
    'MM': String(date.getMonth() + 1).padStart(2, '0'),
    'dd': String(date.getDate()).padStart(2, '0'),
    'HH': String(date.getHours()).padStart(2, '0'),
    'mm': String(date.getMinutes()).padStart(2, '0'),
    // 'ss': String(date.getSeconds()).padStart(2, '0')
  };

  return format.replace(/yyyy|MM|dd|HH|mm/g, match => map[match]);
}

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 6 - formData.images.length,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      console.log('选择图片成功:', res);
      
      // 验证文件类型和大小
      const validFiles = [];
      const invalidFiles = [];
      const maxSize = 5 * 1024 * 1024; // 5MB 最大限制
      
      // 检查每个文件
      res.tempFiles.forEach((file, index) => {
        // 检查文件类型
        const isImage = /\.(jpg|jpeg|png|gif)$/i.test(file.name);
        // 检查文件大小
        const isValidSize = file.size <= maxSize;
        
        if (isImage && isValidSize) {
          validFiles.push(res.tempFilePaths[index]);
        } else {
          invalidFiles.push({
            path: file.path,
            size: file.size,
            reason: !isImage ? '文件格式不支持' : '文件大于5MB'
          });
        }
      });
      
      // 显示无效文件提示
      if (invalidFiles.length > 0) {
        uni.showToast({
          title: `${invalidFiles.length}个文件无效，请检查格式和大小`,
          icon: 'none',
          duration: 2000
        });
      }
      
      // 如果有有效文件，则上传
      if (validFiles.length > 0) {
        uploadImages(validFiles);
      }
    },
    fail: (err) => {
      console.error('选择图片失败:', err);
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      });
    }
  });
}

// 上传图片到服务器
const uploadImages = (tempFilePaths) => {
      uni.showLoading({
        title: '上传中...',
        mask: true
      });
      
      // 上传成功的图片计数
      let successCount = 0;
      let failCount = 0;
      const totalFiles = tempFilePaths.length;
      const newImages = [];
      
      // 遍历处理每张图片
      tempFilePaths.forEach((path, index) => {
        // 调用上传API
        uni.uploadFile({
          // url: api.serve + '/base/tasks/uploadTaskImage', 
          url: api.serve + '/file/upload', 
          filePath: path,
          name: 'file', // 文件参数名称，需要与后端接口匹配
          formData: {
            type: 'task', // 标识文件类型，用于后端区分不同业务的文件
            // directory: '/opt/app/nongxiaoyu/uploadImage' // 指定保存目录
		},
		header: {'Authorization': `Bearer ${storage.getAccessToken()}`},

          success: (res) => {
                          try {
                const response = JSON.parse(res.data);
				uni.showToast({
				  title: `返回: ${response.data}`,
				  icon: 'none',
				});
                if (response.code === 200) {
                  // 获取返回的URL
                  const imageUrl = response.data.url;
                  console.log('上传成功，返回的图片URL:', imageUrl);
                  
                  // 上传成功，将图片信息添加到数组
                  newImages.push({
                    url: imageUrl, // 保存原始URL，在显示时会通过getImageUrl方法处理
                    path: path, // 保存本地路径用于预览
                    status: 'success',
                    fileName: response.data.fileName || '' // 保存文件名，如果后端返回的话
                  });
                  successCount++;
              } else {
                failCount++;
                console.error('上传失败:', response.msg);
              }
            } catch (e) {
              failCount++;
			  uni.showToast({
			    title: `解析响应失败: ${e}`,
			    icon: 'none',
			  });
              console.error('解析响应失败:', e);
            }
},

          fail: (err) => {
            failCount++;
            console.error('上传请求失败:', err);
			uni.showToast({
			  title: `上传请求失败: ${err}`,
			  icon: 'none',
			});
		},

          complete: () => {
            // 当所有文件都已处理完成
            if (successCount + failCount === totalFiles) {
              if (newImages.length > 0) {
                // 将新上传的图片添加到已有图片列表
                formData.images = [...formData.images, ...newImages];
                console.log("formData.images",formData.images);
                // 更新taskImages字段，将图片URL用逗号连接
                formData.taskImages = formData.images.map(img => img.url).join(',');
                
                // 显示成功提示
                uni.hideLoading();
                uni.showToast({
                  title: `成功上传${successCount}张图片`,
                  icon: 'success'
                });
              } else {
                // 全部失败
				uni.showToast({
				  title: `图片上传: ${newImages}`,
				  icon: 'none',
				});
                uni.hideLoading();
                // uni.showToast({
                //   title: '图片上传失败',
                //   icon: 'none',
                // });
              }
            }
          }
        });
      });
}

    // 删除图片
    const deletePic = (index) => {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这张图片吗？',
        success: (res) => {
          if (res.confirm) {
            formData.images.splice(index, 1);
            
            // 更新taskImages字段
            formData.taskImages = formData.images.map(img => img.url).join(',');
            
            uni.showToast({
              title: '已删除',
              icon: 'none'
            });
          }
        }
      });
}

    // 获取图片URL
    const getImageUrl = (item) => {
      // 默认返回url或path
      return  api.upload + item.url;
}

    // 预览图片
    const previewImage = (item, index) => {
      // 获取所有图片的完整URL
      // const urls = formData.images.map(file => this.getImageUrl(file));
	  const urls = formData.images.map(item => item.url);
      uni.previewImage({
        urls: urls,
        current: index
      });
}

    // 表单验证
    const validateForm = () => {
      // 重置错误信息
      formErrors.completionDesc = '';
      
      // 基本字段验证
      if (!formData.taskName.trim()) {
        uni.showToast({
          title: '请输入任务名称',
          icon: 'none'
        });
        return false;
      }
      
      if (!formData.typeName) {
        uni.showToast({
          title: '请选择任务类型',
          icon: 'none'
        });
        return false;
      }
      
      // 验证负责人
      if (!formData.assigneeId) {
        uni.showToast({
          title: '请选择负责人',
          icon: 'none'
        });
        return false;
      }
      
      // 新建和编辑模式且已完成状态下的验证
      if ((pageMode.value === 'create' || pageMode.value === 'edit') && formData.taskStatus === '1') {
        // 验证完成说明
        if (!formData.completionDesc.trim()) {
          formErrors.completionDesc = '请填写完成说明';
          uni.showToast({
            title: '请填写完成说明',
            icon: 'none'
          });
          return false;
        }
        
        // 验证是否上传了图片
        if (!formData.images || formData.images.length === 0) {
          uni.showToast({
            title: '请上传至少一张现场图片',
            icon: 'none'
          });
          return false;
        }
      }
      
      return true;
}

    // 提交表单
    const submitForm = () => {
      if (!validateForm()) {
        return;
      }
      
      isSubmitting.value = true;
      
      // 构建提交数据
      const submitData = {
        // 如果是编辑模式，需要提供ID
        ...(formData.id ? { id: formData.id } : {}),
		farmId: formData.farmId,
        plotId: formData.plotId,
        fieldName: formData.fieldName,
        growCrops: formData.growCrops,
        taskName: formData.taskName,
        taskImages: formData.taskImages,
        typeName: formData.typeNameId,
        taskStatus: formData.taskStatus,
        executeTime: formatDateTime(formData.executeTime),
        assigneeId: formData.assigneeId,
		assigneeName:formData.assigneeName,
        remark: formData.remark,
        completionTime: formData.taskStatus === '1' ? formatDateTime(formData.completionTime) : null,
        completionDesc: formData.taskStatus === '1' ? formData.completionDesc : null,
        create_by: formData.create_by || null
      };
      
      console.log('提交数据:', submitData);
      
      uni.showLoading({
        title: '提交中...',
        mask: true
      });
      
      // 根据模式决定是创建还是更新
      const requestPromise = pageMode.value === 'create' 
        ? addAgriculturalTask(submitData) 
        : updateAgriculturalTask(submitData);
      
      requestPromise.then(res => {
        isSubmitting.value = false;
        uni.hideLoading();
        
        if (res.data.code === 200) {
          const successMessage = pageMode.value === 'create' ? '任务创建成功' : '保存修改成功';
          
          uni.showToast({
            title: successMessage,
            icon: 'success',
            duration: 1500
          });
          
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({
            title: res.data.msg || '操作失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('提交表单失败:', err);
        isSubmitting.value = false;
        uni.hideLoading();
        
        uni.showToast({
          title: '操作失败，请稍后重试',
          icon: 'none'
        });
      });
}
</script>

<style scoped>
.page-container {
  height: 100vh;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: column;
}

.page-scroll {
  flex: 1;
  overflow: hidden;
}

/* 地块基础信息卡片 */
.info-card {
  background: #F9F9F9;
  margin: 24rpx;
  padding: 24rpx;
  border-radius: 8rpx;
  border: 1rpx solid #E5E5E5;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #E5E5E5;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
  padding: 8rpx 0;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666666;
  flex-shrink: 0;
}

.info-value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

/* 任务填写表单 */
.form-card {
  background: #FFFFFF;
  margin: 0 24rpx 24rpx;
  padding: 24rpx;
  border-radius: 8rpx;
  border: 1rpx solid #E5E5E5;
}

.section-divider {
  height: 1rpx;
  background: #F0F0F0;
  margin: 32rpx 0 24rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16rpx;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.form-item {
  margin-bottom: 24rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.form-label.required::before {
  content: '*';
  color: #FF6B6B;
  margin-right: 4rpx;
}

.form-input {
  width: 100%;
  line-height: 80rpx;
  height: 80rpx;
  background: #F8F8F8;
  border: 1rpx solid #E5E5E5;
  border-radius: 8rpx;
  padding: 0 16rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
}

.form-input:focus {
  background: #FFFFFF;
  border-color: #3BB44A;
}

.form-input::placeholder {
  color: #CCCCCC;
}

.form-input:disabled {
  background: #F8F8F8;
  color: #999999;
}

.select-wrapper {
  position: relative;
  width: 100%;
}

.select-input {
  cursor: pointer;
}

.select-arrow {
  position: absolute;
  right: 16rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999999;
  font-size: 20rpx;
  pointer-events: none;
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  background: #F8F8F8;
  border: 1rpx solid #E5E5E5;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
  resize: none;
  line-height: 1.5;
}

.form-textarea:focus {
  background: #FFFFFF;
  border-color: #3BB44A;
}

.form-textarea::placeholder {
  color: #CCCCCC;
}

.form-textarea:disabled {
  background: #F8F8F8;
  color: #999999;
}

.char-count {
  font-size: 24rpx;
  color: #CCCCCC;
  text-align: right;
  margin-top: 8rpx;
}

.form-error {
  font-size: 24rpx;
  color: #FF6B6B;
  margin-top: 8rpx;
}

/* 单选按钮样式 */
.radio-group {
  display: flex;
  gap: 32rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-circle {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #CCCCCC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
}

.radio-circle.radio-checked {
  border-color: #3BB44A;
  background-color: #3BB44A;
}

.radio-dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.radio-label {
  font-size: 28rpx;
  color: #333333;
}

/* 完成状态样式 */
.status-completed {
  display: flex;
  align-items: center;
  color: #3BB44A;
  font-size: 28rpx;
}

.status-icon {
  width: 32rpx;
  height: 32rpx;
  background: #3BB44A;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8rpx;
  font-size: 20rpx;
  line-height: 1;
}

/* 图片上传样式 */
.image-upload, .image-view {
  width: 100%;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-preview {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  background: #F5F5F5;
}

.image-preview image {
  width: 100%;
  height: 100%;
}

.delete-btn {
  position: absolute;
  top: -6rpx;
  right: -6rpx;
  width: 32rpx;
  height: 32rpx;
  background: rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  line-height: 1;
}

.upload-btn {
  width: 160rpx;
  height: 160rpx;
  background: #F8F8F8;
  border: 2rpx dashed #DDDDDD;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
  color: #999999;
}

.upload-text {
  font-size: 24rpx;
  color: #999999;
}

.upload-tip {
  font-size: 24rpx;
  color: #999999;
  margin-top: 12rpx;
}

.no-images {
  padding: 40rpx 0;
  text-align: center;
  color: #CCCCCC;
  font-size: 28rpx;
}

/* 底部安全区域 */
.bottom-safe {
  height: 120rpx;
}

.footer-safe {
  background: #FFFFFF;
  border-top: 1rpx solid #E5E5E5;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.footer-content {
  padding: 24rpx;
}

.submit-button {
  width: 100%;
  height: 88rpx;
  background: #3BB44A;
  color: #FFFFFF;
  border: none;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-button:active {
  background: #2D8C3C;
}

.submit-button:disabled,
.submit-button.loading {
  background: #CCCCCC;
}

/* 选择器弹窗样式 */
.picker-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.picker-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 0 0;
  z-index: 1000;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #E5E5E5;
}

.picker-cancel, .picker-confirm {
  font-size: 30rpx;
  color: #3BB44A;
}

.picker-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.picker-content {
  max-height: 400rpx;
  overflow-y: auto;
}

.picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #F0F0F0;
  font-size: 30rpx;
  color: #333333;
}

.picker-item.selected {
  color: #3BB44A;
}

.picker-item:last-child {
  border-bottom: none;
}

.check-mark {
  color: #3BB44A;
  font-size: 28rpx;
}

/* 日期时间选择器样式 */
.datetime-picker {
  height: 60vh;
}

.datetime-picker-content {
  height: calc(100% - 100rpx);
  padding: 0;
}

.datetime-picker-view {
  width: 100%;
  height: 100%;
}

.picker-view-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  font-size: 32rpx;
  color: #333333;
}

.picker-item-text {
  font-size: 32rpx;
  color: #333333;
  line-height: 80rpx;
  height: 80rpx;
  text-align: center;
}

/* 添加加载中样式 */
.picker-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 28rpx;
}

.picker-empty {
  padding: 30rpx 0;
  text-align: center;
  color: #CCCCCC;
  font-size: 28rpx;
}
</style>