OfficeSystem/pages/task/add/index.vue

<template>
  <view class="task-add-page">
    <view class="content-scroll" >
      <view class="form-card">
        <view class="section-title">任务信息</view>

        <view class="form-item" @click="openProjectPicker">
          <text class="form-label required">项目</text>
          <view class="form-value">
            <text v-if="formData.projectName" class="value-text">{{ formData.projectName }}</text>
            <text v-else class="placeholder">请选择项目</text>
          </view>
          <text class="arrow">›</text>
        </view>

        <view class="form-item">
          <text class="form-label required">任务类型</text>
          <view class="pill-group">
            <view
              class="pill-item"
              v-for="type in typeOptions"
              :key="type.value"
              :class="{ active: formData.type === type.value }"
              @click="selectType(type.value)"
            >
              {{ type.label }}
            </view>
            <text v-if="!typeOptions.length" class="placeholder">暂无可用任务类型</text>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label required">优先级</text>
          <view class="pill-group">
            <view
              class="pill-item priority"
              v-for="level in levelOptions"
              :key="level.value"
              :class="{ active: formData.level === level.value }"
              @click="selectLevel(level.value)"
            >
              {{ level.label }}
            </view>
            <text v-if="!levelOptions.length" class="placeholder">暂无可用优先级</text>
          </view>
        </view>

        <view class="form-item">
          <text class="form-label required">截止时间</text>
          <view class="form-value" @click="openExpireTimePicker">
            <text v-if="formData.expireTime" class="value-text">{{ formData.expireTime }}</text>
            <text v-else class="placeholder">请选择截止时间</text>
          </view>
          <text class="arrow">›</text>
        </view>

        <view class="form-item align-start">
          <text class="form-label required">任务内容</text>
          <textarea
            v-model="formData.description"
            class="textarea-input"
            placeholder="请填写任务内容、输出要求或其他说明，最多500字"
            placeholder-style="color:#999;"
            :maxlength="500"
          />
        </view>
      </view>

      <view class="form-card">
        <view class="section-title">附件</view>
        <view class="attachment-tip">请上传不超过200MB的文件，支持常见图片、Office、PDF、压缩包等格式。</view>
        <!-- 添加照片 -->
        <view class="form-item clickable-item" @click="chooseImages">
          <view class="form-icon">🏔️</view>
          <text class="form-label">添加照片</text>
          <text class="arrow">›</text>
        </view>
        <!-- 照片预览 -->
        <view class="images-preview" v-if="formData.images.length > 0">
          <view
              class="image-item"
              v-for="(image, index) in formData.images"
              :key="index"
          >
            <image :src="image" mode="aspectFill" class="preview-image" @click="previewImage(index)" />
            <view class="remove-btn" @click="removeImage(index)">✕</view>
          </view>
        </view>

        <!-- 添加文件 -->
        <view class="form-item clickable-item" @click="chooseFiles">
          <view class="form-icon">📄</view>
          <text class="form-label">添加文件</text>
          <text class="arrow">›</text>
        </view>
        <!-- 文件列表 -->
        <view class="files-list" v-if="formData.files.length > 0">
          <view
              class="file-item"
              v-for="(file, index) in formData.files"
              :key="index"
              @click="previewFile(file)"
          >
            <text class="file-icon">{{ getFileIcon(file.name) }}</text>
            <view class="file-info">
              <text class="file-name">{{ file.name }}</text>
              <text class="file-size" v-if="file.size > 0">{{ formatFileSize(file.size) }}</text>
            </view>
            <view class="remove-btn" @click.stop="removeFile(index)">✕</view>
          </view>
        </view>
      </view>

      <view class="form-card">
        <view class="section-title">负责人</view>
        <view class="form-item">
          <text class="form-label required">负责人</text>
          <view class="responsible-content">
            <view class="selected-members" v-if="formData.members.length">
              <view
                class="member-chip"
                v-for="member in formData.members"
                :key="member.userId"
              >
                <text>{{ member.userName }}</text>
                <text class="chip-remove" @click.stop="removeMember(member.userId)">✕</text>
              </view>
            </view>
            <view class="placeholder" v-else>请选择负责人，可多选</view>
          </view>
          <view class="picker-trigger" @click="openMemberModal">
            <text>{{ formData.members.length ? '调整' : '选择' }}</text>
            <text class="arrow">›</text>
          </view>
        </view>
      </view>
    </view>

    <view class="submit-bar">
      <uv-button
        type="primary"
        :disabled="!canSubmit || submitting"
        :loading="submitting"
        loadingText="提交中..."
        @click="handleSubmit"
      >
        创建任务
      </uv-button>
    </view>

    <uv-picker

        ref="projectPicker"
      :columns="projectColumns"
      keyName="label"
      @confirm="handleProjectConfirm"
    ></uv-picker>

    <uv-datetime-picker
      ref="expirePickerRef"
      v-model="expirePickerValue"
      mode="datetime"
      @confirm="onExpireTimeConfirm"
    ></uv-datetime-picker>

    <view class="member-modal" v-if="showMemberModal">
      <view class="modal-mask" @click="closeMemberModal"></view>
      <view class="modal-panel">
        <view class="modal-header">
          <text class="modal-title">选择负责人</text>
          <text class="modal-close" @click="closeMemberModal">✕</text>
        </view>
        <view class="search-box">
          <input
            v-model="memberKeyword"
            class="search-input"
            placeholder="搜索姓名或部门"
            placeholder-style="color:#999;"
          />
        </view>
        <scroll-view class="member-list" scroll-y>
          <view
            class="member-item"
            v-for="user in filteredMemberOptions"
            :key="user.userId"
            @click="toggleMember(user.userId)"
          >
            <view class="member-info">
              <text class="member-name">{{ user.userName }}</text>
              <text class="member-dept" v-if="user.deptName">{{ user.deptName }}</text>
            </view>
            <view class="select-indicator" :class="{ active: selectedMemberIds.includes(user.userId) }"></view>
          </view>
          <view class="empty-tip" v-if="!filteredMemberOptions.length">
            <text>未找到匹配的人员</text>
          </view>
        </scroll-view>
        <view class="modal-actions">
          <uv-button @click="closeMemberModal">取消</uv-button>
          <uv-button type="primary" @click="confirmMemberSelection">确定</uv-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { createTask, getProjectListAll, getUserList } from '@/api';
