JCSS / jcss-miniprogram

<template>
  <view class="page-container" style="padding-bottom: 20px;">
    <!-- 页面级加载组件 -->
    <up-loading-page
        v-if="loading"
        :loading="true"
        title="加载中..."
        color="#2563EB"
    ></up-loading-page>

    <!-- 内容容器 -->
    <template v-else>
      <view class="content-wrap" v-for="(i, index) in orderDetail" :key="index">
        <!-- 1. 计划名称：独立标题卡（设计稿顶部白卡） -->
        <view class="record-head">
          <view class="record-title">{{i.planName || '--'}}</view>
          <!-- 按批次查看时一期次一条，用「第X次 + 上报状态」区分多次提交记录 -->
          <view class="record-sub" v-if="i.sortNum">
            第 {{ i.sortNum }} 次 · {{ commitStateText(i.commitState) }}
          </view>
        </view>
        <!-- 工单详情内容 -->
        <view class="form-card">
          <!-- 区块标题：蓝色竖条 + 标题（设计稿 .card） -->
          <view class="sec-head">
            <view class="sec-bar"></view>
            <view class="sec-title">作业信息</view>
          </view>

          <!-- 2. 工单位置 -->
          <view class="u-body-item u-flex">
            <view class="u-body-item-title">计划编码：</view>
            <view class="u-line-1 u-body-value">{{ i.planNo || '--' }}</view>
          </view>

          <view class="u-body-item u-flex">
            <view class="u-body-item-title">养护周期：</view>
            <view class="u-line-1 u-body-value">{{ `${i.rate}${uni.$dict.getDictLabel('cycle_id_type', i.cycleId)}` }}</view>
          </view>

          <!-- 4. 情况描述 -->
          <view class="u-body-item u-flex">
            <view class="u-body-item-title">计划有效期：</view>
            <view class="u-line-1 u-body-value">{{ `${timeFormat(i.beginTime,'yyyy-mm-dd')} 至 ${timeFormat(i.endTime,'yyyy-mm-dd')}` }}</view>
          </view>

          <!-- 5. 问题照片（核心修复：兼容WebP + 强制尺寸） -->
          <!-- <up-cell title="照片">
            <template #value>
              <view class="cell-content-wrap">

                <up-album
                    :urls="i.beginImgList "
                    singleSize="70"
                    multipleSize="70"
                    :preview-full-image="true"

                ></up-album>

