<template>
  <div class="app-container acting-pro-page">
    <!-- 上部分：特殊查询区 -->
    <el-card class="section-card section-top" shadow="never">
      <!-- 第一行：屠宰日期、选择屠宰来源、供应商、代宰户 -->
      <el-form
        ref="queryForm"
        :model="queryParams"
        :rules="queryRules"
        size="small"
        label-width="110px"
        class="query-row"
      >
        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="屠宰日期" prop="slaughterAgencyDate">
              <el-date-picker
                v-model="queryParams.slaughterAgencyDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择屠宰日期"
                clearable
                style="width: 100%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择屠宰来源" prop="documentNumber">
              <div class="slaughter-source-row">
                <el-input
                  :value="queryParams.documentNumber"
                  placeholder="点击右侧查询选择"
                  readonly
                  style="flex: 1; min-width: 0;"
                />
                <el-tooltip content="查询代宰来源" placement="top">
                  <el-button type="primary" icon="el-icon-search" circle size="mini" class="source-query-btn" @click="openActingSourceDialog" />
                </el-tooltip>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商" prop="supplierNumber">
              <el-select
                v-model="queryParams.supplierNumber"
                placeholder="请选择供应商"
                clearable
                filterable
                disabled
                style="width: 100%;"
                @change="handleSupplierChange"
              >
                <el-option
                  v-for="item in supplierList"
                  :key="item.supplierNo"
                  :label="item.supplierName"
                  :value="item.supplierNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="代宰户" prop="customerNumber">
              <el-select
                v-model="queryParams.customerNumber"
                placeholder="请选择代宰户"
                clearable
                filterable
                disabled
                style="width: 100%;"
                @change="handleActingCustomerChange"
              >
                <el-option
                  v-for="item in actingCustomerList"
                  :key="item.purchaserNo"
                  :label="item.purchaserName"
                  :value="item.purchaserNo"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
         <!-- 左中右三栏 -->
      <div class="three-cols">
        <!-- 左：红色表单，分成 2 行，每行 2 列，输入框变大 -->
        <div class="col-left">
          <div class="left-form-grid">
            <div class="left-item">
              <div class="left-label highlight-text">白条编号</div>
              <el-form-item label-width="0" prop="whiteStripNumber">
                <el-input v-model="queryParams.whiteStripNumber" placeholder="白条编号" class="highlight-input highlight-input-lg" />
              </el-form-item>
              
            </div>
            <div class="left-item">
              <div class="left-label highlight-text">重量(kg)</div>
              <el-form-item label-width="0" prop="dzcWeight">
                <decimal-input v-model="queryParams.dzcWeight" :precision="2" :min="0" placeholder="重量" class="highlight-input highlight-input-lg" />
              </el-form-item>
            </div>
            <div class="left-item">
              <div class="left-label highlight-text">扣重%</div>
              <el-form-item label-width="0" prop="deductionRatio">
                <decimal-input v-model="queryParams.deductionRatio" :precision="2" :min="0" placeholder="扣重%" class="highlight-input highlight-input-lg" />
              </el-form-item>
            </div>
            <div class="left-item left-item-level">
              <div class="left-label highlight-text">级别</div>
              <div class="level-inputs-row">
                <el-form-item label-width="0" prop="grade"> 
                  <el-select size="large" style="width: 100%" v-model="queryParams.grade">
                    <el-option v-for="item in levelDetailList" :key="item.levelNo" :label="item.levelName" :value="item.levelNo"></el-option>
                  </el-select>
                </el-form-item>
               
              </div>
            </div>
          </div>
        </div>

        <!-- 中：级别列表（从级别接口获取），2列，点击回填左侧红色数据并高亮 -->
        <div class="col-middle">
          <div class="level-detail-grid" ref="levelGrid">
            <div
              v-for="(item, index) in levelDetailList"
              :key="item.levelNo || index"
              class="level-detail-item"
              :class="{ active: selectedLevelIndex === index }"
              @click="handleSelectLevel(item, index)"
            >
              {{ item.levelName || item.levelNo }}
            </div>
          </div>
        </div>

        <!-- 右：选择完后显示计划/已代宰/剩余数量，保存、导出（平行、变大） -->
        <div class="col-right">
          <template v-if="selectedActingSourceRow">
            <div class="slaughter-stats">
              <span>计划代宰数量：<span class="stat-num">{{ planSlaughterQty }}</span>头</span>
              <span>已代宰数量：<span class="stat-num">{{ actedSlaughterQty }}</span>头</span>
              <span>剩余代宰数量：<span class="stat-num">{{ remainingSlaughterQty }}</span>头</span>
            </div>
          </template>
          <div class="col-right-btns">
            <el-button type="primary" class="btn-lg" @click="handleSave">保存</el-button>
            <el-button class="btn-lg" @click="handleExport">导出</el-button>
          </div>
        </div>
      </div>
      </el-form>

     
    </el-card>

    <!-- 下部分：表格 -->
    <el-card class="section-card section-bottom" shadow="never">
      <el-table
        ref="measureTable"
        class="measure-table"
        border
        stripe
        highlight-current-row
        :data="measureList"
        style="width: 100%;"
        @row-click="handleMeasureRowClick"
      >
        <el-table-column label="白条编号" prop="whiteStripNumber" min-width="140" />
        <el-table-column label="代宰日期" prop="slaughterAgencyDate" min-width="120" />
        <el-table-column label="代宰单据编号" prop="documentNumber" min-width="150" />
        <el-table-column label="产品" prop="product" min-width="120" />
        <el-table-column label="级别" prop="grade" min-width="100">
          <template slot-scope="scope">
            <span>{{ getLevelLabel(scope.row.grade) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电子秤重量" prop="dzcWeight" min-width="110" />
        <el-table-column label="钩重" prop="hookWeight" min-width="90" />
        <el-table-column label="扣重%" prop="deductionRatio" min-width="90" />
        <el-table-column label="净重" prop="jingZhong" min-width="100" />
        <el-table-column label="供应商名称" prop="supplierName" min-width="140" />
        <el-table-column label="客户名称" prop="customerName" min-width="140" />
        <el-table-column label="计量时间" prop="createTime" min-width="170" />
      </el-table>
    </el-card>

    <!-- 代宰来源查询弹框：单选表格，字段同代宰管理登记新增 -->
    <el-dialog title="选择代宰来源" :visible.sync="actingSourceDialogVisible" width="1200px" append-to-body>
      <el-table
        ref="actingSourceTable"
        border
        stripe
        :data="actingSourceList"
        height="400"
        highlight-current-row
        @current-change="handleActingSourceCurrentChange"
      >
         <el-table-column label="单据编号" align="center" prop="documentNumber" min-width="140" />

        <el-table-column label="代宰日期" align="center" prop="slaughterAgencyDate" min-width="120" />

        <el-table-column label="供应商名称" align="center" prop="supplierName" min-width="140" />

        <el-table-column label="客户名称" align="center" prop="customerName" min-width="140" />

        <el-table-column label="计划代宰数" align="center" prop="plannedSlaughterQuantity" min-width="110" />

        <el-table-column label="已代宰数量" align="center" prop="actualSlaughterQuantity" min-width="110" />

        <el-table-column label="单价" align="center" prop="unitPrice" min-width="100" />

        <el-table-column label="计划代宰金额" align="center" prop="plannedSlaughterAmount" min-width="120" />

        <el-table-column label="已代宰金额" align="center" prop="actualSlaughterAmount" min-width="120" />

        <el-table-column label="添加时间" align="center" prop="additionTime" min-width="160" />

        <el-table-column label="修改时间" align="center" prop="modificationTime" min-width="160" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="actingSourceDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confirmActingSource">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllSupplier } from "@/api/app/supplier";
import { getAllPurchaser } from "@/api/app/purchaser";
import { getLevelList } from "@/api/baseInfo/level";
import { getActingAdminList } from "@/api/production/actingAdmin";
import { getActingProList, addActingPro, editActingPro } from "@/api/production/actingPro";
import { formatDateYMS } from "@/utils";

export default {
  name: "ActingPro",
  data() {
    return {
      /** 查询条件 */
      queryParams: {
        id: null,
        slaughterAgencyDate: null,
        documentNumber: null,
        supplierNumber: null,
        supplierName: null,
        customerNumber: null,
        customerName: null,
        whiteStripNumber: "",
        dzcWeight: null,
        deductionRatio: 0,
        grade: null,
      },
      /** 查询条件校验规则：上方表单全部必填 */
      queryRules: {
        slaughterAgencyDate: [{ required: true, message: "请选择屠宰日期", trigger: "change" }],
        documentNumber: [{ required: true, message: "请选择屠宰来源（单据编号）", trigger: "change" }],
        supplierNumber: [{ required: true, message: "请选择供应商", trigger: "change" }],
        customerNumber: [{ required: true, message: "请选择代宰户", trigger: "change" }],
        whiteStripNumber: [{ required: true, message: "请输入白条编号", trigger: "blur" }],
        dzcWeight: [{ required: true, message: "请输入重量(kg)", trigger: "blur" }],
        deductionRatio: [{ required: true, message: "请输入扣重%", trigger: "blur" }],
        grade: [{ required: true, message: "请选择级别", trigger: "change" }],
      },
      supplierList: [],
      /** 代宰户列表，TODO 可替换为接口 */
      actingCustomerList: [
        
      ],
      /** 当前选中的级别详情索引，用于高亮 */
      selectedLevelIndex: null,
      /** 左侧红色输入框绑定数据，点击中间级别项时回填；级别名称、级别编号只读；扣重% 默认 0 */
      /** 级别的详细数据，从级别接口获取，2列展示 */
      levelDetailList: [],
      /** 代宰来源查询弹框 */
      actingSourceDialogVisible: false,
      /** 代宰来源表格数据（与代宰管理登记新增字段一致），TODO 可替换为接口 */
      actingSourceList: [],
      /** 表格当前选中的一行（单选） */
      currentActingSourceRow: null,
      /** 已确认选中的代宰来源行，用于回显 */
      selectedActingSourceRow: null,
      /** 下半部分表格数据：保存后生成一条记录 */
      measureList: [],
      /** 下方计量表格当前选中行（用于再次点击同一行时取消选中） */
      measureSelectedRow: null,
    };
  },
  created() {
    /** 默认屠宰日期为明天 */
    this.queryParams.slaughterAgencyDate = formatDateYMS(new Date().getTime() + 24 * 60 * 60 * 1000);
    this.getSupplierList();
    this.getPurchaserList();
    this.getLevelDetailList();
  },
  computed: {
    /** 计划代宰数量（头），与选中单据的数量联动 */
    planSlaughterQty() {
      const row = this.selectedActingSourceRow;
      if (!row || row.plannedSlaughterQuantity == null || row.plannedSlaughterQuantity === "") return "0";
      return String(row.plannedSlaughterQuantity);
    },
    /** 已代宰数量（头），与表格行数联动：已代宰(原始) + 当前已保存行数 */
    actedSlaughterQty() {
      const row = this.selectedActingSourceRow;
      if (!row) return "0";
      const base = row.actualSlaughterQuantity != null  ? Number(row.actualSlaughterQuantity) : 0;
      return String(base + (this.measureList ? this.measureList.length / 2 : 0));
    },
    /** 剩余代宰数量（头）= 计划 - 已代宰 */
    remainingSlaughterQty() {
      const plan = Number(this.planSlaughterQty) || 0;
      const acted = Number(this.actedSlaughterQty) || 0;
      return String(Math.max(0, plan - acted));
    },
  },
  methods: {
    /** 供应商下拉变更：写入 value 和 label（供应商编号/供应商名称） */
    handleSupplierChange(val) {
      const item = (this.supplierList || []).find((s) => s.supplierNo === val);
      this.queryParams.supplierName = item ? item.supplierName : null;
    },
    /** 代宰户下拉变更：写入 value 和 label（代宰户编号/代宰户名称） */
    handleActingCustomerChange(val) {
      const item = (this.actingCustomerList || []).find((c) => c.purchaserNo === val);
      this.queryParams.customerName = item ? item.purchaserName : null;
    },
    /** 打开代宰来源查询弹框，加载表格数据 */
    openActingSourceDialog() {
      this.actingSourceDialogVisible = true;
      this.currentActingSourceRow = null;
      this.loadActingSourceList();
      this.$nextTick(() => {
        this.$refs.actingSourceTable && this.$refs.actingSourceTable.setCurrentRow();
      });
    },
    /** 加载代宰来源列表（代宰管理登记数据），TODO 可替换为接口 */
    loadActingSourceList() {
      let params = {
        slaughterAgencyDate: this.queryParams.slaughterAgencyDate,
      }
      getActingAdminList(params).then((res) => {
        this.actingSourceList = res.data || [];
      });
    },
    /**
     * 预留接口：根据单据编号加载下方表格数据
     * TODO: 对接接口后，替换为实际请求并赋值 this.measureList = res.data || []
     */
    loadMeasureListForBill(billNo) {
      // 示例：根据 billNo 加载下方数据；当前默认置空
      this.measureList = [];
      getActingProList({documentNumber: billNo}).then((res) => {
        this.measureList = res.data || [];
        this.measureSelectedRow = null;
        this.$nextTick(() => {
          if (this.$refs.measureTable && this.$refs.measureTable.setCurrentRow) {
            this.$refs.measureTable.setCurrentRow(null);
          }
        });
      });
    },
    /**
     * 判断是否为同一行计量记录（优先用 id，否则引用相等）。
     * @param {Object|null} a 已选中行
     * @param {Object|null} b 当前点击行
     */
    isSameMeasureRow(a, b) {
      if (!a || !b) return false;
      if (a.id != null && b.id != null) return String(a.id) === String(b.id);
      return a === b;
    },
    /**
     * 下方计量表格行点击：单选高亮；再次点击已选中行则取消选中。
     * @param {Object} row 当前行
     */
    handleMeasureRowClick(row) {
      if (!row) return;
      if (this.isSameMeasureRow(this.measureSelectedRow, row)) {
        /** 再次点击已选行：取消选中并执行 resetForm（清空 id/白条/重量等并重置表格高亮） */
        this.resetForm();
        return;
      }
      this.measureSelectedRow = row;
      this.applyMeasureRowToQueryParams(row);
      this.$nextTick(() => {
        if (this.$refs.measureTable && this.$refs.measureTable.setCurrentRow) {
          this.$refs.measureTable.setCurrentRow(row);
        }
      });
      /** 若行带级别，同步中间级别区高亮 */
      if (row.grade != null && Array.isArray(this.levelDetailList)) {
        const idx = this.levelDetailList.findIndex((it) => String(it.levelNo) === String(row.grade));
        this.selectedLevelIndex = idx >= 0 ? idx : null;
      }
    },
    /**
     * 将表格行字段合并到 queryParams；扣重% 表格字段为 deductionRatio，表单为 deductionRate。
     * @param {Object} row 表格行
     */
    applyMeasureRowToQueryParams(row) {
      this.queryParams = {
         id: row.id,
        slaughterAgencyDate: row.slaughterAgencyDate,
        documentNumber: row.documentNumber,
        supplierNumber: row.supplierNumber,
        supplierName: row.supplierName,
        customerNumber: row.customerNumber,
        customerName: row.customerName,
        whiteStripNumber: row.whiteStripNumber,
        dzcWeight: row.dzcWeight,
        deductionRatio: row.deductionRatio,
        grade: row.grade, 

      }
    },
    /** 表格单选：当前行变化 */
    handleActingSourceCurrentChange(row) {
      this.currentActingSourceRow = row;
    },
    /** 确定选择代宰来源，将表格选中行的单据编号写入选择屠宰来源（只读输入框）并关闭弹框 */
    confirmActingSource() {
      if (!this.currentActingSourceRow) {
        this.$message.warning("请先选择一行");
        return;
      }
      this.selectedActingSourceRow = this.currentActingSourceRow;
      this.queryParams.documentNumber = this.currentActingSourceRow.documentNumber || "";
      this.queryParams.supplierName = this.currentActingSourceRow.supplierName || "";
      this.queryParams.supplierNumber = this.currentActingSourceRow.supplierNumber || "";
      this.queryParams.customerName = this.currentActingSourceRow.customerName || "";
      this.queryParams.customerNumber = this.currentActingSourceRow.slaughterAgencyNumber || "";
    
      /** 预留：根据选择的代宰来源加载下方表格的初始数据（当前默认空数组） */
      this.loadMeasureListForBill(this.queryParams.documentNumber);
      this.actingSourceDialogVisible = false;
      this.$message.success("已选择：" + (this.currentActingSourceRow.documentNumber || ""));
    },
    /** 获取供应商列表 */
    getSupplierList() {
      getAllSupplier({}).then((res) => {
        this.supplierList = res.data || [];
      });
    },
    getPurchaserList() {
      getAllPurchaser({}).then((res) => {
        this.actingCustomerList = res.data || [];
      });
    },
    /**
     * 级别编码 value -> 名称 label（与 levelDetailList 一致）
     * @param {string|number} val 级别 levelNo
     */
    getLevelLabel(val) {
      const list = Array.isArray(this.levelDetailList) ? this.levelDetailList : [];
      const hit = list.find((item) => String(item.levelNo) === String(val));
      return hit ? (hit.levelName || "-") : (val == null || val === "" ? "-" : val);
    },
    /** 从级别接口获取级别的详细数据，供中间区域展示；有数据时默认选中第一个级别 */
    getLevelDetailList() {
      getLevelList({}).then((res) => {
        this.levelDetailList = res.data || [];
        if (this.levelDetailList.length > 0) {
          this.handleSelectLevel(this.levelDetailList[0], 0);
        }
      });
    },
    /** 点击中间某条级别时高亮，并将该级别数据回填到左侧红色输入框（级别名称、级别编号只读展示；扣重无则默认 0） */
    handleSelectLevel(item, index) {
      this.selectedLevelIndex = index;
      this.queryParams.grade = item.levelNo != null ? item.levelNo : "";
      this.queryParams.whiteStripNumber = item.whiteStripNumber != null ? item.whiteStripNumber : "";
      this.queryParams.dzcWeight = item.dzcWeight != null ? item.dzcWeight : null;
      this.queryParams.deductionRatio = item.deductionRatio != null ? item.deductionRatio : 0;
    },
    /**
     * 保存：校验必填后生成一条表格记录
     * - 必须先选择代宰来源（单据编号）
     * - 保存数量不得超过计划代宰数量
     * - 生成成功后白条编号自动 +1
     */
    handleSave() {
      /** 上方表单必填校验：屠宰日期/屠宰来源/供应商/代宰户 */
      if (!this.$refs.queryForm) return;
      this.$refs.queryForm.validate((valid) => {
        if (!valid) return;

        /** 校验计划数量上限：表格行数 >= 计划代宰数量时不允许继续保存 */
        const plan = Number(this.planSlaughterQty) || 0;
        const baseActed = Number(this.selectedActingSourceRow.actedQty) || 0;
        if (plan > 0 && baseActed + this.measureList.length >= plan) {
          this.$message.warning("已达到计划代宰数量，不能继续保存");
          return;
        }
        if(this.queryParams.id){
          editActingPro(this.queryParams).then((res) => {
            this.$message.success("保存成功");
            this.resetForm();
            this.loadMeasureListForBill(this.queryParams.documentNumber);
          });
        }else{
          addActingPro(this.queryParams).then((res) => {
            this.$message.success("保存成功");
            this.resetForm();
            this.loadMeasureListForBill(this.queryParams.documentNumber);
          });
        }
      });
    },
    resetForm() {
      this.queryParams.id = null;
      this.queryParams.whiteStripNumber = null;
      this.queryParams.dzcWeight = null;
      this.measureSelectedRow = null;
      this.$nextTick(() => {
        if (this.$refs.measureTable && this.$refs.measureTable.setCurrentRow) {
          this.$refs.measureTable.setCurrentRow(null);
        }
      });
    },
    /** 导出 */
    handleExport() {
      console.log("导出", this.queryParams);
    },
    /**
     * 白条编号自动 +1
     * - 优先对末尾连续数字做 +1（保留前导 0 位数）
     * - 若无法识别末尾数字，则直接返回原值
     */
    incrementWhiteNo(val) {
      const s = val != null ? String(val) : "";
      const m = s.match(/^(.*?)(\d+)$/);
      if (!m) return s;
      const prefix = m[1];
      const numStr = m[2];
      const next = String(Number(numStr) + 1).padStart(numStr.length, "0");
      return prefix + next;
    },
  },
};
</script>

<style scoped>
.acting-pro-page {
  height: calc(100vh - 90px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-top {
  flex: 0 0 auto;
}

.section-bottom {
  flex: 1 1 0;
  min-height: 0;
}

.query-row {
  margin-bottom: 16px;
}

/** 选择屠宰来源：下拉 + 查询图标同一行 */
.slaughter-source-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-query-btn {
  flex-shrink: 0;
}

/** 左中右三栏布局 */
.three-cols {
  display: flex;
  gap: 24px;
  align-items: stretch;
  min-height: 200px;
}

.col-left {
  flex: 0 0 auto;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

/** 红色表单：2 行 2 列 */
.left-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px 20px;
}

/** 左侧每一项：红色标签 + 输入框 */
.left-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/** 级别占一格，名称(左)+No(右) 两个小输入框塞在一格内 */
.left-item-level .level-inputs-row {
  display: flex;
  gap: 6px;
}

.left-item-level .level-inputs-row > * {
  flex: 1;
  min-width: 0;
}

/** 级别用红色输入框，高度与其他项一致（44px），字号略小便于一格内并排 */
::v-deep .highlight-input-sm .el-input__inner,
::v-deep .highlight-input-sm input {
  font-size: 16px;
  height: 44px;
  line-height: 44px;
  padding: 0 8px;
}

/** 左侧大号红色字体（标签） */
.highlight-text {
  font-size: 18px;
  font-weight: 600;
  color: #f56c6c;
}

.left-label {
  flex-shrink: 0;
}

/** 左侧红色输入框内文字也使用红色 */
::v-deep .highlight-input .el-input__inner,
::v-deep .highlight-input input {
  font-size: 16px;
  font-weight: 600;
  color: #f56c6c;
}

/** 红色输入框变大：高度与字号 */
::v-deep .highlight-input-lg .el-input__inner,
::v-deep .highlight-input-lg input {
  font-size: 20px;
  height: 44px;
  line-height: 44px;
  padding: 0 12px;
}

.col-middle {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
}

/** 级别网格：表格效果，整表只有一层边框线（容器外框 + 格子只画右边、下边） */
.level-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 36px;
  gap: 0;
  height: 180px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
}

/** 每个格子只画右边线和下边线，与相邻格子共用一根线；最右列、最后一行不画，由容器体现 */
.level-detail-item {
  padding: 0 8px;
  font-size: 13px;
  line-height: 36px;
  color: #606266;
  text-align: center;
  cursor: pointer;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  transition: background 0.2s, color 0.2s;
}

.level-detail-item:nth-child(2n) {
  border-right: none;
}

.level-detail-item:nth-last-child(-n + 2) {
  border-bottom: none;
}

.level-detail-item:hover {
  background: #ecf5ff;
  color: #409eff;
}

.level-detail-item.active {
  background: #409eff;
  color: #fff;
}

/** 右侧按钮区：平行排列、变大 */
.col-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

/** 计划/已代宰/剩余数量，竖向排列，显示在保存按钮左侧；与按钮间隔加大 */
.slaughter-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-right: 16px;
  font-size: 14px;
  color: #606266;
}

.slaughter-stats span {
  white-space: nowrap;
}

/** “xx头”里的数字：换色、加大、加粗 */
.slaughter-stats .stat-num {
  color: #409eff;
  font-size: 18px;
  font-weight: 700;
}

.col-right-btns {
  display: flex;
  gap: 12px;
  align-items: center;
}

::v-deep .col-right .btn-lg {
  padding: 12px 24px;
  font-size: 16px;
}

.placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 12px;
}

/** 下方计量表格：当前选中行浅蓝高亮 */
::v-deep .measure-table .el-table__body tr.current-row > td {
  background-color: #d9ecff !important;
}

::v-deep .measure-table .el-table__body-wrapper tbody tr {
  cursor: pointer;
}
</style>