import { useDictStore } from '@/store/dict';
import { chooseAndUploadImages, batchUploadFilesToQiniu } from '@/utils/qiniu.js';

const dictStore = useDictStore();

const ATTACHMENT_LIMIT = 9;

const formData = ref({
  projectId: '',
  projectName: '',
  type: '',
  level: '',
  description: '',
  expireTime: '',
  attachments: [],
  members: [],
  images: [],
  files: []
});


const presetProjectId = ref('');
const submitting = ref(false);
const loading = ref(false);


const projectColumns = ref([[]]);
const projectOptions = ref([]);

const showMemberModal = ref(false);
const memberOptions = ref([]);
const memberKeyword = ref('');
const selectedMemberIds = ref([]);
const projectPicker=ref(null);
const expirePickerRef = ref(null);
const expirePickerValue = ref(Date.now());

const getFileIcon = (fileName) => {
  if (!fileName) return '📄';
  const ext = fileName.split('.').pop().toLowerCase();
  const iconMap = {
    'pdf': '📕',
    'doc': '📘',
    'docx': '📘',
    'xls': '📗',
    'xlsx': '📗',
    'ppt': '📙',
    'pptx': '📙',
    'txt': '📄',
    'zip': '📦',
    'rar': '📦',
    'jpg': '🖼️',
    'jpeg': '🖼️',
    'png': '🖼️',
    'gif': '🖼️'
  };
  return iconMap[ext] || '📄';
};

const typeOptions = computed(() => {
  return dictStore.getDictByType('task_type').map(item => ({
    label: item.dictLabel,
    value: item.dictValue
  }));
});

const levelOptions = computed(() => {
  return dictStore.getDictByType('task_level').map(item => ({
    label: item.dictLabel,
    value: item.dictValue
  }));
});

const filteredMemberOptions = computed(() => {
  if (!memberKeyword.value.trim()) {
    return memberOptions.value;
  }
  const keyword = memberKeyword.value.trim().toLowerCase();
  return memberOptions.value.filter(user => {
    const name = (user.userName || '').toLowerCase();
    const dept = (user.deptName || '').toLowerCase();
    return name.includes(keyword) || dept.includes(keyword);
  });
});

const canSubmit = computed(() => {
  return Boolean(
    formData.value.projectId &&
    formData.value.type &&
    formData.value.level &&
    formData.value.expireTime &&
    formData.value.description.trim() &&
    formData.value.members.length
  );
});