<!--                &lt;!&ndash; 修复1：手动渲染图片，兼容WebP + 强制尺寸 &ndash;&gt;-->
<!--                <view v-if="!!i.beginImgList?.length" class="album-container">-->
<!--                  <view-->
<!--                      class="album-item"-->
<!--                      v-for="(imgUrl, imgIndex) in formatImageUrls(i.beginImgList)"-->
<!--                      :key="imgIndex"-->
<!--                      @click="previewImage(imgUrl, formatImageUrls(i.beginImgList))"-->
<!--                  >-->
<!--                    <image-->
<!--                        :src="imgUrl"-->
<!--                        mode="widthFix"-->
<!--                        class="album-image"-->
<!--                        :style="{width: '70px', height: '70px', objectFit: 'cover'}"-->
<!--                    ></image>-->
<!--                  </view>-->
<!--                </view>-->
<!--                <text v-else class="empty-text">暂无问题照片</text>-->
              <!-- </view>
            </template>
          </up-cell> --> 

          <!-- 7. 处理结果 -->
          <!-- <up-cell align="middle">
            <template #title>
              <view style="min-width: 200rpx">养护描述</view>
            </template>
            <template #value>
              <view class="up-line-1 common-text-color">{{i.remark || '--'}}</view>
            </template>
          </up-cell> -->

         

          <view class="u-body-item u-flex">
            <view class="u-body-item-title">提交人：</view>
            <view class="u-line-1 u-body-value">{{ i.userName || '--' }}</view>
          </view>

          <view class="u-body-item u-flex">
            <view class="u-body-item-title">提交时间：</view>
            <view class="u-line-1 u-body-value">{{ i.createTime==null?'--':timeFormat(i.createTime,'yyyy-mm-dd hh:MM:ss') }}</view>
          </view>

          <!-- 本次养护被置为失效时，把原因一并展示 -->
          <view class="u-body-item u-flex" v-if="i.commitState === 3">
            <view class="u-body-item-title">失效原因：</view>
            <view class="u-line-1 u-body-value">{{ i.invalidReason || '--' }}</view>
          </view>
        </view>

        <!-- 动态配置的养护字段填报值：每条子上报（garden_work_record）单独一张卡，不把多次提交的数据混在一起 -->
        <template v-if="i.recordRows && i.recordRows.length">
          <view class="form-card" v-for="(r, ri) in i.recordRows" :key="ri">
            <!-- 区块标题：蓝色竖条 + 标题；多条时右侧标注第几条与上报时间 -->
            <view class="sec-head">
              <view class="sec-bar"></view>
              <view class="sec-title">养护填报内容</view>
              <!-- 按批次查看时每个期次都标「第几条 + 上报时间」，单条记录也标，避免和上一期次的卡片混读 -->
              <text class="sec-count" v-if="i.recordRows.length > 1 || i.sortNum">
                第 {{ ri + 1 }} 条 · {{ r.workTime == null ? '--' : timeFormat(r.workTime, 'yyyy-mm-dd hh:MM:ss') }}
              </text>
            </view>
            <view class="u-body-item u-flex field-row" v-for="(f, fi) in r.fieldRows" :key="fi">
              <view class="u-body-item-title field-cell-title-multi">{{ f.name }}</view>
              <view class="field-value">
                <!-- 7 图片：复用本页照片的相册组件（预览/尺寸一致） -->
                <up-album
                    v-if="f.kind === 'image'"
                    :urls="f.images"
                    singleSize="60"
                    multipleSize="60"
                    :preview-full-image="true"
                ></up-album>
                <!-- 6 多选 / 3 历史多选 / 9 关联记录：标签平铺（自绘，避免引入未使用的组件） -->
                <view v-else-if="f.kind === 'multi'" class="field-tags">
                  <view v-for="(t, ti) in f.tags" :key="ti" class="field-tag">{{ t.text }}</view>
                </view>
                <!-- 8 附件：点击下载后用系统应用打开 -->
                <view v-else-if="f.kind === 'file'" class="field-tags">
                  <text
                      v-for="(file, ui) in f.files"
                      :key="ui"
                      class="field-file"
                      @click="openFile(file)"
                  >{{ file.name }}</text>
                </view>
                <!-- 10 链接：小程序不能直接打开外部 URL，点击复制 -->
                <text v-else-if="f.kind === 'link'" class="field-link" @click="copyLink(f.text)">{{ f.text }}</text>
                <!-- 11 地理位置：点击调微信原生地图（无需地图 AK） -->
                <text v-else-if="f.kind === 'geo' && f.geo" class="field-link" @click="openGeo(f.geo)">{{ f.text }}</text>
                <!-- 其余（1数值/2文本/3单选枚举/4日期/5布尔等）文本直出 -->
                <text v-else class="common-text-color field-text">{{ f.text }}</text>
              </view>
            </view>
            <!-- 该条上报没填字段时给个占位，避免出现一张空白卡 -->
            <view class="no-field-tip" v-if="!r.fieldRows.length">本条未填写养护内容</view>
          </view>
        </template>
        <!-- 当没有填报字段，提示暂无提交记录 -->
        <view v-else class="no-record-tip">
          {{ i.commitState === 3 ? '本次养护已置为失效，未填写养护内容' : '直接结束了本次任务' }}
        </view>

      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {detailList,getDetailList} from "@/api/maintain-manage/maintain-manage";
import {onLoad} from '@dcloudio/uni-app';
import {timeFormat} from '@/uni_modules/uview-plus';

// 状态管理
const loading = ref(true);
const orderDetail = ref([]);

