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.plotName || '未知' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">作物名称</text>
          <text class="info-value">{{ formData.crop || '未知' }}</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 
              v-model="formData.typeName"
              :placeholder="dictLoading ? '加载中...' : '请选择任务类型'"
			  :disabled="formData.completionStatus === '1'"
              class="form-input select-input"
            />
            <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 
              v-model="formattedExecuteTime"
              placeholder="请选择任务计划时间"
              :disabled="formData.completionStatus === '1'"
              class="form-input select-input"
            />
            <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 
              v-model="formData.assigneeName"
              placeholder="请选择负责人"
			  :disabled="formData.completionStatus === '1'"
              class="form-input select-input"
            />
            <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 
              v-model="formattedCompletionTime"
              placeholder="请选择实际完成时间"
              disabled
              class="form-input select-input"
            />
                         <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"/>
                <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"/>
              </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>
import api from "@/config/api.js";
import { getAgriculturalTasksById, addAgriculturalTask, updateAgriculturalTask } from '@/api/services/activity.js';
import { getUsersByPlotId, getUserInfo } from '@/api/services/user.js';
import dictMixin from '@/utils/mixins/dictMixin';
import storage from "@/utils/storage.js";

export default {
  mixins: [dictMixin],
  data() {
    return {
      // 需要加载的字典类型
      dictTypeList: ['task_type','task_status'],
      
      // 页面模式：create-新建, edit-编辑, view-查看
      pageMode: 'create',
      
      // 选择器显示状态
      showTaskTypePicker: false,
      showDateTimeSelector: false,
      showUserPicker: false, // 新增用户选择器显示状态
      
      // 临时选择的任务类型索引
      tempTaskTypeIndex: 0,
      tempUserIndex: 0, // 新增临时用户选择索引
      
      // 时间选择器相关
      currentTimeType: '', // 当前选择的时间类型
      dateTimePickerValue: [0, 0, 0, 0, 0], // 年月日时分的选择值
      dateTimePickerRange: [], // 选择器的范围数据
      
      // 表单数据
      formData: {
        // 任务ID，新建任务时为空
        id: '',
        
        // 地块基础信息
        plotId: '',
        plotName: '',
        crop: '',
        manager: '',
        
        // 任务信息
        taskName: '',
        typeName: '', // 对应后端的typeName字段
        typeNameId: '', // 存储任务类型的实际值（dictValue）
        executeTime: new Date(),
        remark: '', // 对应后端的remark字段
        
        // 完成情况
        taskStatus: '0',
        completionStatus: '0',
        completionTime: new Date(),
        completionDesc: '',
        images: [],
        taskImages: '', // 对应后端的taskImages字段，存储图片URL字符串
        
        // 负责人信息
        assigneeId: '',
        assigneeName: '',
        
        // 创建人信息
        create_by: ''
      },
      
      // 完成状态选项
      completionStatusOptions: [
        { label: '待完成', value: '0' },
        { label: '已完成', value: '1' }
      ],
      
      // 是否正在提交
      isSubmitting: false,
      
      // 表单验证错误
      formErrors: {
        completionDesc: ''
      },

      // 用户列表
      userList: [],
      usersLoading: false,
	  
	  // 任务类型列表
	  taskStatusList:[]
    }
  },
  
  created() {
    // 组件创建时，如果有定义dictTypeList，则自动加载字典数据
    if (this.dictTypeList && this.dictTypeList.length > 0) {
      this.loadDict().then(() => {
        // 字典加载完成后，如果没有设置任务类型，则默认选择第一个
        if (!this.formData.typeName && this.dictData.task_type && this.dictData.task_type.length > 0) {
          const firstType = this.dictData.task_type[0];
          this.taskStatusList = this.dictData.task_type;
		  console.log("this.dictData",this.dictData.task_status[0].dictLabel);
          this.formData.typeName = firstType.dictLabel;
          this.formData.typeNameId = firstType.dictValue; // 设置默认的typeNameId
        }
      });
    }
  },
  
  computed: {
    // 页面标题
    pageTitle() {
      switch (this.pageMode) {
        case 'create':
          return '新建农事任务';
        case 'edit':
          return '编辑农事任务';
        default:
          return '农事任务详情';
      }
    },
    
    // 提交按钮文字
    submitButtonText() {
      switch (this.pageMode) {
        case 'create':
          return '创建任务';
        case 'edit':
          return '保存修改';
        default:
          return '';
      }
    },
    
    // 格式化后的执行时间
    formattedExecuteTime() {
      return this.formatDateTime(this.formData.executeTime);
    },
    
    // 格式化后的完成时间
    formattedCompletionTime() {
      return this.formatDateTime(this.formData.completionTime);
    },
    
    // 任务类型选项
    taskTypeOptions() {
		console.log("this.dictData:",this.dictData.task_type);
      return this.dictData.task_type;
    },
    
    // 当前任务类型索引
    taskTypeIndex() {
		console.log("taskTypeOptions",this.taskTypeOptions);
      const index = this.taskTypeOptions.findIndex(item => item.dictValue === this.formData.typeNameId);
	  console.log("查找：",index);
      return index >= 0 ? index : 0;
    }
  },
  
  onLoad(options) {
    console.log('页面加载，接收参数:', options);
    
    // 设置页面模式
    if (options.mode) {
      this.pageMode = options.mode;
    }
    
    // 设置地块基础信息
    this.formData.plotName = decodeURIComponent(options.plotName || '未知');
    this.formData.crop = decodeURIComponent(options.crop || '未知');
    this.formData.manager = decodeURIComponent(options.manager || '未知');
    this.formData.plotId = parseInt(options.plotId || '1');
    this.formData.farmId = parseInt(options.farmId || '1');
    
    // 加载用户列表
    this.loadUserList(this.formData.farmId);
    
    // 如果是编辑或查看模式，获取任务详情
    if (options.id && options.id !== 'new') {
      this.formData.id = options.id;
      this.loadTaskDetail(options.id);
    } else if (options.id === 'new') {
      // 创建新任务时，加载字典数据并设置默认任务类型
      // this.loadDict().then(() => {
      //   // 确保字典数据加载完成后设置默认任务类型
      //   if (this.dictData.task_type && this.dictData.task_type.length > 0) {
      //     const firstType = this.dictData.task_type[0];
      //     this.formData.typeName = firstType.dictLabel;
      //     this.formData.typeName = firstType.dictLabel;
      //     console.log('已设置默认任务类型:', this.formData.typeName);
      //   }
      // });
    }
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: this.pageTitle
    });
    
    // 初始化时间选择器数据
    this.initDateTimeRange();
  },
  
  methods: {
    // 加载任务详情
    loadTaskDetail(taskId) {
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      
      getAgriculturalTasksById(taskId).then(res => {
        if (res.data.code === 200) {
          const taskDetail = res.data.data;
          
          // 设置表单数据
          this.formData = {
            ...this.formData, // 保留原有的地块信息
            ...taskDetail, // 合并后端返回的任务信息
            completionStatus: taskDetail.taskStatus, // 将后端的taskStatus映射为前端的completionStatus
          };
          
          // 转换任务类型值
          // 找到对应的字典项
          if (this.taskStatusList && this.taskStatusList.length > 0) {
            const typeDict = this.taskStatusList.find(item => item.dictValue === taskDetail.typeName.toString());
            if (typeDict) {
              this.formData.typeName = typeDict.dictLabel;
              this.formData.typeNameId = typeDict.dictValue;
            }
          }
          
          // 处理图片数据
          if (this.formData.taskImages) {
            try {
              // 尝试解析图片数据字符串
              const imageUrls = this.formData.taskImages.split(',');
              this.formData.images = imageUrls.filter(url => url && url.trim()).map(url => ({
                url: url.trim(), // 保存原始URL，显示时会通过getImageUrl方法处理
                status: 'success'
              }));
              console.log('解析后的图片数据:', this.formData.images);
            } catch (e) {
              console.error('解析图片数据失败:', e);
              this.formData.images = [];
            }
          } else {
            this.formData.images = [];
          }
          
          // 如果有负责人ID但没有负责人名称，获取负责人信息
          if (this.formData.assigneeId && !this.formData.assigneeName) {
            this.loadAssigneeInfo(this.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);
      });
    },
    
    // 加载负责人信息
    loadAssigneeInfo(userId) {
      getUserInfo(userId).then(res => {
        if (res.data.code === 200) {
          const userData = res.data.data;
          this.formData.assigneeName = userData.userName || '未知用户';
        }
      }).catch(err => {
        console.error('获取负责人信息失败:', err);
        this.formData.assigneeName = '未知用户';
      });
    },

    // 加载用户列表
    loadUserList(farmId) {
      this.usersLoading = true;
      const params = {
		  pageNum: 1,
		  pageSize: 10,
		  deptId: farmId
	  }
      getUsersByPlotId(params).then(res => {
		  console.log("加载用户：",res);
        if (res.data.code === 200) {
          this.userList = res.data.rows || [];
          
          // 设置默认选中第一个用户
          if (this.userList.length > 0 && !this.formData.assigneeId) {
            this.formData.assigneeId = this.userList[0].userId;
            this.formData.assigneeName = this.userList[0].userName;
          }
        } else {
          console.error('获取用户列表失败:', res.data.msg);
          uni.showToast({
            title: '获取用户列表失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('获取用户列表失败:', err);
        uni.showToast({
          title: '获取用户列表失败',
          icon: 'none'
        });
      }).finally(() => {
        this.usersLoading = false;
      });
    },
    
    // 初始化时间选择器范围数据
    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') + '分');
      }
      
      this.dateTimePickerRange = [years, months, days, hours, minutes];
      console.log('日期选择器范围：', {
        years: years.length,
        months: months.length,
        days: days.length,
        hours: hours.length,
        minutes: minutes.length
      });
    },
    
    // 初始化日期时间选择器
    initDateTimePicker(timestamp) {
      const date = new Date(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 currentSeconds = date.getSeconds()
      
      // 基准年份，用于计算索引
      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,
		seconds: currentSeconds,
        yearIndex
      });
      
      // 设置选择器的初始值
      this.dateTimePickerValue = [
        yearIndex, // 年份索引
        currentMonth - 1, // 月份索引（0-11）
        currentDate - 1, // 日期索引（0-30）
        currentHour, // 小时索引
        currentMinute, // 分钟索引
		currentSeconds
      ];
      
      console.log('选择器初始值:', this.dateTimePickerValue);
      
      // 更新日期范围
      this.updateDaysRange();
    },
    
    // 更新日期范围（根据选择的年月）
    updateDaysRange() {
      const yearIndex = this.dateTimePickerValue[0];
      const monthIndex = this.dateTimePickerValue[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 + '日');
      }
      
      // 更新日期列
      this.dateTimePickerRange[2] = days;
      
      // 如果当前选择的日期超过了该月的天数，调整为该月最后一天
      if (this.dateTimePickerValue[2] >= daysInMonth) {
        this.dateTimePickerValue[2] = daysInMonth - 1;
      }
      
      console.log('更新日期范围:', {
        year,
        month,
        daysInMonth,
        daysLength: days.length
      });
    },
    
    // 显示任务类型选择器
    showTaskTypeSelector() {
      this.tempTaskTypeIndex = this.taskTypeIndex;
      this.showTaskTypePicker = true;
    },
    
    // 确认任务类型选择
    confirmTaskType() {
      const selectedType = this.taskTypeOptions[this.tempTaskTypeIndex];
	  console.log("选中：",selectedType);
      this.formData.typeName = selectedType.dictLabel;
      this.formData.typeNameId = selectedType.dictValue; // 设置typeNameId为dictValue值
      this.showTaskTypePicker = false;
    },
    
    // 选择执行时间
    selectExecuteTime() {
      this.currentTimeType = 'executeTime';
      this.initDateTimePicker(this.formData.executeTime);
      this.showDateTimeSelector = true;
    },
    
    // 选择完成时间
    selectCompletionTime() {
      this.currentTimeType = 'completionTime';
      this.initDateTimePicker(this.formData.completionTime);
      this.showDateTimeSelector = true;
    },
    
    // 日期时间选择器变更
    onDateTimePickerChange(e) {
      this.dateTimePickerValue = e.detail.value;
      // 当年月变更时，更新日期范围
      this.updateDaysRange();
    },
    
    // 确认时间选择
    confirmDateTime() {
      const values = this.dateTimePickerValue;
      
      // 计算实际日期时间
      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 (this.currentTimeType === 'executeTime') {
        this.formData.executeTime = selectedTime;
      } else if (this.currentTimeType === 'completionTime') {
        this.formData.completionTime = selectedTime;
      }
      
      // 关闭选择器
      this.showDateTimeSelector = false;
      
      uni.showToast({
        title: '时间已设置',
        icon: 'success',
        duration: 1500
      });
    },
    
    // 取消时间选择
    cancelDateTime() {
      this.showDateTimeSelector = false;
    },

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

    // 确认用户选择
    confirmUser() {
      const selectedUser = this.userList[this.tempUserIndex];
      this.formData.assigneeId = selectedUser.userId;
      this.formData.assigneeName = selectedUser.userName;
      this.showUserPicker = false;
    },
    
    // 关闭所有选择器
    closePickers() {
      this.showTaskTypePicker = false;
      this.showDateTimeSelector = false;
      this.showUserPicker = false;
    },
    
    // 选择完成状态
    selectCompletionStatus(value) {
      this.formData.completionStatus = value;
      this.formData.taskStatus = value; // 同时设置taskStatus字段
      
      if (value === '1') {
        this.formData.completionTime = new Date();
      }
    },
    
    // 格式化日期时间
    formatDateTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 6 - this.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) {
            this.uploadImages(validFiles);
          }
        },
        fail: (err) => {
          console.error('选择图片失败:', err);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none'
          });
        }
      });
    },

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

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

    // 获取图片URL
    getImageUrl(item) {
      // 默认返回url或path
      return  api.upload + item.url;
    },
    
    // 预览图片
    previewImage(item, index) {
      // 获取所有图片的完整URL
      const urls = this.formData.images.map(file => this.getImageUrl(file));
      uni.previewImage({
        urls: urls,
        current: index
      });
    },
    
    // 表单验证
    validateForm() {
      // 重置错误信息
      this.formErrors = {
        completionDesc: ''
      };
      
      // 基本字段验证
      if (!this.formData.taskName.trim()) {
        uni.showToast({
          title: '请输入任务名称',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.formData.typeName) {
        uni.showToast({
          title: '请选择任务类型',
          icon: 'none'
        });
        return false;
      }
      
      // 验证负责人
      if (!this.formData.assigneeId) {
        uni.showToast({
          title: '请选择负责人',
          icon: 'none'
        });
        return false;
      }
      
      // 新建和编辑模式且已完成状态下的验证
      if ((this.pageMode === 'create' || this.pageMode === 'edit') && this.formData.taskStatus === '1') {
        // 验证完成说明
        if (!this.formData.completionDesc.trim()) {
          this.formErrors.completionDesc = '请填写完成说明';
          uni.showToast({
            title: '请填写完成说明',
            icon: 'none'
          });
          return false;
        }
        
        // 验证是否上传了图片
        if (!this.formData.images || this.formData.images.length === 0) {
          uni.showToast({
            title: '请上传至少一张现场图片',
            icon: 'none'
          });
          return false;
        }
      }
      
      return true;
    },
    
    // 提交表单
    submitForm() {
      if (!this.validateForm()) {
        return;
      }
      
      this.isSubmitting = true;
      
      // 构建提交数据
      const submitData = {
        // 如果是编辑模式，需要提供ID
        ...(this.formData.id ? { id: this.formData.id } : {}),
        plotId: this.formData.plotId,
        taskName: this.formData.taskName,
        taskImages: this.formData.taskImages,
        typeName: this.formData.typeNameId,
        taskStatus: this.formData.taskStatus,
        executeTime: this.formatDateTime(this.formData.executeTime),
        assigneeId: this.formData.assigneeId,
		assigneeName:this.formData.assigneeName,
        remark: this.formData.remark,
        completionTime: this.formData.taskStatus === '1' ? this.formatDateTime(this.formData.completionTime) : null,
        completionDesc: this.formData.taskStatus === '1' ? this.formData.completionDesc : null,
        create_by: this.formData.create_by || null
      };
      
      console.log('提交数据:', submitData);
      
      uni.showLoading({
        title: '提交中...',
        mask: true
      });
      
      // 根据模式决定是创建还是更新
      const requestPromise = this.pageMode === 'create' 
        ? addAgriculturalTask(submitData) 
        : updateAgriculturalTask(submitData);
      
      requestPromise.then(res => {
        this.isSubmitting = false;
        uni.hideLoading();
        
        if (res.data.code === 200) {
          const successMessage = this.pageMode === '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);
        this.isSubmitting = 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%;
  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>