const formatDateTime = (value) => {
  if (!value && value !== 0) return '';
  const date = typeof value === 'number' ? new Date(value) : new Date(value);
  if (Number.isNaN(date.getTime())) return '';
  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');
  const second = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

const loadProjects = async () => {
  try {
    const res = await getProjectListAll();
    console.log('xiangmu',res);
    const list = res;
    projectOptions.value = list.map(item => ({
      id: item.id,
      name: item.name
    }));
    projectColumns.value = [projectOptions.value.map(item => ({
      label: item.name,
      value: item.id
    }))];

    if (presetProjectId.value) {
      const matched = projectOptions.value.find(item => String(item.id) === String(presetProjectId.value));
      if (matched) {
        formData.value.projectId = String(matched.id);
        formData.value.projectName = matched.name;
      }
    }
  } catch (error) {
    console.error('加载项目列表失败:', error);
    uni.showToast({
      title: '加载项目失败',
      icon: 'none'
    });
  }
};

const loadMembers = async () => {
  try {
    const res = await getUserList({
      pageNum: 1,
      pageSize: 200,
      status: 0,
      delFlag: 0
    });
    const rows = Array.isArray(res?.rows) ? res.rows : Array.isArray(res?.data) ? res.data : [];
    memberOptions.value = rows.map(item => ({
      userId: String(item.userId || item.id),
      userName: item.nickName || item.userName || '',
      deptName: item.dept?.deptName || item.deptName || ''
    }));
  } catch (error) {
    console.error('加载用户列表失败:', error);
    uni.showToast({
      title: '加载负责人失败',
      icon: 'none'
    });
  }
};

const openProjectPicker = () => {
  console.log('openProjectPicker');
  if (!projectOptions.value.length) {
    uni.showToast({
      title: '暂无项目可选',
      icon: 'none'
    });
    return;
  }

  if (projectPicker.value?.open) {
    projectPicker.value.open();
  }
};

const handleProjectConfirm = ({ value }) => {
  if (value && value.length) {
    const selected = value[0];
    formData.value.projectId = String(selected.value);
    formData.value.projectName = selected.label;
  }
};

const selectType = (typeValue) => {
  formData.value.type = typeValue;
};

const selectLevel = (levelValue) => {
  formData.value.level = levelValue;
};

const openExpireTimePicker = () => {
  if (formData.value.expireTime) {
    expirePickerValue.value = new Date(formData.value.expireTime.replace(/-/g, '/')).getTime();
  } else {
    expirePickerValue.value = Date.now();
  }
  if (expirePickerRef.value?.open) {
    expirePickerRef.value.open();
  }
};

const onExpireTimeConfirm = (event) => {
  if (event?.value) {
    formData.value.expireTime = formatDateTime(event.value);
  }
};

const handleAddAttachment = () => {
  const remaining = ATTACHMENT_LIMIT - formData.value.attachments.length;
  if (remaining <= 0) {
    uni.showToast({
      title: `最多上传${ATTACHMENT_LIMIT}个附件`,
      icon: 'none'
    });
    return;
  }

  uni.showActionSheet({
    itemList: ['上传图片', '上传文件'],
    success: ({ tapIndex }) => {
      if (tapIndex === 0) {
        chooseImages();
      } else if (tapIndex === 1) {
        chooseFiles();
      }
    }
  });
};

// 选择图片并自动上传到七牛云
const chooseImages = async () => {
  try {
    const remainingCount = 9 - formData.value.images.length;
    if (remainingCount <= 0) {
      uni.showToast({
        title: '最多只能添加9张图片',
        icon: 'none'
      });
      return;
    }

    // 使用封装好的选择并上传功能
    const urls = await chooseAndUploadImages({
      count: remainingCount,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera']
    });

    // 将上传后的URL添加到图片列表
    formData.value.images = [...formData.value.images, ...urls];
  } catch (err) {
    console.error('选择或上传图片失败:', err);
    uni.showToast({
      title: err.message || '选择图片失败',
      icon: 'none'
    });
  }
};

// 预览图片
const previewImage = (index) => {
  uni.previewImage({
    urls: formData.value.images,
    current: index
  });
};

// 删除图片
const removeImage = (index) => {
  formData.value.images.splice(index, 1);
};
const chooseFiles = async () => {
  const remainingCount = 5 - formData.value.files.length;
  if (remainingCount <= 0) {
    uni.showToast({
      title: '最多只能添加5个文件',
      icon: 'none'
    });
    return;
  }

  // 优先使用 uni.chooseFile（H5和部分平台支持）
  // #ifdef H5 || MP-WEIXIN || APP-PLUS
  try {
    uni.chooseFile({
      count: remainingCount,
      extension: ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.txt', '.zip', '.rar','.jpg','.png'],
      success: async (res) => {
        try {
          uni.showLoading({
            title: '上传中...',
            mask: true
          });

          // 批量上传文件到七牛云
          const uploadResults = await batchUploadFilesToQiniu(
              res.tempFiles.map(file => ({
                path: file.path,
                name: file.name
              }))
          );

          // 将上传结果添加到文件列表
          const newFiles = uploadResults.map(result => ({
            name: result.name,
            path: result.url, // 保存七牛云URL
            size: result.size
          }));

          formData.value.files = [...formData.value.files, ...newFiles];

          uni.hideLoading();
          uni.showToast({
            title: `成功添加${newFiles.length}个文件`,
            icon: 'success'
          });
        } catch (error) {
          uni.hideLoading();
          console.error('上传文件失败:', error);
          uni.showToast({
            title: error.message || '上传文件失败',
            icon: 'none'
          });
        }
      },
      fail: (err) => {
        console.error('选择文件失败:', err);
        // 如果uni.chooseFile不支持，尝试使用原生方法
        chooseFilesNative();
      }
    });
  } catch (error) {
    // 如果不支持uni.chooseFile，使用原生方法
    chooseFilesNative();
  }
  // #endif

  // #ifndef H5 || MP-WEIXIN || APP-PLUS
  // 其他平台使用原生方法
  chooseFilesNative();
  // #endif
};

// 原生文件选择方法（安卓平台）
const chooseFilesNative = async () => {
  const remainingCount = 5 - formData.value.files.length;

  // 安卓平台使用 plus API 调用原生文件选择器
  if (typeof plus !== 'undefined') {
    try {
      const Intent = plus.android.importClass('android.content.Intent');
      const main = plus.android.runtimeMainActivity();

      // 创建文件选择 Intent
      const intent = new Intent(Intent.ACTION_GET_CONTENT);
      intent.setType('*/*');
      intent.addCategory(Intent.CATEGORY_OPENABLE);
      intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true); // 允许多选

      // 启动文件选择器
      main.startActivityForResult(intent, 1001);

      // 监听文件选择结果
      const originalOnActivityResult = main.onActivityResult;
      main.onActivityResult = async (requestCode, resultCode, data) => {
        if (requestCode === 1001) {
          if (resultCode === -1 && data) { // RESULT_OK = -1
            try {
              const clipData = data.getClipData();
              const files = [];

              // 获取文件名的方法
              const getFileName = (uri) => {
                try {
                  const cursor = main.getContentResolver().query(uri, null, null, null, null);
                  if (cursor && cursor.moveToFirst()) {
                    const nameIndex = cursor.getColumnIndex('_display_name');
                    if (nameIndex !== -1) {
                      const fileName = cursor.getString(nameIndex);
                      cursor.close();
                      return fileName;
                    }
                    cursor.close();
                  }
                } catch (e) {
                  console.error('获取文件名失败:', e);
                }
                return null;
              };

              if (clipData) {
                // 多选文件
                const count = clipData.getItemCount();
                for (let i = 0; i < count && files.length < remainingCount; i++) {
                  const item = clipData.getItemAt(i);
                  const uri = item.getUri();
                  const uriString = uri.toString();

                  // 获取文件名
                  let fileName = getFileName(uri) || `file_${Date.now()}_${i}`;

                  files.push({
                    name: fileName,
                    path: uriString, // 保存 URI 字符串
                    size: 0
                  });
                }
              } else {
                // 单选文件
                const uri = data.getData();
                if (uri) {
                  const uriString = uri.toString();
                  let fileName = getFileName(uri) || `file_${Date.now()}`;

                  files.push({
                    name: fileName,
                    path: uriString, // 保存 URI 字符串
                    size: 0
                  });
                }
              }

              if (files.length > 0) {
                // 显示上传中提示
                uni.showLoading({
                  title: '上传中...',
                  mask: true
                });

                try {
                  // 批量上传文件到七牛云
                  const uploadResults = await batchUploadFilesToQiniu(files);

                  // 将上传结果添加到文件列表
                  const newFiles = uploadResults.map(result => ({
                    name: result.name,
                    path: result.url, // 保存七牛云URL
                    size: result.size
                  }));

                  formData.value.files = [...formData.value.files, ...newFiles];

                  uni.hideLoading();
                  uni.showToast({
                    title: `成功添加${newFiles.length}个文件`,
                    icon: 'success'
                  });
                } catch (uploadError) {
                  uni.hideLoading();
                  console.error('上传文件失败:', uploadError);
                  uni.showToast({
                    title: uploadError.message || '上传文件失败',
                    icon: 'none'
                  });
                }
              }

              // 恢复原始的 onActivityResult
              if (originalOnActivityResult) {
                main.onActivityResult = originalOnActivityResult;
              }
            } catch (error) {
              uni.hideLoading();
              console.error('处理文件选择结果失败:', error);
              uni.showToast({
                title: '处理文件失败',
                icon: 'none'
              });
            }
          }
        } else {
          // 调用原始的 onActivityResult
          if (originalOnActivityResult) {
            originalOnActivityResult(requestCode, resultCode, data);
          }
        }
      };
    } catch (error) {
      console.error('打开文件选择器失败:', error);
      uni.showToast({
        title: '文件选择功能暂不可用',
        icon: 'none'
      });
    }
  } else {
    uni.showToast({
      title: '当前环境不支持文件选择',
      icon: 'none'
    });
  }
};