/**
 * 格式化图片URL（兼容WebP + 清理非法字符）
 * @param urls 原始图片列表
 */
const formatImageUrls = (urls) => {
  if (!Array.isArray(urls) || urls.length === 0) return [];

  return urls.map(url => {
    if (typeof url !== 'string') return '';
    // 1. 清理URL开头的非法字符（如数字、空格）
    const validStart = url.indexOf('http');
    const cleanUrl = validStart > 0 ? url.substring(validStart) : url;
    // 2. 小程序兼容：WebP转JPEG（可选，后端无转换则注释）
    // return cleanUrl.replace('.webp', '.jpeg');
    return cleanUrl;
  }).filter(url => !!url);
};

/**
 * 预览图片
 * @param currentUrl 当前点击的图片
 * @param allUrls 所有图片列表
 */
const previewImage = (currentUrl, allUrls) => {
  uni.previewImage({
    current: currentUrl,
    urls: allUrls,
    fail: (err) => {
      console.error('预览图片失败：', err);
      uni.showToast({title: '预览图片失败', icon: 'none'});
    }
  });
};

/** 上报状态文案：1进行中/2已完成/3已失效 */
const commitStateText = (state) => {
  if (state === 1) return '进行中'
  if (state === 2) return '已完成'
  if (state === 3) return '已失效'
  return '--'
};

/**
 * 获取工单详情
 * 传 batchNo 时返回该批次下所有期次的上报记录（一次一条期次，多次提交要全部列出）；
 * 只传 planNo 时仍按计划编码查单条，兼容原入口。
 */
const getOrderDetail = async (planNo: string, commitId?: string, batchNo?: string) => {
  console.log('getOrderDetail')
  try {
    loading.value = true;
    let queryData: any = {
      pageSize: commitId ? 1 : 100,
      pageNo: 1,
    };
    // 计划编码 + 批次号同时带上：只查当前这一期次（planNo）的提交记录，批次号用于限定范围
    if (planNo) {
      queryData.planNo = planNo;
    }
    if (batchNo) {
      queryData.batchNo = batchNo;
    }
    if (commitId) {
      queryData.commitId = commitId;
    }
    const res = await detailList(queryData);
    console.log('接口返回：', res);
    const list = res.data?.list || res.list || [];

    // 按批次查看时按「第几次」正序，读起来和 App 列表一致
    if (batchNo) {
      list.sort((a, b) => Number(a.sortNum || 0) - Number(b.sortNum || 0));
    }

    orderDetail.value = list.map(item => {
      // 一次养护可能有多次子上报（workRecords），每次上报有自己的字段值，逐条展示；
      // 历史数据（双写上线前）没有 workRecords，退回用 item.fields 当唯一一条记录。
      const useValues = Array.isArray(item.fields) ? item.fields : []
      const workRecords = Array.isArray(item.workRecords) && item.workRecords.length
          ? item.workRecords
          : [{ workTime: item.createTime, values: useValues }]
      return {
        ...item,
        // 每条子上报一行自己的字段渲染结果，模板里一条记录一张卡
        recordRows: workRecords.map(record => ({
          workTime: record?.workTime ?? item.createTime,
          fieldRows: (Array.isArray(record?.values) ? record.values : []).map(buildFieldRow)
        }))
      }
    })
  } catch (error) {
    console.error('获取工单详情失败：', error);
    uni.showToast({title: '加载失败，请重试', icon: 'none'});
  } finally {
    loading.value = false;
  }
};




// ========== 动态配置字段（fieldValue）展示 ==========
// 解析口径与 PC 端 FieldValueCell.vue + WorkRecordTab.vue 保持一致：
// 后端 valueText 是「类型无关直拷、提交无校验」，历史格式与脏数据都可能出现，故所有解析一律降级、不抛异常。
/** 空值 token：与 PC 的 EMPTY_TOKENS 一致 */
const EMPTY_TOKENS = ['', '[]', '{}', 'null', 'undefined'];
/** 走「新类型」渲染的字段类型（5布尔/6多选/7图片/8附件/9关联记录/10链接/11地理位置） */
const NEW_RENDER_TYPES = [5, 6, 7, 8, 9, 10, 11];
const TRUTHY = ['是', 'true', '1', 'y', 'yes'];
const FALSY = ['否', 'false', '0', 'n', 'no'];

