zhxy-jsd/src/pages/view/routine/yishiyice/editkcrw.vue

<template>
  <view class="addkcrw-page">
    <!-- 提交遮罩层 -->
    <view v-if="isSubmitting" class="submit-overlay">
      <view class="submit-loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">保存中...</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <scroll-view scroll-y class="form-scroll">
        <!-- 基本信息区域 -->
        <view class="section-card">
          <view class="section-title">
            <text class="title-text">基本信息</text>
          </view>
          
          <!-- 任务名称 -->
          <view class="form-item">
            <text class="item-label required">任务名称：</text>
            <input 
              v-model="formData.rwmc" 
              placeholder="请输入任务名称" 
              class="item-input"
              maxlength="100"
            />
          </view>
          
          <!-- 任务描述 -->
          <view class="form-item">
            <text class="item-label">任务描述：</text>
            <textarea 
              v-model="formData.rwms" 
              placeholder="请输入任务描述" 
              class="item-textarea"
              maxlength="500"
            />
          </view>
          
          <!-- 截止时间 -->
          <view class="form-item">
            <text class="item-label required">截止时间：</text>
            <picker 
              mode="date" 
              :value="formData.rwjstime" 
              @change="onDateChange"
              class="item-picker"
            >
              <view class="picker-content">
                <text :class="['picker-text', { placeholder: !formData.rwjstime }]">
                  {{ formData.rwjstime || '请选择截止时间' }}
                </text>
              </view>
            </picker>
          </view>
          
          <!-- 负责人 -->
          <view class="form-item">
            <text class="item-label required">负责人：</text>
            <BasicJsPicker 
              :multiple="true"
              title="选择负责人"
              placeholder="请选择负责人"
              searchPlaceholder="输入教师名称查询"
              @change="onLeaderChange"
              :defaultValue="selectedLeaderIds"
            />
          </view>
          
          <!-- 附件上传 -->
          <view class="form-item attachment-item">
            <text class="item-label">附件：</text>
            <view class="attachment-container">
              <ImageVideoUpload
                v-model:file-list="fileList"
                :enable-image="false"
                :enable-video="false"
                :enable-file="true"
                :max-file-count="5"
                :allowed-file-types="['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'wav', 'zip', 'rar']"
                :compress-config="compressConfig"
                :upload-api="attachmentUpload"
                @file-upload-success="onFileUploadSuccess"
              />
            </view>
          </view>
          
        </view>

        <!-- 任务下发设置区域 -->
        <view class="section-card">
          <view class="section-title">
            <text class="title-text">任务下发设置</text>
          </view>
          
          <!-- 任务类型列表 -->
          <view v-for="(taskType, typeIndex) in taskTypes" :key="taskType.id" class="task-type-section">
            <!-- 任务类型选择 -->
            <view class="task-type-header">
              <view class="task-type-selector">
                <text class="selector-label">任务类型：</text>
                <picker 
                  :range="taskTypeOptions" 
                  range-key="label" 
                  :value="getTaskTypeIndex(taskType.rwfl)" 
                  @change="onTaskTypeChange($event, typeIndex)"
                  class="type-picker"
                >
                  <view class="picker-content">
                    <text class="picker-text">{{ getTaskTypeLabel(taskType.rwfl) }}</text>
                    <text class="picker-arrow">▼</text>
                  </view>
                </picker>
              </view>
              <view class="task-type-actions">
                <view class="move-buttons">
                  <view 
                    v-if="typeIndex > 0" 
                    class="move-btn move-up-btn" 
                    @click="moveTaskType(typeIndex, 'up')"
                    title="上移"
                  >
                    <text class="move-icon">↑</text>
                  </view>
                  <view 
                    v-if="typeIndex < taskTypes.length - 1" 
                    class="move-btn move-down-btn" 
                    @click="moveTaskType(typeIndex, 'down')"
                    title="下移"
                  >
                    <text class="move-icon">↓</text>
                  </view>
                </view>
                <view class="delete-type-btn" @click="removeTaskType(typeIndex)">
                  <text class="delete-icon">×</text>
                </view>
              </view>
            </view>
            
            <!-- 任务项（一个任务类型对应一个任务项） -->
            <view class="task-items-container" v-if="taskType.items && taskType.items.length > 0">
              <view class="task-item-header">
                <text class="item-number">{{ typeIndex + 1 }}</text>
                <input 
                  v-model="taskType.items[0].rwbt" 
                  :placeholder="`请输入${getTaskTypeLabel(taskType.rwfl)}任务描述`" 
                  class="item-title-input"
                  maxlength="100"
                />
                <view class="item-actions">
                  <view class="required-checkbox" @click="toggleRequired(taskType)">
                    <view :class="['checkbox-box', { checked: taskType.items[0].rwbs }]">
                      <text v-if="taskType.items[0].rwbs" class="check-icon">✓</text>
                    </view>
                    <view v-if="showTooltip" class="tooltip">默认必填</view>
                  </view>
                </view>
              </view>
              
              <!-- 选择题选项 -->
              <view v-if="taskType.rwfl === 'dxxz' || taskType.rwfl === 'dxsx'" class="item-options">
                <textarea 
                  v-model="taskType.items[0].remark" 
                  :placeholder="taskType.rwfl === 'dxxz' ? '单项选择，请输入如：选项1；选项2；选项3（支持中文；或英文;分号）' : '多项选择，请输入如：选项1；选项2；选项3（支持中文；或英文;分号）'" 
                  class="options-textarea"
                  maxlength="500"
                />
              </view>
            </view>
          </view>
          
          <!-- 新增任务项按钮 -->
          <view class="add-task-item-wrapper">
            <view class="add-task-type-btn" @click="addTaskType">
              <text class="add-icon">+</text>
              <text class="add-text">新增任务项</text>
            </view>
          </view>
        </view> 
        
        <view>
          <!-- 空内容，删除了负责人选择弹窗 -->
        </view>
      </scroll-view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="bottom-actions">
      <view class="action-buttons">
        <button
          @click="goBack"
          class="cancel-btn"
        >
          取消
        </button>
        <button
          @click="submitTask"
          :disabled="isSubmitting"
          class="submit-btn"
        >
          {{ isSubmitting ? '保存中...' : '保存' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { kccyFindByKcjbIdApi } from "@/api/base/kccyApi";
import { rwSaveApi } from "@/api/base/rwApi";
import { attachmentUpload } from "@/api/system/upload";
import BasicJsPicker from "@/components/BasicJsPicker/Picker.vue";
import { ImageVideoUpload, type FileItem, COMPRESS_PRESETS } from "@/components/ImageVideoUpload";

// 接口类型定义
interface CourseInfo {
  id: string;
  kcmc: string;
  kcms: string;
}

interface CourseMember {
  id: string;
  jsId: string;
  jsxm: string;
  kcjbId: string;
  fzmc?: string;
}

interface TaskType {
  id: string;
  rwfl: string;
  items: TaskItem[];
}

interface TaskItem {
  key: string;
  id?: string; // 任务项ID，编辑时需要
  rwbt: string;
  rwbs: boolean;
  remark: string;
}

// 页面数据
const courseId = ref('');
const taskId = ref('');
const courseInfo = ref<CourseInfo>({
  id: '',
  kcmc: '',
  kcms: ''
});

const courseMembers = ref<CourseMember[]>([]);
const selectedLeaders = ref<any[]>([]);
const selectedLeaderIds = ref<string[]>([]);
const isSubmitting = ref(false);
const isLoadingMembers = ref(false);
const submitTimer = ref<any>(null); // 防抖定时器

// 冒泡提示显示状态
const showTooltip = ref(false);

// 附件相关数据
const compressConfig = ref(COMPRESS_PRESETS.medium);
const fileList = ref<FileItem[]>([]);

// 表单数据
const formData = reactive({
  id: '', // 任务ID，编辑时需要
  rwmc: '',
  rwms: '',
  rwjstime: '',
  rwfzr: '',
  rwly: 'B',
  rwlyId: '',
  rwtsfs: '1', // 默认推送
  rwfj: '', // 附件URL
  fjmx: '' // 附件明细
});

// 任务类型选项
const taskTypeOptions = [
  { label: '填写文本', value: 'text' },
  { label: '富文本', value: 'fwb' },
  { label: '单项选择', value: 'dxxz' },
  { label: '多项选择', value: 'dxsx' },
  { label: '上传图片', value: 'sctp' },
  { label: '上传视频', value: 'scsp' },
  { label: '上传文档', value: 'scwd' }
];

// 任务方式列表
const taskTypes = ref<TaskType[]>([
  {
    id: `task_type_${Date.now()}`,
    rwfl: 'text',
    items: [
      {
        key: `item_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        rwbt: '',
        rwbs: true, // 默认必填项打勾
        remark: ''
      }
    ]
  }
]);

// 页面加载
onLoad((options: any) => {
  console.log('编辑任务页面接收到的参数:', options);
  
  // 获取任务ID
  if (options.taskId) {
    taskId.value = options.taskId;
    formData.id = options.taskId;
    console.log('设置任务ID为:', taskId.value);
  }
  
  // 支持多种参数名（kcjbId 或 courseId）
  const receivedCourseId = options.kcjbId || options.courseId;
  
  if (receivedCourseId) {
    courseId.value = receivedCourseId;
    formData.rwlyId = receivedCourseId;
    console.log('设置课程ID为:', courseId.value);
    
    // 如果传递了课程名称，设置课程信息
    if (options.kcmc) {
      courseInfo.value.kcmc = decodeURIComponent(options.kcmc);
      console.log('设置课程名称为:', courseInfo.value.kcmc);
    }
    
    loadCourseInfo();
    loadCourseMembers();
    
    // 如果是编辑模式，加载任务数据
    if (taskId.value) {
      // 从全局存储中获取任务数据
      loadTaskDataFromStorage();
    }
  } else {
    console.error('未接收到课程ID参数');
    uni.showToast({ 
      title: '参数错误，请重新进入', 
      icon: 'error' 
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});

// 加载课程信息
const loadCourseInfo = () => {
  console.log('加载课程信息，课程ID:', courseId.value);
  
  // 如果已经有课程名称，保持不变；否则设置默认值
  if (!courseInfo.value.kcmc) {
    courseInfo.value.kcmc = '课程名称加载中...';
  }
  
  courseInfo.value.id = courseId.value;
  courseInfo.value.kcms = '课程描述加载中...';
};

// 从全局存储中加载任务数据
const loadTaskDataFromStorage = () => {
  try {
    console.log('从全局存储中加载任务数据');
    const taskInfo = uni.getStorageSync('editTaskData');
    
    if (!taskInfo) {
      console.error('未找到任务数据');
      uni.showToast({ 
        title: '任务数据不存在', 
        icon: 'error' 
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
      return;
    }
    
    console.log('任务数据:', taskInfo);
    
    // 填充表单数据
    formData.rwmc = taskInfo.rwmc || '';
    formData.rwms = taskInfo.rwms || '';
    formData.rwjstime = taskInfo.rwjstime || '';
    formData.rwfzr = taskInfo.rwfzr || '';
    formData.rwtsfs = taskInfo.rwtsfs || '1';
    formData.rwfj = taskInfo.rwfj || '';
    formData.fjmx = taskInfo.fjmx || '';
    
    // 处理负责人数据
    if (taskInfo.rwfzr) {
      const leaderIds = taskInfo.rwfzr.split(',');
      selectedLeaderIds.value = leaderIds;
      // 这里需要根据ID找到对应的教师信息
      // 暂时使用ID作为显示名称
      selectedLeaders.value = leaderIds.map((id: string) => ({
        id: id,
        jsxm: taskInfo.rwfzrxm || `教师${id}`
      }));
    }
    
    // 处理任务类型数据
    if (taskInfo.rwlxes && taskInfo.rwlxes.length > 0) {
      // 先按 sort 排序，如果 sort 为空则按 id 排序
      const sortedRwlxes = [...taskInfo.rwlxes].sort((a: any, b: any) => {
        const sortA = a.sort || 0;
        const sortB = b.sort || 0;
        if (sortA !== sortB) {
          return sortA - sortB;
        }
        // sort 相同时按 id 排序
        return (a.id || '').localeCompare(b.id || '');
      });
      
      // 构建任务类型列表（每个任务类型只保留第一个任务项，保持排序）
      // 由于前端显示时一个任务类型对应一个任务项，所以每个 rwfl 只保留第一个出现的
      const seenRwfl = new Set<string>();
      taskTypes.value = sortedRwlxes
        .filter((item: any) => {
          if (seenRwfl.has(item.rwfl)) {
            return false; // 如果已经见过这个 rwfl，跳过
          }
          seenRwfl.add(item.rwfl);
          return true;
        })
        .map((item: any, index: number) => {
          return {
            id: `task_type_${index + 1}`,
            rwfl: item.rwfl,
            items: [
              {
                key: `item_${index + 1}_1`,
                id: item.id, // 保留任务项的ID
                rwbt: item.rwbt || '',
                rwbs: item.rwbs === 1 || item.rwbs === true,
                remark: item.remark || ''
              }
            ]
          };
        });
    }
    
    // 处理附件数据
    if (taskInfo.rwfj) {
      loadAttachmentData(taskInfo.rwfj, taskInfo.fjmx);
    }
    
    console.log('任务数据加载完成');
    
    // 清除存储的任务数据
    uni.removeStorageSync('editTaskData');
    
  } catch (error) {
    console.error('加载任务数据失败:', error);
    uni.showToast({ 
      title: '加载任务数据失败', 
      icon: 'error' 
    });
  }
};

// 加载附件数据
const loadAttachmentData = (attachmentUrls: string, attachmentDetails?: string) => {
  try {
    console.log('加载附件数据:', { attachmentUrls, attachmentDetails });
    
    if (!attachmentUrls) {
      return;
    }
    
    const urls = attachmentUrls.split(',');
    const files: FileItem[] = [];
    
    // 解析附件明细，获取文件名
    let fileNames: string[] = [];
    if (attachmentDetails) {
      // 处理 "文件1:file_1;文件2:新建 Microsoft Word 文档.docx" 格式
      const details = attachmentDetails.split(';');
      fileNames = details.map(detail => {
        // 如果有 "文件X:" 前缀，去掉前缀
        const colonIndex = detail.indexOf(':');
        if (colonIndex > -1) {
          return detail.substring(colonIndex + 1).trim();
        }
        return detail.trim();
      });
    }
    
    urls.forEach((url, index) => {
      if (!url.trim()) return;
      
      const extension = url.toLowerCase().split('.').pop();
      
      // 确定文件类型
      let fileType = 'document';
      if (['mp4', 'mov', 'avi', 'wmv', 'flv'].includes(extension || '')) {
        fileType = 'video';
      } else if (['mp3', 'wav', 'aac', 'ogg'].includes(extension || '')) {
        fileType = 'audio';
      }
      
      // 使用解析出的文件名，如果没有则使用默认名称
      const fileName = fileNames[index] || `file_${index + 1}`;
      
      files.push({
        url: url.trim(),
        name: fileName,
        type: fileType,
        extension: extension || '',
        tempPath: ''
      });
    });
    
    fileList.value = files;
    
    console.log('附件数据加载完成:', {
      files: files.length,
      fileNames: fileNames
    });
    
  } catch (error) {
    console.error('加载附件数据失败:', error);
  }
};

// 加载任务数据（编辑模式）
const loadTaskData = async () => {
  try {
    console.log('加载任务数据，任务ID:', taskId.value);
    
    // TODO: 调用API获取任务详情
    // const response = await rwFindByIdApi(taskId.value);
    
    // 模拟数据加载
    uni.showLoading({ title: '加载中...' });
    
    // 这里应该调用真实的API获取任务数据
    // 暂时使用模拟数据
    setTimeout(() => {
      // 模拟加载任务数据
      formData.rwmc = '示例任务名称';
      formData.rwms = '示例任务描述';
      formData.rwjstime = '2024-12-31';
      formData.rwfzr = '1,2';
      
      // 模拟负责人数据
      selectedLeaderIds.value = ['1', '2'];
      selectedLeaders.value = [
        { id: '1', jsxm: '张三' },
        { id: '2', jsxm: '李四' }
      ];
      
      // 模拟任务类型数据
      taskTypes.value = [
        {
          id: 'task_type_1',
          rwfl: 'text',
          items: [
            {
              key: 'item_1',
              rwbt: '示例任务项',
              rwbs: true,
              remark: ''
            }
          ]
        }
      ];
      
      uni.hideLoading();
    }, 1000);
    
  } catch (error) {
    console.error('加载任务数据失败:', error);
    uni.hideLoading();
    uni.showToast({ 
      title: '加载任务数据失败', 
      icon: 'error' 
    });
  }
};

// 加载课程成员
const loadCourseMembers = async () => {
  try {
    isLoadingMembers.value = true;
    console.log('开始加载课程成员，课程ID:', courseId.value);
    
    // 调用真实API获取课程成员
    const response = await kccyFindByKcjbIdApi({ kcjbId: courseId.value });
    
    let memberData = [];
    if (response && (response.resultCode === 1 || response.resultCode === 0)) {
      memberData = response.result || response.rows || response.data || [];
    } else if (Array.isArray(response)) {
      memberData = response;
    } else if (response && response.length !== undefined) {
      memberData = response;
    }
    
    courseMembers.value = memberData;
    console.log('课程成员加载成功:', courseMembers.value.length, '人');
    
  } catch (error) {
    console.error('加载课程成员失败:', error);
    uni.showToast({ 
      title: '加载成员失败', 
      icon: 'error' 
    });
    courseMembers.value = [];
  } finally {
    isLoadingMembers.value = false;
  }
};

// 日期选择
const onDateChange = (e: any) => {
  formData.rwjstime = e.detail.value;
};

// 负责人选择变化
const onLeaderChange = (selectedList: any[]) => {
  console.log('负责人选择变化:', selectedList);
  selectedLeaders.value = selectedList || [];
  selectedLeaderIds.value = selectedLeaders.value.map(leader => leader.id);
  formData.rwfzr = selectedLeaders.value.map(leader => leader.id).join(',');
};

// 附件上传成功回调
const onFileUploadSuccess = (file: FileItem, index: number) => {
  console.log('文件上传成功:', file, index);
  updateAttachmentFields();
};

// 更新附件字段
const updateAttachmentFields = () => {
  // 收集文件URL
  const fileUrls = fileList.value
    .filter(file => file.url)
    .map(file => file.url)
    .filter((url): url is string => !!url);
  
  formData.rwfj = fileUrls.join(',');
  
  // 更新附件明细字段 - 只使用文件名，用分号分隔
  const fileNames = fileList.value
    .filter(file => file.url)
    .map(file => file.name || `file_${Date.now()}`);
  
  formData.fjmx = fileNames.join(';');
  
  console.log('附件字段更新:', {
    rwfj: formData.rwfj,
    fjmx: formData.fjmx
  });
};

// 任务类型管理函数
const addTaskType = () => {
  const uniqueId = `task_type_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
  taskTypes.value.push({
    id: uniqueId,
    rwfl: 'text',
    items: [
      {
        key: `item_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        rwbt: '',
        rwbs: true, // 默认必填项打勾
        remark: ''
      }
    ]
  });
  
  // 显示冒泡提示
  showTooltip.value = true;
  setTimeout(() => {
    showTooltip.value = false;
  }, 3000);
};

const removeTaskType = (typeIndex: number) => {
  taskTypes.value.splice(typeIndex, 1);
};

// 移动任务类型
const moveTaskType = (typeIndex: number, direction: 'up' | 'down') => {
  if (direction === 'up' && typeIndex > 0) {
    // 上移：与上一个交换位置
    const temp = taskTypes.value[typeIndex];
    taskTypes.value[typeIndex] = taskTypes.value[typeIndex - 1];
    taskTypes.value[typeIndex - 1] = temp;
  } else if (direction === 'down' && typeIndex < taskTypes.value.length - 1) {
    // 下移：与下一个交换位置
    const temp = taskTypes.value[typeIndex];
    taskTypes.value[typeIndex] = taskTypes.value[typeIndex + 1];
    taskTypes.value[typeIndex + 1] = temp;
  }
};

const getTaskTypeIndex = (rwfl: string) => {
  return taskTypeOptions.findIndex(option => option.value === rwfl);
};

const getTaskTypeLabel = (rwfl: string) => {
  const option = taskTypeOptions.find(option => option.value === rwfl);
  return option ? option.label : '填写文本';
};

const onTaskTypeChange = (e: any, typeIndex: number) => {
  const selectedIndex = e.detail.value;
  const selectedType = taskTypeOptions[selectedIndex];
  taskTypes.value[typeIndex].rwfl = selectedType.value;
  // 保持任务项，但清空选项内容（如果不是选择题类型）
  if (taskTypes.value[typeIndex].items.length === 0) {
    // 如果没有任务项，创建一个默认的
    taskTypes.value[typeIndex].items = [
      {
        key: `item_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
        rwbt: '',
        rwbs: true,
        remark: ''
      }
    ];
  } else {
    // 如果切换为非选择题类型，清空选项
    if (selectedType.value !== 'dxxz' && selectedType.value !== 'dxsx') {
      taskTypes.value[typeIndex].items[0].remark = '';
    }
  }
};

const toggleRequired = (taskType: TaskType) => {
  if (taskType.items.length > 0) {
    taskType.items[0].rwbs = !taskType.items[0].rwbs;
  }
};

// 表单验证
const validateForm = (): boolean => {
  if (!formData.rwmc.trim()) {
    uni.showToast({ title: '请输入任务名称', icon: 'error' });
    return false;
  }

  if (!formData.rwjstime) {
    uni.showToast({ title: '请选择截止时间', icon: 'error' });
    return false;
  }

  if (selectedLeaders.value.length === 0) {
    uni.showToast({ title: '请选择负责人', icon: 'error' });
    return false;
  }

  // 验证是否有任务类型
  if (taskTypes.value.length === 0) {
    uni.showToast({ title: '请至少添加一个任务方式', icon: 'error' });
    return false;
  }

  // 验证任务项（一个任务方式对应一个任务项）
  for (let i = 0; i < taskTypes.value.length; i++) {
    const taskType = taskTypes.value[i];
    const taskTypeName = getTaskTypeLabel(taskType.rwfl);
    
    // 确保每个任务方式都有一个任务项
    if (taskType.items.length === 0) {
      uni.showToast({ 
        title: `${taskTypeName}缺少任务项`, 
        icon: 'error',
        duration: 2000
      });
      return false;
    }
    
    const item = taskType.items[0];
    
    // 任务项的文字描述必填
    if (!item.rwbt || !item.rwbt.trim()) {
      uni.showToast({ 
        title: `请填写${taskTypeName}的任务描述`, 
        icon: 'error',
        duration: 2000
      });
      return false;
    }
    
    // 如果任务项打勾（必填）且是单项选择或多项选择
    if (item.rwbs && (taskType.rwfl === 'dxxz' || taskType.rwfl === 'dxsx')) {
      if (!item.remark || !item.remark.trim()) {
        uni.showToast({ 
          title: `${taskTypeName}的选项内容不能为空`, 
          icon: 'error',
          duration: 2000
        });
        return false;
      }
    }
  }

  return true;
};

// 提交任务
const submitTask = async () => {
  // 防抖处理
  if (isSubmitting.value) {
    console.log('正在提交中，请勿重复点击');
    return;
  }
  
  // 清除之前的定时器
  if (submitTimer.value) {
    clearTimeout(submitTimer.value);
  }
  
  // 设置防抖延迟
  submitTimer.value = setTimeout(async () => {
    await performSubmit();
  }, 300);
}

async function performSubmit() {
  if (isSubmitting.value) {
    return;
  }
  
  if (!validateForm()) {
    return;
  }

  try {
    isSubmitting.value = true;
    console.log('开始提交任务:', formData);
    
    // 更新附件字段
    updateAttachmentFields();
    
    // 构建提交数据
    const submitData = {
      id: formData.id, // 编辑时需要传递ID
      rwmc: formData.rwmc,
      rwjstime: formData.rwjstime,
      rwms: formData.rwms,
      rwfzr: formData.rwfzr,
      rwly: formData.rwly,
      rwlyId: formData.rwlyId,
      rwtsfs: formData.rwtsfs,
      rwfj: formData.rwfj, // 附件URL
      fjmx: formData.fjmx, // 附件明细
      rwlxes: [] as any[]
    };

    // 收集所有任务类型（一个任务方式对应一个任务项）
    taskTypes.value.forEach((taskType, index) => {
      if (taskType.items.length > 0) {
        const item = taskType.items[0];
        if (item.rwbt.trim()) {
          const taskItem: any = {
            rwfl: taskType.rwfl,
            rwbt: item.rwbt,
            rwbs: item.rwbs ? 1 : 0,
            remark: item.remark,
            sort: index + 1 // 排序字段，从1开始
          };
          
          // 如果任务项有ID，说明是编辑现有记录，需要传递ID
          if (item.id) {
            taskItem.id = item.id;
          }
          
          submitData.rwlxes.push(taskItem);
        }
      }
    });

    await rwSaveApi(submitData);
    
    uni.showToast({ 
      title: taskId.value ? '任务修改成功' : '任务创建成功', 
      icon: 'success' 
    });
    
    // 延迟返回上一页，并刷新上一页数据
    setTimeout(() => {
      uni.navigateBack({
        success: () => {
          // 通知上一页刷新数据
          uni.$emit('refreshTaskList');
        }
      });
    }, 1500);
    
  } catch (error) {
    console.error('提交任务失败:', error);
    uni.showToast({ 
      title: '提交失败，请重试', 
      icon: 'error' 
    });
  } finally {
    isSubmitting.value = false;
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
/* 第一步：基础页面布局和卡片样式 */
.addkcrw-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f4fd 100%);
  margin: 0;
  padding: 0;
}

.form-container {
  flex: 1;
  overflow: visible;
  margin: 0;
  padding: 0;
  
  .form-scroll {
    height: 100%;
    padding: 0;
    padding-bottom: 80px;
    box-sizing: border-box;
  }
}

.section-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 0;
  margin: 0 0 20px 0;
  padding: 24px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #409eff 0%, #67c23a 50%, #e6a23c 100%);
  }
  
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    
    .title-text {
      font-size: 18px;
      font-weight: 700;
      color: #1f2937;
      letter-spacing: 0.3px;
    }
  }
  
  // 新增任务项按钮容器
  .add-task-item-wrapper {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    
    .add-task-type-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 12px 24px;
      background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
      color: white;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
      transition: all 0.3s ease;
      min-width: 140px;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
      }
      
      &:active {
        transform: translateY(0);
      }
      
      .add-icon {
        font-size: 18px;
        font-weight: bold;
      }
      
      .add-text {
        font-size: 14px;
      }
    }
  }
}

.form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  
  .item-label {
    min-width: 90px;
    font-size: 15px;
    color: #374151;
    line-height: 44px;
    font-weight: 600;
    text-align: left;
    
    &.required::after {
      content: '*';
      color: #ef4444;
      margin-left: 4px;
      font-weight: bold;
    }
  }
  
  .item-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    &:focus {
      border-color: #409eff;
      outline: none;
      box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
      transform: translateY(-1px);
    }
  }
  
  .item-textarea {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 15px;
    min-height: 67px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    resize: vertical;
    
    &:focus {
      border-color: #409eff;
      outline: none;
      box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
    }
  }
  
  .item-picker {
    flex: 1;
    
    .picker-content {
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background-color: #ffffff;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      
      &:hover {
        border-color: #409eff;
        transform: translateY(-1px);
      }
      
      .picker-text {
        font-size: 15px;
        color: #374151;
        
        &.placeholder {
          color: #9ca3af;
        }
      }
    }
  }
}