// 删除文件
const removeFile = (index) => {
  formData.value.files.splice(index, 1);
};

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (!bytes || bytes === 0) return '';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
};

// 预览/下载文件
const previewFile = (file) => {
  if (!file.path) {
    uni.showToast({
      title: '文件路径不存在',
      icon: 'none'
    });
    return;
  }

  // 如果是图片，使用预览图片功能
  const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
  const ext = file.name.split('.').pop().toLowerCase();

  if (imageExts.includes(ext)) {
    uni.previewImage({
      urls: [file.path],
      current: file.path
    });
  } else {
    // 其他文件类型，尝试打开或下载
    // #ifdef H5
    window.open(file.path, '_blank');
    // #endif

    // #ifdef APP-PLUS
    plus.runtime.openURL(file.path);
    // #endif

    // #ifndef H5 || APP-PLUS
    uni.showToast({
      title: '点击下载文件',
      icon: 'none'
    });
    // 可以调用下载API
    uni.downloadFile({
      url: file.path,
      success: (res) => {
        if (res.statusCode === 200) {
          uni.openDocument({
            filePath: res.tempFilePath,
            success: () => {
              console.log('打开文档成功');
            },
            fail: (err) => {
              console.error('打开文档失败:', err);
              uni.showToast({
                title: '无法打开此文件',
                icon: 'none'
              });
            }
          });
        }
      },
      fail: (err) => {
        console.error('下载文件失败:', err);
        uni.showToast({
          title: '下载文件失败',
          icon: 'none'
        });
      }
    });
    // #endif
  }
};