/** 取原始文本，空/占位值归一成空串 */
const rawTextOf = (item) => {
  const text = String(item?.valueText ?? '').trim();
  return EMPTY_TOKENS.includes(text) ? '' : text;
};

/** JSON 数组解析；失败退化为逗号分隔（兼容历史枚举多选的存储格式） */
const parseArray = (raw) => {
  const text = String(raw ?? '').trim();
  if (!text) return [];
  try {
    const parsed = JSON.parse(text);
    if (Array.isArray(parsed)) return parsed;
    return parsed !== null && typeof parsed === 'object' ? [parsed] : [];
  } catch (e) {
    return text.split(',').map(s => s.trim()).filter(Boolean);
  }
};

/** JSON 对象解析，非法一律退化成空对象 */
const parseObject = (raw) => {
  if (!raw) return {};
  try {
    const parsed = JSON.parse(raw);
    return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
  } catch (e) {
    return {};
  }
};

/** 静态选项 value -> label（后端仅 option_source=1 时回传 options，控体积） */
const optionsMapOf = (item) => {
  const map = {};
  parseArray(item?.options).forEach(o => {
    if (o && o.value != null) map[String(o.value)] = String(o.label ?? o.value);
  });
  return map;
};

/**
 * 枚举值 -> 展示文本：优先字典(option_source=2)，其次静态选项表(option_source=1)，都取不到返回空串。
 * 后端「仅静态选项回传 options」就是给客户端渲染标签用的；取不到时调用方退回裸值（与 PC 的 formatValue 一致）。
 */
const enumLabelOf = (item, value) => {
  if (!value) return '';
  if (item.optionSource === 2 && item.dictType) {
    const label = uni.$dict.getDictLabel(item.dictType, value);
    if (label) return label;
  }
  return optionsMapOf(item)[value] ?? '';
};

/** 旧类型（1数值/2文本/3单选枚举/4日期）与物料的原文直出，口径同 PC 的 formatValue */
const legacyText = (item) => {
  // 物料以值行的 materialId 判定（物料字段实际是 fieldType=3 + option_source=3，并非独立类型）
  if (item.materialId != null) {
    return `${item.materialName || ''}${item.quantity != null ? ' × ' + item.quantity : ''}${item.unit ? ' ' + item.unit : ''}`;
  }
  const raw = rawTextOf(item);
  if (raw) return item.unit ? `${raw} ${item.unit}` : raw;
  if (item.valueNumber != null) return item.unit ? `${item.valueNumber} ${item.unit}` : String(item.valueNumber);
  return '-';
};

const isUrl = (v) => /^(https?:)?\/\//i.test(String(v)) || String(v).startsWith('/');

/** 文件名取 URL 末段（存储不保留原始文件名） */
const fileNameOf = (url) => {
  const path = String(url).split('?')[0].split('#')[0];
  const name = path.substring(path.lastIndexOf('/') + 1);
  try {
    return decodeURIComponent(name) || url;
  } catch (e) {
    return name || url;
  }
};

/** 多值元素归一化：兼容裸值("1")与带数量对象({value,label,quantity}) */
const toMultiItem = (v) => {
  if (v === null || typeof v !== 'object') {
    return { value: String(v), label: '', quantity: null };
  }
  const raw = v.value ?? v.id ?? v.label;
  const qty = Number(v.quantity);
  return {
    value: raw == null ? '' : String(raw),
    label: v.label != null ? String(v.label) : '',
    quantity: v.quantity != null && Number.isFinite(qty) ? qty : null
  };
};

/**
 * 多值（6多选 / 3历史多选 / 9关联记录）转标签文本。
 * 标签优先级：值行快照 label（9关联记录、6+needQuantity 会带）→ 字典 → 静态选项表 → 裸值。
 * 与 PC 的 DictTag/multiLabel 等价，且对带数量的项同样能显示标签。
 */