// 附件上传区域
.attachment-item {
  flex-direction: column;
  align-items: stretch;
  
  .item-label {
    margin-bottom: 12px;
    line-height: 1.4;
  }
  
  .attachment-container {
    width: 100%;
  }
}

// 任务类型区域
.task-type-section {
  margin-bottom: 24px;
  padding: 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  transition: all 0.3s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  
  &:hover {
    border-color: #409eff;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);
  }
  
  .task-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .task-type-selector {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      
      .selector-label {
        font-size: 15px;
        color: #374151;
        min-width: 80px;
        font-weight: 600;
      }
      
      .type-picker {
        flex: 1;
        max-width: 180px;
        
        .picker-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 14px;
          border: 2px solid #e5e7eb;
          border-radius: 8px;
          background-color: #ffffff;
          font-size: 14px;
          transition: all 0.3s ease;
          cursor: pointer;
          
          &:hover {
            border-color: #409eff;
            transform: translateY(-1px);
          }
          
          .picker-arrow {
            color: #9ca3af;
            font-size: 12px;
          }
        }
      }
    }
    
    .task-type-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-right: 32px; // 为删除按钮留出空间
      
      .move-buttons {
        display: flex;
        align-items: center;
        gap: 4px;
        
        .move-btn {
          width: 28px;
          height: 28px;
          background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
          color: white;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 14px;
          font-weight: bold;
          box-shadow: 0 2px 6px rgba(103, 194, 58, 0.3);
          transition: all 0.3s ease;
          border: 2px solid #ffffff;
          
          &:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 10px rgba(103, 194, 58, 0.4);
          }
          
          &:active {
            transform: scale(0.95);
          }
          
          .move-icon {
            font-size: 14px;
            font-weight: bold;
            line-height: 1;
          }
        }
      }
    }
    
    .delete-type-btn {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
      transition: all 0.3s ease;
      z-index: 10;
      border: 2px solid #ffffff;
      
      &:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
      }
    }
  }
}