const openMemberModal = () => {
  selectedMemberIds.value = formData.value.members.map(member => member.userId);
  memberKeyword.value = '';
  showMemberModal.value = true;

};

const closeMemberModal = () => {
  showMemberModal.value = false;
};

const toggleMember = (userId) => {
  const index = selectedMemberIds.value.indexOf(userId);
  if (index >= 0) {
    selectedMemberIds.value.splice(index, 1);
  } else {
    selectedMemberIds.value.push(userId);
  }
};

const confirmMemberSelection = () => {
  const selected = memberOptions.value.filter(user => selectedMemberIds.value.includes(user.userId));
  formData.value.members = selected.map(user => ({
    userId: user.userId,
    userName: user.userName
  }));
  showMemberModal.value = false;
};

const removeMember = (userId) => {
  formData.value.members = formData.value.members.filter(member => member.userId !== userId);
};

const handleSubmit = async () => {
  if (submitting.value) {
    return;
  }

  if (!canSubmit.value) {
    uni.showToast({
      title: '请完善必填信息',
      icon: 'none'
    });
    return;
  }

  // 合并所有附件URL（图片和文件）
  // 图片和文件都已经上传到七牛云，直接使用URL
  const allAttaches = [
    ...formData.value.images, // 图片已经是七牛云URL
    ...formData.value.files.map(file => file.path) // 文件已经是七牛云URL
  ].filter(url => url && url.trim() !== ''); // 过滤空值

  // 将附件数组转换为逗号分隔的字符串
  const submitAttaches = allAttaches.join(',');

  const payload = {
    id: null,
    projectId: formData.value.projectId,
    type: formData.value.type,
    level: formData.value.level,
    picture: submitAttaches,
    description: formData.value.description.trim(),
    expireTime: formData.value.expireTime,
    memberList: formData.value.members.map(member => ({
      userId: member.userId,
      userName: member.userName
    }))
  };

  submitting.value = true;
  uni.showLoading({
    title: '提交中...'
  });

  try {
    const res = await createTask(payload);
    console.log('@@@@@@@@@@',res);
    uni.hideLoading();
    uni.showToast({
      title: '创建成功',
      icon: 'success'
    });
    uni.$emit('taskListRefresh');
    setTimeout(() => {
      uni.navigateBack();
    }, 1200);
  } catch (error) {
    uni.hideLoading();
    console.error('创建任务失败:', error);
    // 错误提示已在响应拦截器中统一处理，这里不需要重复显示
  } finally {
    submitting.value = false;
    console.log('submitting', submitting.value);
  }
};