const buildTags = (item) => {
  return parseArray(item.valueText)
    .map(toMultiItem)
    .filter(i => i.value)
    .map(i => {
      const label = i.label || enumLabelOf(item, i.value) || i.value;
      return { text: i.quantity == null ? label : `${label} ×${i.quantity}` };
    });
};

/** 11 地理位置：JSON 对象 {lng,lat,address}，兼容 "lng,lat" 裸文本 */
const parseGeo = (source, ext) => {
  let lng = null;
  let lat = null;
  let address = '';
  try {
    const parsed = JSON.parse(source);
    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
      lng = Number(parsed.lng ?? parsed.longitude);
      lat = Number(parsed.lat ?? parsed.latitude);
      address = parsed.address || '';
    }
  } catch (e) {
    // 非法 JSON：继续尝试「经度,纬度」文本形态
  }
  if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
    const parts = String(source).split(',').map(s => Number(s.trim()));
    if (parts.length >= 2 && parts.every(n => Number.isFinite(n))) {
      lng = parts[0];
      lat = parts[1];
      address = '';
    } else {
      return null;
    }
  }
  const precision = Math.min(Math.max(Number(ext.precision) || 6, 0), 8);
  const coord = `${lng.toFixed(precision)}, ${lat.toFixed(precision)}`;
  return { lng, lat, address, text: address ? `${coord}（${address}）` : coord };
};

/**
 * 把一个字段值行归一化成展示描述 { name, kind, text, tags, images, files, geo }。
 * 分发顺序与 PC 的 isNewTypeValue 完全一致：物料 → 枚举(3) → 新类型(5..11) → 旧类型原文直出。
 */
