aiot-app/pages/pda/work_order_handover/detail/detail.vue

<template>
  <view class="page-container">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="pageTitle"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <scroll-view scroll-y class="scroll-area">
      <!-- 工单信息 -->
      <view class="section-card">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">工单信息</text>
        </view>
        <view class="info-table">
          <view class="table-row">
            <view class="table-cell">
              <text class="cell-label">工单编码</text>
              <text class="cell-value">{{
                workOrderInfo.workOrderCode || "-"
              }}</text>
            </view>
            <view class="table-cell">
              <text class="cell-label">产品编码</text>
              <text class="cell-value">{{
                workOrderInfo.categoryCode || "-"
              }}</text>
            </view>
          </view>
          <view class="table-row">
            <view class="table-cell">
              <text class="cell-label">产品名称</text>
              <text class="cell-value">{{
                workOrderInfo.categoryName || "-"
              }}</text>
            </view>
            <view class="table-cell">
              <text class="cell-label">批次号</text>
              <text class="cell-value">{{ workOrderInfo.batchNo || "-" }}</text>
            </view>
          </view>
          <view class="table-row">
            <view class="table-cell">
              <text class="cell-label">要求生产数量</text>
              <text class="cell-value"
                >{{ workOrderInfo.formingNum || 0
                }}{{ workOrderInfo.unit || "" }}</text
              >
            </view>
            <view class="table-cell">
              <text class="cell-label">要求生产重量</text>
              <text class="cell-value"
                >{{ workOrderInfo.formingWeight || 0
                }}{{ workOrderInfo.weightUnit || "" }}</text
              >
            </view>
          </view>
          <view class="table-row">
            <view class="table-cell">
              <text class="cell-label">已生产数量</text>
              <text class="cell-value"
                >{{ workOrderInfo.formedNum || 0
                }}{{ workOrderInfo.unit || "" }}</text
              >
            </view>
            <view class="table-cell">
              <text class="cell-label">已生产重量</text>
              <text class="cell-value"
                >{{ workOrderInfo.formedWeight || 0
                }}{{ workOrderInfo.weightUnit || "" }}</text
              >
            </view>
          </view>
          <view class="table-row">
            <view class="table-cell table-cell--full">
              <text class="cell-label">当前工序</text>
              <text class="cell-value">{{ currentTaskName }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 交接信息 -->
      <view class="section-card">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">交接信息</text>
        </view>
        <view class="form-area">
          <!-- 交接类型 -->
          <view class="form-item">
            <view class="form-label required">交接类型</view>
            <view class="form-content">
              <view v-if="formLocked" class="form-text">{{
                getTypeName(workOrderInfo.type)
              }}</view>
              <view v-else class="type-selector">
                <view
                  v-for="opt in typeOptions"
                  :key="opt.value"
                  class="type-tag"
                  :class="{
                    'type-tag--active': workOrderInfo.type === opt.value,
                  }"
                  @click="workOrderInfo.type = opt.value"
                >
                  {{ opt.label }}
                </view>
              </view>
            </view>
          </view>

          <!-- 交接时间 -->
          <view class="form-item">
            <view class="form-label required">交接时间</view>
            <view class="form-content">
              <view v-if="formLocked" class="form-text">{{
                workOrderInfo.initiateTime || "-"
              }}</view>
              <picker
                v-else
                mode="date"
                :value="dateValue"
                @change="onDateChange"
              >
                <view class="form-picker">
                  <text
                    :class="
                      workOrderInfo.initiateTime
                        ? 'picker-text'
                        : 'picker-placeholder'
                    "
                  >
                    {{ workOrderInfo.initiateTime || "请选择交接时间" }}
                  </text>
                  <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
              </picker>
            </view>
          </view>

          <!-- 交接单编码 -->
          <view class="form-item">
            <view class="form-label">交接单编码</view>
            <view class="form-content">
              <view class="form-text text-grey">{{
                handoverCodeDisplay || "系统自动生成"
              }}</view>
            </view>
          </view>

          <!-- 交接班组（类型=1时显示） -->
          <view class="form-item" v-if="workOrderInfo.type == 1">
            <view class="form-label required">交接班组</view>
            <view class="form-content">
              <view v-if="formLocked" class="form-text">{{
                workOrderInfo.acceptTeamName || "-"
              }}</view>
              <picker
                v-else
                :range="teamList"
                range-key="name"
                :value="teamIndex"
                @change="onTeamChange"
              >
                <view class="form-picker">
                  <text
                    :class="
                      workOrderInfo.acceptTeamName
                        ? 'picker-text'
                        : 'picker-placeholder'
                    "
                  >
                    {{ workOrderInfo.acceptTeamName || "请选择交接班组" }}
                  </text>
                  <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
              </picker>
            </view>
          </view>

          <!-- 交接人（类型=1时显示） -->
          <view class="form-item" v-if="workOrderInfo.type == 1">
            <view class="form-label required">交接人</view>
            <view class="form-content">
              <view v-if="formLocked" class="form-text">{{
                workOrderInfo.acceptName || "-"
              }}</view>
              <picker
                v-else
                :range="personList"
                range-key="name"
                :value="personIndex"
                @change="onPersonChange"
              >
                <view class="form-picker">
                  <text
                    :class="
                      workOrderInfo.acceptName
                        ? 'picker-text'
                        : 'picker-placeholder'
                    "
                  >
                    {{ workOrderInfo.acceptName || "请选择交接人" }}
                  </text>
                  <uni-icons type="right" size="16" color="#999"></uni-icons>
                </view>
              </picker>
            </view>
          </view>

          <!-- 交接数量 -->
          <view class="form-item">
            <view class="form-label required">交接数量</view>
            <view class="form-content">
              <view v-if="formLocked" class="form-text"
                >{{ workOrderInfo.handoverQuantity || "-" }} PCS</view
              >
              <view v-else class="form-input-box">
                <input
                  class="form-input"
                  type="digit"
                  v-model="workOrderInfo.handoverQuantity"
                  placeholder="请输入"
                  @input="onQuantityInput"
                />
                <text class="form-unit">PCS</text>
              </view>
            </view>
          </view>

          <!-- 交接重量 -->
          <view class="form-item">
            <view class="form-label required">交接重量</view>
            <view class="form-content">
              <view v-if="formLocked" class="form-text"
                >{{ workOrderInfo.handoverWeight || "-" }} KG</view
              >
              <view v-else class="form-input-box">
                <input
                  class="form-input"
                  type="digit"
                  v-model="workOrderInfo.handoverWeight"
                  placeholder="请输入"
                  @input="onWeightInput"
                />
                <text class="form-unit">KG</text>
              </view>
            </view>
          </view>

          <!-- 交接注意事项 -->
          <view class="form-item form-item--vertical">
            <view class="form-label">交接注意事项</view>
            <view class="form-content">
              <view v-if="formLocked" class="form-text">{{
                workOrderInfo.remark || "-"
              }}</view>
              <textarea
                v-else
                class="form-textarea"
                v-model="workOrderInfo.remark"
                placeholder="请输入交接注意事项"
                :maxlength="500"
                auto-height
              ></textarea>
            </view>
          </view>
        </view>
      </view>

      <!-- 物料清单 -->
      <view class="section-card">
        <view class="section-title">
          <view class="title-bar"></view>
          <text class="title-text">物料清单</text>
          <view class="title-actions" v-if="!formLocked">
            <view class="title-btn" @click="addMaterial">+ 添加物料</view>
          </view>
        </view>
        <view v-if="detailList.length === 0" class="material-empty">
          <text class="material-empty-text">暂无物料</text>
        </view>
        <view
          v-for="(item, index) in detailList"
          :key="index"
          class="material-card"
        >
          <view class="material-header">
            <text class="material-index">{{ index + 1 }}</text>
            <text class="material-name">{{ item.categoryName || "-" }}</text>
            <view
              v-if="!formLocked"
              class="material-del"
              @click="removeMaterial(index)"
            >
              <uni-icons type="close" size="16" color="#F5222D"></uni-icons>
            </view>
          </view>
          <view class="material-body">
            <view class="material-row">
              <view class="material-info">
                <text class="m-label">编码</text>
                <text class="m-value">{{ item.categoryCode || "-" }}</text>
              </view>
              <view class="material-info">
                <text class="m-label">分类</text>
                <text class="m-value">{{ item.categoryLevelPath || "-" }}</text>
              </view>
            </view>
            <view class="material-row">
              <view class="material-info">
                <text class="m-label">牌号</text>
                <text class="m-value">{{ item.brandNum || "-" }}</text>
              </view>
              <view class="material-info">
                <text class="m-label">型号</text>
                <text class="m-value">{{ item.modelType || "-" }}</text>
              </view>
            </view>
            <view class="material-row">
              <view class="material-info">
                <text class="m-label">规格</text>
                <text class="m-value">{{ item.specification || "-" }}</text>
              </view>
              <view class="material-info">
                <text class="m-label">计量单位</text>
                <text class="m-value">{{ item.measureUnit || "-" }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 接收信息（待接收状态 mode=accept 时显示） -->
      <view class="section-card" v-if="showReceiveBlock">
        <view class="section-title">
          <view class="title-bar title-bar--blue"></view>
          <text class="title-text">接收信息</text>
        </view>
        <view class="form-area">
          <view class="form-item form-item--vertical">
            <view class="form-label required">接收建议</view>
            <view class="form-content">
              <textarea
                class="form-textarea"
                v-model="workOrderInfo.acceptRemark"
                placeholder="请输入接收建议"
                :maxlength="500"
                auto-height
              ></textarea>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部占位 -->
      <view style="height: 200rpx"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer-bar" v-if="showFooter">
      <!-- 编辑模式：提交 + 保存 -->
      <view
        v-if="mode === 'edit'"
        class="footer-bar__btn footer-bar__btn--outline"
        @click="submitHandover(0)"
        >保存</view
      >
      <view
        v-if="mode === 'edit'"
        class="footer-bar__btn footer-bar__btn--primary"
        @click="submitHandover(1)"
        >提交</view
      >
      <!-- 接收模式：驳回 + 同意 -->
      <view
        v-if="mode === 'accept'"
        class="footer-bar__btn footer-bar__btn--danger"
        @click="handleDecision(3)"
        >驳回</view
      >
      <view
        v-if="mode === 'accept'"
        class="footer-bar__btn footer-bar__btn--primary"
        @click="handleDecision(2)"
        >同意</view
      >
    </view>
  </view>
</template>

<script>
import {
  getHandoverById,
  updateHandover,
  acceptOrRejectHandover,
  getTeamPage,
} from "@/api/pda/workOrderHandover.js";

const TYPE_MAP = {
  1: "物品移交",
  2: "班次交接",
};

export default {
  data() {
    return {
      id: "",
      status: 0,
      mode: "detail", // detail / edit / accept
      loading: false,
      submitLoading: false,
      workOrderInfo: {
        type: 1,
        initiateTime: "",
        handoverCode: "",
        workOrderCode: "",
        categoryCode: "",
        categoryName: "",
        batchNo: "",
        unit: "",
        weightUnit: "",
        formingNum: "",
        formingWeight: "",
        formedNum: 0,
        formedWeight: 0,
        currentTaskDiagram: {},
        initiateTaskName: "",
        acceptTeamId: "",
        acceptTeamName: "",
        acceptId: "",
        acceptName: "",
        handoverQuantity: "",
        handoverWeight: "",
        remark: "",
        acceptRemark: "",
        detailList: [],
      },
      teamList: [],
      personList: [],
      typeOptions: [
        { label: "物品移交", value: 1 },
        { label: "班次交接", value: 2 },
      ],
    };
  },

  computed: {
    pageTitle() {
      if (this.mode === "detail") return "交接单详情";
      if (this.mode === "accept") return "接收交接单";
      return "编辑交接单";
    },
    formLocked() {
      if (this.mode === "detail") return true;
      if (this.mode === "accept") return true;
      return false;
    },
    showReceiveBlock() {
      return this.mode === "accept";
    },
    showFooter() {
      return this.mode === "edit" || this.mode === "accept";
    },
    currentTaskName() {
      const task = this.workOrderInfo.currentTaskDiagram || {};
      return task.taskTypeName || this.workOrderInfo.initiateTaskName || "-";
    },
    handoverCodeDisplay() {
      const w = this.workOrderInfo || {};
      return w.handoverCode || w.code || "";
    },
    detailList() {
      return Array.isArray(this.workOrderInfo.detailList)
        ? this.workOrderInfo.detailList
        : [];
    },
    dateValue() {
      if (!this.workOrderInfo.initiateTime) return "";
      return this.workOrderInfo.initiateTime.substring(0, 10);
    },
    teamIndex() {
      if (!this.workOrderInfo.acceptTeamId || !this.teamList.length) return -1;
      return this.teamList.findIndex(
        (t) => String(t.id) === String(this.workOrderInfo.acceptTeamId),
      );
    },
    personIndex() {
      if (!this.workOrderInfo.acceptId || !this.personList.length) return -1;
      return this.personList.findIndex(
        (p) => String(p.id) === String(this.workOrderInfo.acceptId),
      );
    },
  },

  onLoad(options) {
    this.id = options.id || "";
    this.status = Number(options.status) || 0;
    this.mode = options.mode || "detail";
    this.init();
  },

  methods: {
    back() {
      uni.navigateBack();
    },

    getTypeName(type) {
      return TYPE_MAP[type] || "-";
    },

    formatDateTimeNow() {
      const d = new Date();
      const p = (n) => String(n).padStart(2, "0");
      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(
        d.getHours(),
      )}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
    },

    async init() {
      uni.showLoading({ title: "加载中..." });
      try {
        await this.loadTeamList();
        if (this.id) {
          const res = await getHandoverById(this.id);
          this.workOrderInfo = this.normalizeDetail(res);
          if (this.workOrderInfo.acceptTeamId) {
            this.syncTeamUsers(
              this.workOrderInfo.acceptTeamId,
              this.workOrderInfo.acceptId,
            );
          }
        } else {
          this.workOrderInfo.initiateTime = this.formatDateTimeNow();
          if (this.teamList.length) {
            this.workOrderInfo.acceptTeamId = this.teamList[0].id;
            this.syncTeamUsers(this.teamList[0].id);
          }
        }
      } catch (e) {
        uni.showToast({
          title: (e && e.message) || "加载失败",
          icon: "none",
        });
      } finally {
        uni.hideLoading();
      }
    },

    normalizeDetail(raw) {
      if (!raw || typeof raw !== "object") return this.workOrderInfo;
      const detailList = Array.isArray(raw.detailList) ? raw.detailList : [];
      return {
        ...raw,
        detailList,
        categoryCode: raw.categoryCode || raw.productCode || "",
        categoryName: raw.categoryName || raw.productName || "",
        workOrderCode: raw.workOrderCode || raw.workOrderNum || "",
        handoverCode: raw.handoverCode || raw.passonCode || raw.code || "",
        acceptRemark: raw.acceptRemark || "",
        currentTaskDiagram: raw.currentTaskDiagram || {},
      };
    },

    async loadTeamList() {
      try {
        const userInfo = uni.getStorageSync("userInfo") || {};
        const res = await getTeamPage({
          pageNum: 1,
          size: -1,
          factoryId: userInfo.factoryId || "",
        });
        this.teamList = Array.isArray(res.list) ? res.list : [];
      } catch (e) {
        this.teamList = [];
      }
    },

    syncTeamUsers(teamId, preferredAcceptId) {
      const team =
        this.teamList.find((t) => String(t.id) === String(teamId)) || {};
      this.workOrderInfo.acceptTeamName = team.name || "";
      const users = Array.isArray(team.userVOList) ? team.userVOList : [];
      this.personList = users.map((u) => ({ id: u.id, name: u.name }));

      if (!this.personList.length) {
        this.workOrderInfo.acceptId = "";
        this.workOrderInfo.acceptName = "";
        return;
      }

      if (
        preferredAcceptId &&
        this.personList.some((u) => String(u.id) === String(preferredAcceptId))
      ) {
        const pick = this.personList.find(
          (u) => String(u.id) === String(preferredAcceptId),
        );
        this.workOrderInfo.acceptId = pick.id;
        this.workOrderInfo.acceptName = pick.name || "";
        return;
      }

      const leader =
        this.personList.find(
          (u) => String(u.id) === String(team.leaderUserId),
        ) || this.personList[0];
      this.workOrderInfo.acceptId = leader.id;
      this.workOrderInfo.acceptName = leader.name || "";
    },

    onDateChange(e) {
      const date = e.detail.value;
      const now = new Date();
      const p = (n) => String(n).padStart(2, "0");
      this.workOrderInfo.initiateTime = `${date} ${p(now.getHours())}:${p(
        now.getMinutes(),
      )}:${p(now.getSeconds())}`;
    },

    onTeamChange(e) {
      const idx = Number(e.detail.value);
      const team = this.teamList[idx];
      if (team) {
        this.workOrderInfo.acceptTeamId = team.id;
        this.syncTeamUsers(team.id);
      }
    },

    onPersonChange(e) {
      const idx = Number(e.detail.value);
      const person = this.personList[idx];
      if (person) {
        this.workOrderInfo.acceptId = person.id;
        this.workOrderInfo.acceptName = person.name || "";
      }
    },

    onQuantityInput(e) {
      this.workOrderInfo.handoverQuantity = this.sanitizeNumber(e.detail.value);
    },

    onWeightInput(e) {
      this.workOrderInfo.handoverWeight = this.sanitizeNumber(e.detail.value);
    },

    sanitizeNumber(val) {
      let v = String(val == null ? "" : val).replace(/[^\d.]/g, "");
      if (v.startsWith(".")) v = "";
      const firstDot = v.indexOf(".");
      if (firstDot !== -1) {
        v = v.slice(0, firstDot + 1) + v.slice(firstDot + 1).replace(/\./g, "");
      }
      const match = v.match(/^(\d+)(\.\d{0,4})?/);
      return match ? match[0] : "";
    },

    validateForm() {
      const w = this.workOrderInfo;
      if (!w.type) {
        uni.showToast({ title: "请选择交接类型", icon: "none" });
        return false;
      }
      if (!w.initiateTime) {
        uni.showToast({ title: "请选择交接时间", icon: "none" });
        return false;
      }
      if (w.type == 1) {
        if (!w.acceptTeamId) {
          uni.showToast({ title: "请选择交接班组", icon: "none" });
          return false;
        }
        if (!w.acceptId) {
          uni.showToast({ title: "请选择交接人", icon: "none" });
          return false;
        }
      }
      if (!w.handoverQuantity) {
        uni.showToast({ title: "请输入交接数量", icon: "none" });
        return false;
      }
      if (!w.handoverWeight) {
        uni.showToast({ title: "请输入交接重量", icon: "none" });
        return false;
      }
      return true;
    },

    async submitHandover(isRelease) {
      if (this.submitLoading) return;
      if (!this.validateForm()) return;

      const detailList = this.detailList.map((row) => {
        const { id, ...rest } = row;
        return rest;
      });
      const param = {
        ...this.workOrderInfo,
        detailList,
        isRelease,
      };

      this.submitLoading = true;
      try {
        await updateHandover(param);
        uni.showToast({
          title: isRelease === 1 ? "提交成功" : "保存成功",
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (e) {
        uni.showToast({
          title: (e && e.message) || "操作失败",
          icon: "none",
        });
      } finally {
        this.submitLoading = false;
      }
    },

    async handleDecision(status) {
      const advice = (this.workOrderInfo.acceptRemark || "").trim();
      if (!advice) {
        uni.showToast({ title: "请填写接收建议", icon: "none" });
        return;
      }
      if (!this.workOrderInfo.id) {
        uni.showToast({ title: "缺少交接单信息", icon: "none" });
        return;
      }

      this.submitLoading = true;
      try {
        await acceptOrRejectHandover({
          id: this.workOrderInfo.id,
          status,
          acceptRemark: advice,
        });
        uni.showToast({
          title: status === 2 ? "接收成功" : "已驳回",
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (e) {
        uni.showToast({
          title: (e && e.message) || "操作失败",
          icon: "none",
        });
      } finally {
        this.submitLoading = false;
      }
    },

    addMaterial() {
      // 跳转到物料选择页面
      const storageKey = Date.now() + "";
      const existList = this.detailList || [];
      uni.setStorageSync(storageKey, existList);
      uni.navigateTo({
        url: `/pages/pda/workOrder/search/newIndex?id=&storageKey=${storageKey}&isType=pick`,
      });
    },

    removeMaterial(index) {
      uni.showModal({
        title: "提示",
        content: "确定删除此物料？",
        success: (res) => {
          if (res.confirm) {
            this.workOrderInfo.detailList.splice(index, 1);
          }
        },
      });
    },
  },

  onShow() {
    // 监听物料选择回调
    uni.$off("setSelectList");
    uni.$on("setSelectList", (selectList) => {
      if (Array.isArray(selectList)) {
        selectList.forEach((item) => {
          item.categoryCode = item.categoryCode || item.code || "";
          item.categoryName = item.categoryName || item.name || "";
          item.modelType = item.categoryModel || item.model || "";
        });
        this.workOrderInfo.detailList = selectList;
      }
    });
  },

  beforeDestroy() {
    uni.$off("setSelectList");
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f6f7;
  overflow: hidden;
}

.scroll-area {
  flex: 1;
  height: 100%;
}

/* 区块卡片 */
.section-card {
  margin: 20rpx 24rpx 0;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.title-bar {
  width: 6rpx;
  height: 28rpx;
  background: #157a2c;
  border-radius: 3rpx;
  margin-right: 12rpx;

  &--blue {
    background: #1890ff;
  }
}

.title-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.title-actions {
  flex-shrink: 0;
}

.title-btn {
  font-size: 24rpx;
  color: #157a2c;
  padding: 8rpx 20rpx;
  border: 1rpx solid #157a2c;
  border-radius: 24rpx;

  &:active {
    opacity: 0.7;
  }
}

/* 信息表格 */
.info-table {
  border: 1rpx solid #e8e8e8;
  border-radius: 8rpx;
  overflow: hidden;
}

.table-row {
  display: flex;
  border-bottom: 1rpx solid #e8e8e8;

  &:last-child {
    border-bottom: none;
  }
}

.table-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1rpx solid #e8e8e8;

  &:last-child {
    border-right: none;
  }

  &--full {
    flex: none;
    width: 100%;
  }
}

.cell-label {
  font-size: 22rpx;
  color: #999;
  background: #fafafa;
  padding: 12rpx 16rpx 4rpx;
  line-height: 1.4;
}

.cell-value {
  font-size: 26rpx;
  color: #333;
  padding: 4rpx 16rpx 12rpx;
  line-height: 1.5;
  word-break: break-all;
}

/* 表单 */
.form-area {
  padding: 0;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  &--vertical {
    flex-direction: column;
    align-items: flex-start;

    .form-content {
      width: 100%;
      margin-top: 12rpx;
    }
  }
}

.form-label {
  width: 180rpx;
  flex-shrink: 0;
  font-size: 26rpx;
  color: #666;

  &.required::before {
    content: "*";
    color: #f5222d;
    margin-right: 4rpx;
  }
}

.form-content {
  flex: 1;
  min-width: 0;
}

.form-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  word-break: break-all;

  &.text-grey {
    color: #999;
  }
}

.form-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60rpx;
}

.picker-text {
  font-size: 26rpx;
  color: #333;
}

.picker-placeholder {
  font-size: 26rpx;
  color: #c0c0c0;
}

.form-input-box {
  display: flex;
  align-items: center;
  border: 1rpx solid #e8e8e8;
  border-radius: 8rpx;
  overflow: hidden;
}

.form-input {
  flex: 1;
  height: 72rpx;
  padding: 0 16rpx;
  font-size: 26rpx;
  color: #333;
}

.form-unit {
  padding: 0 20rpx;
  font-size: 24rpx;
  color: #999;
  background: #fafafa;
  height: 72rpx;
  line-height: 72rpx;
  border-left: 1rpx solid #e8e8e8;
}

.form-textarea {
  width: 100%;
  min-height: 160rpx;
  padding: 16rpx;
  font-size: 26rpx;
  color: #333;
  border: 1rpx solid #e8e8e8;
  border-radius: 8rpx;
  box-sizing: border-box;
}

/* 类型选择 */
.type-selector {
  display: flex;
  gap: 16rpx;
}

.type-tag {
  padding: 12rpx 32rpx;
  border-radius: 32rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f6f7;

  &--active {
    color: #fff;
    background: #157a2c;
  }

  &:active {
    opacity: 0.85;
  }
}

/* 物料卡片 */
.material-empty {
  padding: 40rpx 0;
  text-align: center;
}

.material-empty-text {
  font-size: 26rpx;
  color: #999;
}

.material-card {
  border: 1rpx solid #e8e8e8;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  overflow: hidden;

  &:last-child {
    margin-bottom: 0;
  }
}

.material-header {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
  background: #fafafa;
  border-bottom: 1rpx solid #e8e8e8;
}

.material-index {
  width: 36rpx;
  height: 36rpx;
  line-height: 36rpx;
  text-align: center;
  border-radius: 50%;
  background: #157a2c;
  color: #fff;
  font-size: 20rpx;
  flex-shrink: 0;
  margin-right: 12rpx;
}

.material-name {
  flex: 1;
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-del {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  &:active {
    opacity: 0.7;
  }
}

.material-body {
  padding: 12rpx 20rpx;
}

.material-row {
  display: flex;
  margin-bottom: 4rpx;
}

.material-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8rpx 0;
  min-width: 0;
}

.m-label {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 2rpx;
}

.m-value {
  font-size: 24rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 底部操作栏 */
.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  padding: 20rpx 32rpx;
  background: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.footer-bar__btn {
  flex: 1;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30rpx;
  font-weight: 500;
  border-radius: 44rpx;
  position: static;
  width: auto;
  line-height: normal;
}

.footer-bar__btn--primary {
  background: #157a2c;
  color: #fff;
}

.footer-bar__btn--primary:active {
  opacity: 0.85;
}

.footer-bar__btn--outline {
  background: #fff;
  color: #157a2c;
  border: 2rpx solid #157a2c;
}

.footer-bar__btn--outline:active {
  opacity: 0.85;
}

.footer-bar__btn--danger {
  background: #fff;
  color: #f5222d;
  border: 2rpx solid #f5222d;
}

.footer-bar__btn--danger:active {
  opacity: 0.85;
}
</style>