onLoad(async (options) => {
  if (options?.projectId) {
    presetProjectId.value = String(options.projectId);
  }
  loading.value = true;
  try {
    await dictStore.loadDictData();
    await Promise.all([loadProjects(), loadMembers()]);
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped lang="scss">
.task-add-page {
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 120rpx;
}

.content-scroll {
  flex: 1;
}

.form-card {
  margin: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
  gap: 12px;
}

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

.align-start {
  align-items: flex-start;
}

.form-label {
  width: 80px;
  font-size: 14px;
  color: #333;
}

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

.form-value {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 24px;
}

.value-text {
  color: #333;
  font-size: 14px;
}

.placeholder {
  color: #999;
  font-size: 14px;
}

.arrow {
  font-size: 18px;
  color: #999;
}

.textarea-input {
  flex: 1;
  min-height: 120px;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fb;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.pill-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-item {
  padding: 6px 14px;
  border-radius: 20px;
  background: #f3f5f9;
  color: #666;
  font-size: 13px;
}

.pill-item.active {
  background: #2885ff;
  color: #fff;
}

.attachment-tip {
  font-size: 12px;
  color: #999;
  margin-bottom: 12px;
}

.attachment-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.attachment-item {
  width: calc(33.33% - 8px);
  min-width: 100px;
  height: 110px;
  background: #f6f7fb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  gap: 6px;
  position: relative;
}

.attachment-item.add-item {
  border: 1px dashed #d1d8e6;
  background: #fff;
  color: #2885ff;
}

.add-icon {
  font-size: 28px;
}

.add-text {
  font-size: 13px;
}

.file-icon {
  font-size: 26px;
}

.file-name {
  font-size: 12px;
  color: #333;
  text-align: center;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.responsible-content {
  flex: 1;
}

.selected-members {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.member-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #eef4ff;
  border-radius: 16px;
  font-size: 12px;
  color: #2885ff;
}

.chip-remove {
  font-size: 14px;
}

.picker-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #2885ff;
  font-size: 14px;
}

.submit-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #eee;
}

.member-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modal-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;

  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f2f2f2;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  font-size: 20px;
  color: #999;
}

.search-box {
  padding: 12px 16px;
  border-bottom: 1px solid #f2f2f2;
}

.search-input {
  background: #f5f6f8;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
}

.member-list {
  height: 600px;

}

.member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f5f5f5;
}

.member-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-name {
  font-size: 14px;
  color: #333;
}

.member-dept {
  font-size: 12px;
  color: #999;
}

.select-indicator {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.select-indicator.active {
  background: #2885ff;
  border-color: #2885ff;
}

.modal-actions {
  display: flex;
  gap: 12px;
  padding: 12px 16px 24px;
}

.empty-tip {
  padding: 40px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* 表单项 */
.form-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  gap: 12px;
}

.clickable-item {
  cursor: pointer;

  &:active {
    background-color: #f5f5f5;
  }
}

.form-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.form-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-label {

  font-size: 15px;
  color: #333;
}

.form-value {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.form-placeholder {
  font-size: 15px;
  color: #999;
}

.arrow {
  font-size: 20px;
  color: #999;
  flex-shrink: 0;
}

.description-input {
  flex: 1;
  min-height: 80px;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

/* 图片预览 */
.images-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 0 16px;
}

.image-item {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
}

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

.remove-btn {
  position: relative;

  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

/* 文件列表 */
.files-list {
  padding: 0 16px;
  margin-bottom: 12px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
  gap: 12px;
  cursor: pointer;

  &:active {
    background-color: #f5f5f5;
  }
}

.file-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.file-name {
  text-align: left;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.file-size {
  font-size: 12px;
  color: #999;
}
</style>