const buildFieldRow = (item) => {
  const row = { name: item.fieldName || item.fieldCode || '-', kind: 'text', text: '-', tags: [], images: [], files: [], geo: null };

  // ==========【新增修复代码】优先使用后端返回的text快照，解决ce_shi_4 / wu_liao不展示问题==========
  if (item.text != null && String(item.text).trim() !== '') {
    row.text = String(item.text).trim();
    // 注意：图片/多选/布尔等类型，不能直接用item.text，要保留原有解析逻辑，所以只对普通文本类型生效
    // 判断：不是新渲染类型、不是物料，才直接用快照文本
    const isNewType = NEW_RENDER_TYPES.includes(item.fieldType);
    const isMaterial = item.materialId != null;
    if (!isNewType && !isMaterial) {
      return row;
    }
  }
  // =========================================================================================

  const raw = rawTextOf(item);
  // ① 物料：优先级最高，即便凑巧带 multiple=1 也不当多值渲染
  if (item.materialId != null || item.fieldType == null) {
    row.text = legacyText(item);
    return row;
  }
  // ② 枚举(3)：multiple=1 是历史多选（逗号分隔）走多值；multiple=0 单选按值查标签(字典/静态选项)
  if (item.fieldType === 3) {
    if (item.multiple !== 1) {
      // 单选存的是 option.value，直接直出会显示成 "2 把"（工具=锄头）这种无意义文本，
      // 故先查标签；option_source 为 3物料/4数据表/5SQL/6接口 时后端不回传选项表，查不到则退回 legacyText(与 PC 一致)
      const label = enumLabelOf(item, raw);
      row.text = label ? (item.unit ? `${label} ${item.unit}` : label) : legacyText(item);
      return row;
    }
    row.kind = 'multi';
    row.tags = buildTags(item);
    if (!row.tags.length) {
      row.kind = 'text';
      row.text = raw || '-';
    }
    return row;
  }
  // ③ 旧类型 1数值/2文本/4日期：原文直出
  if (!NEW_RENDER_TYPES.includes(item.fieldType)) {
    row.text = legacyText(item);
    return row;
  }
  const ext = parseObject(item.extConfig);
  switch (item.fieldType) {
    case 5: { // 布尔：识别不出真/假时退回原文，不臆测
      const lower = raw.toLowerCase();
      row.text = TRUTHY.includes(lower) ? '是' : (FALSY.includes(lower) ? '否' : (raw || '-'));
      break;
    }
    case 6: // 多选
      row.kind = 'multi';
      row.tags = buildTags(item);
      if (!row.tags.length) {
        row.kind = 'text';
        row.text = raw || '-';
      }
      break;
    case 7: // 图片：只接受 URL，空则退回原文
      row.images = parseArray(item.valueText).map(v => String(v)).filter(isUrl);
      row.kind = row.images.length ? 'image' : 'text';
      if (!row.images.length) row.text = raw || '-';
      break;
    case 8: // 附件
      row.files = parseArray(item.valueText).map(v => String(v)).filter(isUrl)
        .map(u => ({ url: u, name: fileNameOf(u) }));
      row.kind = row.files.length ? 'file' : 'text';
      if (!row.files.length) row.text = raw || '-';
      break;
    case 9: // 关联记录：name 随值落库当快照，缺 name 时显示裸 id（不回查选项）
      row.tags = parseArray(item.valueText).map(v => {
        if (v == null) return null;
        if (typeof v === 'object') {
          const id = v.id ?? v.value;
          if (id == null) return null;
          return { text: String(v.name ?? v.label ?? id) };
        }
        return { text: String(v) };
      }).filter(Boolean);
      row.kind = row.tags.length ? 'multi' : 'text';
      if (!row.tags.length) row.text = raw || '-';
      break;
    case 10: { // 链接：仅 http/https，避免 javascript: 之类伪协议
      const pattern = typeof ext.urlPattern === 'string' && ext.urlPattern.includes('{value}')
        ? ext.urlPattern.replace(/\{value\}/g, encodeURIComponent(raw))
        : raw;
      row.kind = 'link';
      row.text = /^https?:\/\//i.test(pattern) ? pattern : (raw || '-');
      break;
    }
    case 11: { // 地理位置
      row.geo = raw ? parseGeo(raw, ext) : null;
      row.kind = row.geo ? 'geo' : 'text';
      row.text = row.geo ? row.geo.text : (raw || '-');
      break;
    }
    default:
      row.text = legacyText(item);
  }
  return row;
};


/** 8 附件：下载后由系统应用打开（微信小程序无通用文件预览，失败给出提示） */
const openFile = (file) => {
  uni.showLoading({title: '正在打开...', mask: true});
  uni.downloadFile({
    url: file.url,
    success: (res) => {
      if (res.statusCode !== 200) {
        uni.hideLoading();
        uni.showToast({title: '文件打开失败', icon: 'none'});
        return;
      }
      uni.openDocument({
        filePath: res.tempFilePath,
        showMenu: true,
        complete: () => uni.hideLoading()
      });
    },
    fail: () => {
      uni.hideLoading();
      uni.showToast({title: '文件打开失败', icon: 'none'});
    }
  });
};

/** 10 链接：小程序不能直接打开外部 URL，改为复制（最接近 PC 可点链接的能力） */
const copyLink = (url) => {
  uni.setClipboardData({
    data: url,
    success: () => uni.showToast({title: '链接已复制', icon: 'none'})
  });
};

/** 11 地理位置：调微信原生地图，无需地图 AK */
const openGeo = (geo) => {
  if (!geo) return;
  uni.openLocation({
    latitude: Number(geo.lat),
    longitude: Number(geo.lng),
    name: geo.address || '作业位置',
    fail: () => uni.showToast({title: '地图打开失败', icon: 'none'})
  });
};
  // const workRecordIndex = ref(0)
// 页面加载
onLoad((options) => {
  const {planNo, commitId, batchNo } = options;
  if (planNo || batchNo) {
    getOrderDetail(planNo, commitId, batchNo);
  } else {
    loading.value = false;
    uni.showToast({title: '缺少工单ID', icon: 'none'});
  }
});

</script>