// 任务项列表
.task-items-container {
  width: 100%;
  box-sizing: border-box;
  
  .task-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    
    .item-number {
      width: 28px;
      height: 28px;
      background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
    }
    
    .item-title-input {
      flex: 1;
      padding: 10px 14px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s ease;
      
      &:focus {
        border-color: #409eff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
      }
    }
    
    .item-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .required-checkbox {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 4px;
        border-radius: 6px;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: rgba(64, 158, 255, 0.05);
        }
        
        .checkbox-box {
          width: 18px;
          height: 18px;
          border: 2px solid #d1d5db;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
          
          &.checked {
            background-color: #409eff;
            border-color: #409eff;
            
            .check-icon {
              color: white;
              font-size: 12px;
              font-weight: bold;
            }
          }
        }
        
        // 冒泡提示样式
        .tooltip {
          position: absolute;
          top: -45px;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(0, 0, 0, 0.8);
          color: white;
          padding: 6px 12px;
          border-radius: 6px;
          font-size: 12px;
          white-space: nowrap;
          z-index: 1000;
          animation: tooltipFadeIn 0.3s ease-out;
          
          &::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.8);
          }
        }
      }
    }
  }
  
  .item-options {
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    
    .options-textarea {
      width: 100%;
      max-width: 100%;
      padding: 12px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 13px;
      min-height: 80px;
      background-color: #ffffff;
      transition: all 0.3s ease;
      resize: vertical;
      box-sizing: border-box;
      overflow-wrap: break-word;
      word-wrap: break-word;
      overflow-x: hidden;
      overflow-y: auto;
      
      &:focus {
        border-color: #409eff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
        background-color: #ffffff;
      }
    }
  }
}