<style scoped lang="scss">
// 页面底色（设计稿 #F4F6FA）
.page-container {
  min-height: 100vh;
  background-color: #F4F6FA;
  box-sizing: border-box;
}

// 内容容器：卡片自带圆角与外边距，容器不再铺白底（设计稿页面底 #F4F6FA）
.content-wrap {
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  padding-top: 24rpx;
  margin-bottom: 8rpx;
}

// 白色卡片：8px 圆角 + 卡片阴影（设计稿 .card）
.form-card {
  margin: 0 24rpx 24rpx;
  padding: 8rpx 24rpx 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
}
.form-card .u-body-item {
  margin-bottom: 12rpx;
}
.field-row:last-child {
  margin-bottom: 0;
}
.field-value {
  flex: 1;
  min-width: 0;
}

// 计划名称标题卡：白底 / 8px 圆角 / 卡片阴影 / 32rpx 500（设计稿顶部卡）
.record-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  gap: 8rpx;
  margin: 0 24rpx 24rpx;
  padding: 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
}

// 标题卡副标题：第X次 + 上报状态
.record-sub {
  font-size: 26rpx;
  color: #6B7280;
  line-height: 1.4;
}

.record-title {
  flex: 1;
  min-width: 0;
  font-size: 32rpx;
  font-weight: 500;
  color: #1F2937;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 区块标题：4rpx 蓝色竖条 + 30rpx 标题（设计稿 .card 标题）
.sec-head {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx 0 8rpx;
}

.sec-bar {
  flex-shrink: 0;
  width: 6rpx;
  height: 28rpx;
  background-color: #2563EB;
  border-radius: 3rpx;
}

.sec-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #1F2937;
  line-height: 1.4;
}

/* 区块标题右侧：多条上报时标注第几条 + 上报时间 */
.sec-count {
  margin-left: auto;
  font-size: 24rpx;
  color: #6B7280;
  white-space: nowrap;
}

/* 某条子上报没填字段时的占位文案 */
.no-field-tip {
  font-size: 26rpx;
  color: #6B7280;
  padding: 8rpx 0;
}

// 图片容器样式
.cell-content-wrap {
  //padding: 10rpx 0;
}

//// 自定义相册容器
//.album-container {
//  display: flex;
//  flex-wrap: wrap;
//  gap: 10rpx; // 图片间距
//}
//
//// 单张图片样式
//.album-item {
//  width: 70px;
//  height: 70px;
//  border-radius: 4rpx;
//  overflow: hidden;
//}
//
//// 图片样式（强制尺寸 + 覆盖）
//.album-image {
//  width: 70px;
//  height: 70px;
//  object-fit: cover; // 保持比例裁剪，避免拉伸
//}

// 空文本样式
.empty-text {
  color: #909399;
  font-size: 14px;
  line-height: 70px; // 和图片高度对齐
}

// ===== 动态配置字段（填报明细） =====
// 多值（多选/关联记录）标签平铺
.field-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8rpx;
}

// 自绘标签：仓库未使用过 up-tag，避免引入未验证组件
.field-tag {
  padding: 0 16rpx;
  background: #F4F6FA;
  border-radius: 8rpx;
  color: #1F2937;
  font-size: 22rpx;
  line-height: 40rpx;
}

// 附件（可点击打开）
.field-file {
  color: #2563EB;
  font-size: 26rpx;
  margin-left: 16rpx;
  text-decoration: underline;
}

// 链接 / 地理位置（可点击）
.field-link {
  color: #2563EB;
  font-size: 26rpx;
  word-break: break-all;
}

// 文本直出（数值/文本/枚举/日期/布尔）
.field-text {
  font-size: 26rpx;
  word-break: break-all;
}
:deep(.field-cell-title-multi) {
  min-width: 160rpx; // 固定左侧标题最大宽度，文字会在这个宽度内自动换行
}

// 无填报记录提示：与上方信息卡同宽同圆角
.no-record-tip {
  margin: 0 24rpx 24rpx;
  padding: 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  font-size: 26rpx;
  color: #6B7280;
  box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
}


</style>