// 单选按钮组
.radio-group {
  flex: 1;
  display: flex;
  gap: 20px;
  
  .radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: rgba(64, 158, 255, 0.05);
    }
    
    .radio-dot {
      width: 20px;
      height: 20px;
      border: 2px solid #d1d5db;
      border-radius: 50%;
      position: relative;
      transition: all 0.3s ease;
      
      &.checked {
        border-color: #409eff;
        background-color: #409eff;
        
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 8px;
          height: 8px;
          background-color: #ffffff;
          border-radius: 50%;
        }
      }
    }
    
    .radio-text {
      font-size: 15px;
      color: #374151;
      font-weight: 500;
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 12px 16px;
  z-index: 999;
  
  .action-buttons {
    display: flex;
    gap: 12px;
    
    .cancel-btn, .submit-btn {
      flex: 1;
      height: 40px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:active {
        transform: translateY(1px);
      }
    }
    
    .cancel-btn {
      background-color: #909399;
      color: #fff;
      
      &:hover {
        background-color: #82848a;
      }
    }
    
    .submit-btn {
      background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
      color: #fff;
      
      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #3a8ee6 0%, #337ecc 100%);
      }
    }
  }
}

// 冒泡提示动画
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

// 响应式调整
@media screen and (max-width: 375px) {
  .form-item {
    flex-direction: column;
    align-items: stretch;
    
    .item-label {
      margin-bottom: 8px;
      line-height: 1.4;
    }
  }
  
  .task-type-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .task-item-header {
    flex-wrap: wrap;
  }
}

// 提交遮罩层样式
.submit-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.submit-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
</style>