diagnosis.admin/src/views/business/components/AcupointTable.vue

<template>
  <div class="recipe-acupoint-wrapper">
    <div class="top-btns">
      <el-button size="mini" type="warning" @click="openAddDialog()"
        >新增</el-button
      >
      <el-button size="mini" type="warning" @click="clearAll()">清空</el-button>
    </div>

    <!-- 处方 tab 切换 -->
    <div class="prescription-tabs" v-if="prescriptions.length">
      <div
        class="tab-item"
        :class="{ active: activeIndex === index }"
        v-for="(item, index) in prescriptions"
        :key="index"
        @click="switchTab(index)"
      >
        <span class="tab-name">{{ item.itemName }}</span>
        <span class="tab-close" @click.stop="removePrescription(index)">×</span>
      </div>
    </div>

    <!--新增适宜技术处方弹窗 -->
    <el-dialog
      :visible.sync="showAddDialog"
      width="800px"
      top="10vh"
      :show-close="false"
      :close-on-click-modal="false"
      append-to-body
      custom-class="add-prescription-dialog"
    >
      <div slot="title" class="add-dialog-header">
        <span>新增适宜技术处方</span>
        <div class="close-btn" @click="showAddDialog = false">+</div>
      </div>
      <div class="add-dialog-body">
        <div class="add-form-row">
          <span class="label">分类：</span>
          <el-select
            size="mini"
            v-model="addForm.category"
            placeholder="请选择"
            clearable
            style="flex: 1"
            @change="onCategoryChange"
          >
            <el-option
              v-for="item in classifyOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span class="label"
            ><span style="color: red">*</span> 项目名称：</span
          >
          <el-select
            size="mini"
            v-model="addForm.itemId"
            filterable
            :filter-method="searchItem"
            :loading="itemLoading"
            loading-text="搜索中..."
            no-data-text="暂无数据"
            placeholder="请搜索选择"
            style="flex: 1"
            @change="onItemSelected"
          >
            <el-option
              v-for="item in itemOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="add-dialog-btns">
        <div class="confirm-btn" @click="confirmAdd()">确定</div>
      </div>
    </el-dialog>

    <div class="recipe-acupoint">
      <div
        class="table-toolbar flex-vertical-center-l flex-wrap"
        v-if="prescriptions.length"
      >
        <div class="toolbar-item flex-vertical-center-l" v-if="showEditable">
          <span><span style="color: red">*</span> 是否可修改：</span>
          <el-select
            size="mini"
            v-model="innerIsEditable"
            placeholder="请选择"
            style="width: 80px"
            @change="onEditableChange"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </div>
        <div class="toolbar-item flex-vertical-center-l">
          <span
            ><span v-if="detailRequired" style="color: red">*</span>
            详情：</span
          >
          <el-checkbox-group
            v-model="innerDetailTypes"
            size="mini"
            :disabled="isLocked"
            @change="onDetailTypesChange"
          >
            <el-checkbox label="穴位">穴位</el-checkbox>
            <el-checkbox label="经络">经络</el-checkbox>
            <el-checkbox label="耳穴">耳穴</el-checkbox>
            <el-checkbox label="部位">部位</el-checkbox>
            <el-checkbox label="其他详情">其他详情</el-checkbox>
            <el-checkbox label="无详情">无详情</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>

      <div class="table-container" v-if="prescriptions.length">
        <!-- 表格 -->
        <div
          v-for="detailType in activeDetailTypes"
          :key="detailType"
          class="detail-table-section"
        >
          <div class="detail-section-label" v-if="prescriptions.length">
            {{ detailType }}
          </div>
          <div class="table-show flex-vertical-between">
            <!-- 左侧表格 -->
            <div class="table-left">
              <el-table
                :data="getLeftList(detailType)"
                border
                size="mini"
                style="width: 100%"
              >
                <el-table-column
                  prop="id"
                  label="序号"
                  width="50"
                  align="center"
                ></el-table-column>
                <el-table-column :label="detailType" min-width="100">
                  <template slot-scope="scope">
                    <el-select
                      v-if="detailType !== '其他详情' && detailType !== '部位'"
                      size="mini"
                      :value="scope.row.name"
                      remote
                      filterable
                      :filter-method="getFilterMethod(detailType)"
                      placeholder="请选择"
                      @change="onItemChange($event, scope, detailType)"
                      @focus="searchByType('', detailType)"
                    >
                      <el-option
                        v-for="(item, idx) in getSearchOptions(detailType)"
                        :key="idx"
                        :label="item.acuname"
                        :value="item.acuid"
                      ></el-option>
                    </el-select>
                    <el-input
                      v-else
                      size="mini"
                      v-model="scope.row.name"
                      placeholder="请输入"
                      @change="onDetailInput(scope, detailType)"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="数量" width="60" align="center">
                  <template slot-scope="scope">
                    <el-input-number
                      size="mini"
                      v-model="scope.row.count"
                      :min="1"
                      :disabled="isLocked"
                      :controls="false"
                      style="width: 100%"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="备注" min-width="80">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.remark"
                      :disabled="isLocked"
                      placeholder="请输入"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="主配穴"
                  width="100"
                  align="center"
                  v-if="detailType === '穴位'"
                >
                  <template slot-scope="scope">
                    <el-select
                      size="mini"
                      v-model="scope.row.mainType"
                      style="width: 100%"
                    >
                      <el-option label="主穴" value="1"></el-option>
                      <el-option label="配穴" value="2"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope" v-if="scope.row.name">
                    <div class="operate">
                      <img
                        src="~@/assets/add.png"
                        alt
                        :style="
                          isLocked ? 'opacity:0.3;pointer-events:none' : ''
                        "
                        @click="addDetailRow(scope, detailType)"
                      />
                      <img
                        src="~@/assets/delete1.png"
                        alt
                        :style="
                          isDeleteDisabled(scope.row, detailType)
                            ? 'opacity:0.3;pointer-events:none'
                            : ''
                        "
                        @click="deleteDetailRow(scope, detailType)"
                      />
                      <img
                        v-if="
                          detailType !== '其他详情' && detailType !== '部位'
                        "
                        src="~@/assets/find.png"
                        alt
                        @click="find(scope, detailType)"
                      />
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 右侧表格 -->
            <div class="table-left">
              <el-table
                :data="getRightList(detailType)"
                border
                size="mini"
                style="width: 100%"
              >
                <el-table-column
                  prop="id"
                  label="序号"
                  width="50"
                  align="center"
                ></el-table-column>
                <el-table-column :label="detailType" min-width="100">
                  <template slot-scope="scope">
                    <el-select
                      v-if="detailType !== '其他详情' && detailType !== '部位'"
                      size="mini"
                      :value="scope.row.name"
                      remote
                      filterable
                      :filter-method="getFilterMethod(detailType)"
                      placeholder="请选择"
                      @change="onItemChange($event, scope, detailType)"
                      @focus="searchByType('', detailType)"
                    >
                      <el-option
                        v-for="(item, idx) in getSearchOptions(detailType)"
                        :key="idx"
                        :label="item.acuname"
                        :value="item.acuid"
                      ></el-option>
                    </el-select>
                    <el-input
                      v-else
                      size="mini"
                      v-model="scope.row.name"
                      placeholder="请输入"
                      @change="onDetailInput(scope, detailType)"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="数量" width="60" align="center">
                  <template slot-scope="scope">
                    <el-input-number
                      size="mini"
                      v-model="scope.row.count"
                      :min="1"
                      :disabled="isLocked"
                      :controls="false"
                      style="width: 100%"
                    ></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column label="备注" min-width="80">
                  <template slot-scope="scope">
                    <el-input
                      size="mini"
                      v-model="scope.row.remark"
                      :disabled="isLocked"
                      placeholder="请输入"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="主配穴"
                  width="100"
                  align="center"
                  v-if="detailType === '穴位'"
                >
                  <template slot-scope="scope">
                    <el-select
                      size="mini"
                      v-model="scope.row.mainType"
                      style="width: 100%"
                    >
                      <el-option label="主穴" value="1"></el-option>
                      <el-option label="配穴" value="2"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                  <template slot-scope="scope" v-if="scope.row.name">
                    <div class="operate">
                      <img
                        src="~@/assets/add.png"
                        alt
                        :style="
                          isLocked ? 'opacity:0.3;pointer-events:none' : ''
                        "
                        @click="addDetailRow(scope, detailType)"
                      />
                      <img
                        src="~@/assets/delete1.png"
                        alt
                        :style="
                          isDeleteDisabled(scope.row, detailType)
                            ? 'opacity:0.3;pointer-events:none'
                            : ''
                        "
                        @click="deleteDetailRow(scope, detailType)"
                      />
                      <img
                        v-if="
                          detailType !== '其他详情' && detailType !== '部位'
                        "
                        src="~@/assets/find.png"
                        alt
                        @click="find(scope, detailType)"
                      />
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

      <div class="no-data-tip" v-else>
        <span>暂无项目，请先点击"新增"添加项目</span>
      </div>

      <!-- 底部统计 -->
      <div class="table-bottom" v-if="prescriptions.length">
        <div class="table-b-header">
          <div class="header-about">
            <div
              class="item flex-vertical-center-l"
              style="align-items: flex-start;"
            >
              <span><span style="color: red">*</span> 操作指南：</span>
              <div style="flex: 1;">
                <el-input
                  size="mini"
                  placeholder="请输入"
                  v-model="operationGuide"
                  type="textarea"
                  auto-size="{ minRows: 1, maxRows: 4 }"
                  :disabled="isLocked"
                  @input="emitStatistics"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="header-about">
            <div class="stat-row flex-vertical-center-l flex-wrap">
              <div class="stat-field flex-vertical-center-l">
                <span><span style="color: red">*</span> 单次：</span>
                <el-input-number
                  size="mini"
                  v-model="singleCount"
                  :min="1"
                  :controls="false"
                  style="width: 60px"
                  @change="updatePrice"
                  placeholder="请输入"
                ></el-input-number>
                <span class="stat-unit">{{ currentPricingUnit }}</span>
              </div>
              <div class="stat-field flex-vertical-center-l">
                <span>治疗次数：</span>
                <el-input-number
                  size="mini"
                  v-model="treatCount"
                  :min="0"
                  :controls="false"
                  style="width: 60px"
                  :disabled="isLocked"
                  @change="updatePrice"
                ></el-input-number>
              </div>
              <div class="stat-field flex-vertical-center-l">
                <span>频次：</span>
                <el-input-number
                  size="mini"
                  v-model="frequency"
                  :min="0"
                  :controls="false"
                  style="width: 60px"
                  :disabled="isLocked"
                  @change="emitStatistics"
                  placeholder="请输入"
                ></el-input-number>
                <span class="stat-unit">天</span>
                <el-input-number
                  size="mini"
                  v-model="frequencyUnit"
                  :min="0"
                  :controls="false"
                  style="width: 60px"
                  :disabled="isLocked"
                  @change="emitStatistics"
                  placeholder="请输入"
                ></el-input-number>
                <span class="stat-unit">次</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部金额 -->
      <div class="table-b-bottom flex-vertical-between">
        <div class="t-b-b-left flex-vertical-center-l flex-wrap">
          <div class="t-b-l-item">
            单次金额：<span>{{ singlePrice || "0.00" }}元</span>
          </div>
          <div class="t-b-l-item">
            疗程金额：<span>{{ coursePrice || "0.00" }}元</span>
          </div>
          <div class="t-b-l-item">
            协定方总金额：<span>{{ totalPrice || "0.00" }}元</span>
          </div>
        </div>
        <div class="t-b-b-right flex-vertical-center-r">
          <el-button
            type="primary"
            size="mini"
            :loading="saveLoading"
            @click="handleSave"
            >保存</el-button
          >
        </div>
      </div>
    </div>

    <!-- 查看详情弹窗 -->
    <el-dialog
      :visible.sync="showDetailDialog"
      width="50%"
      top="5vh"
      :title="detailType + '详情'"
      append-to-body
      custom-class="detail-dialog"
    >
      <div class="drug-body">
        <!-- 穴位详情 -->
        <template v-if="detailType === '穴位'">
          <div class="drug-item">
            <span>穴位名称：</span>
            <div>{{ detailData.acuname }}</div>
          </div>
          <div class="drug-item">
            <span>定位：</span>
            <div>{{ detailData.acuposotion }}</div>
          </div>
          <div class="drug-item">
            <span>解剖：</span>
            <div>{{ detailData.acudiscection }}</div>
          </div>
          <div class="drug-item">
            <span>主治：</span>
            <div>{{ detailData.acumaintreat }}</div>
          </div>
          <div class="drug-item">
            <span>操作：</span>
            <div>{{ detailData.acuoperation }}</div>
          </div>
          <div class="drug-item">
            <span>针刺：</span>
            <div>{{ detailData.acuneedling }}</div>
          </div>
          <div class="drug-item" v-if="detailData.acuimg">
            <span>图示：</span>
            <div class="detail-img"><img :src="detailData.acuimg" /></div>
          </div>
        </template>
        <!-- 经络详情 -->
        <template v-else-if="detailType === '经络'">
          <div class="drug-item">
            <span>经络名称：</span>
            <div>{{ detailData.mername }}</div>
          </div>
          <div class="drug-item">
            <span>类型：</span>
            <div>{{ merTypeMap[detailData.mertype] || "-" }}</div>
          </div>
          <div class="drug-item" v-if="detailData.mermaindisease">
            <span>主要病候：</span>
            <div v-html="detailData.mermaindisease"></div>
          </div>
          <div class="drug-item" v-if="detailData.mermaintreat">
            <span>主治概要：</span>
            <div v-html="detailData.mermaintreat"></div>
          </div>
          <div class="drug-item" v-if="detailData.merimg">
            <span>图片：</span>
            <div class="detail-img"><img :src="detailData.merimg" /></div>
          </div>
        </template>
        <!-- 耳穴详情 -->
        <template v-else-if="detailType === '耳穴'">
          <div class="drug-item">
            <span>名称：</span>
            <div>{{ detailData.name }}</div>
          </div>
          <div class="drug-item" v-if="detailData.area">
            <span>定位：</span>
            <div>{{ detailData.area }}</div>
          </div>
          <div class="drug-item" v-if="detailData.effect">
            <span>功能：</span>
            <div>{{ detailData.effect }}</div>
          </div>
          <div class="drug-item" v-if="detailData.mainTreat">
            <span>主治：</span>
            <div>{{ detailData.mainTreat }}</div>
          </div>
          <div class="drug-item" v-if="detailData.photo">
            <span>图片：</span>
            <div class="detail-img"><img :src="detailData.photo" /></div>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getXueweiList,
  collateralChannels,
  getAcupointD,
  getMerD,
  getAcuMeridianList,
  getAcuMeridianDetail,
} from "@/api/knowledge.js";
import {
  getMappedNondrugItemList,
  getNondrugItemDetail,
} from "@/api/technology.js";
import popup from "@/components/Propup.vue";

// 详情默认值 value → label 映射
const DETAIL_DEFAULT_MAP = {
  "1": "穴位",
  "2": "部位",
  "3": "耳穴",
  "4": "经络",
  "5": "其他详情",
  "6": "无详情",
};

function createEmptyRow(id) {
  return {
    id,
    acuid: "",
    acuname: "",
    name: "",
    count: 1,
    remark: "",
    mainType: "1",
  };
}

function createPrescriptionData(options = {}) {
  const {
    detailRequired = false,
    detailTypes = [],
    singleCount = 0,
    unitPrice = 0,
  } = options;
  const singlePrice = (singleCount * unitPrice).toFixed(2);
  const allTypes = ["穴位", "经络", "耳穴", "部位", "其他详情", "无详情"];
  const detailTables = {};
  allTypes.forEach((type) => {
    if (type === "无详情") {
      detailTables[type] = detailTypes.includes(type)
        ? [{ description: "" }]
        : [];
    } else {
      detailTables[type] = detailTypes.includes(type)
        ? [createEmptyRow(1)]
        : [];
    }
  });
  return {
    detailTables,
    innerIsEditable: "1",
    innerDetailTypes: detailTypes.length > 0 ? detailTypes : [],
    detailRequired: !!detailRequired,
    operationGuide: "",
    singleCount,
    treatCount: 1,
    frequency: undefined,
    frequencyUnit: undefined,
    singlePrice,
    coursePrice: "0.00",
    totalPrice: "0.00",
    currentUnitPrice: unitPrice,
  };
}

export default {
  name: "AcupointTable",
  components: { popup },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    isEditable: {
      type: String,
      default: "1",
    },
    showEditable: {
      type: Boolean,
      default: true,
    },
    detailTypes: {
      type: Array,
      default: () => ["穴位"],
    },
    statistics: {
      type: Object,
      default: () => ({}),
    },
    showGuide: {
      type: Boolean,
      default: false,
    },
    unitPrice: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 配穴相关
      acupointList: [],
      meridianList: [],
      earAcupointList: [],
      detailTables: {
        穴位: [createEmptyRow(1)],
        经络: [],
        耳穴: [],
        部位: [],
        其他详情: [],
        无详情: [],
      },
      innerIsEditable: this.isEditable,
      innerDetailTypes: ["穴位"],
      detailRequired: false,
      // 统计相关
      currentUnitPrice: 0,
      operationGuide: "",
      singleCount: 0,
      treatCount: 1,
      frequency: undefined,
      frequencyUnit: undefined,
      singlePrice: "0.00",
      coursePrice: "0.00",
      totalPrice: "0.00",
      // 处方 tab 
      activeIndex: 0,
      prescriptionDataMap: {},
      // 新增处方弹窗
      showAddDialog: false,
      classifyOptions: [],
      itemOptions: [],
      itemLoading: false,
      addForm: {
        category: "",
        itemId: "",
        itemName: "",
        detailRequired: false,
      },
      prescriptions: [],
      // 详情弹窗
      showDetailDialog: false,
      detailData: {},
      detailType: "",
      saveLoading: false,
      _isLoadingTab: false,
      merTypeMap: {
        1: "十二经脉",
        2: "奇经八脉",
        3: "经外奇穴",
        4: "阿是穴",
      },
    };
  },
  computed: {
    isLocked() {
      return this.innerIsEditable === "0";
    },
    activeDetailTypes() {
      const validTypes = ["穴位", "经络", "耳穴", "部位", "其他详情"];
      return validTypes.filter((t) => this.innerDetailTypes.includes(t));
    },
    currentPricingUnit() {
      const p = this.prescriptions[this.activeIndex];
      return p?.pricingUnit || "";
    },
  },
  watch: {
    detailTables: {
      handler() {
        this.calcPrice();
      },
      deep: true,
    },
  },
  created() {
    this._prevDetailTypes = [...this.innerDetailTypes];
    this.getAcupointList();
    this.getMeridianList();
    this.getEarAcupointList();
    this.loadClassifyOptions();
  },
  methods: {
    // ========== 分类数据加载 ==========
    async loadClassifyOptions() {
      try {
        const res = await fetch(`${window.BASE_URL}data/classify.json`);
        const data = await res.json();
        this.classifyOptions = data.classify || [];
      } catch (e) {
        console.error("加载分类数据失败", e);
      }
    },

    // ========== Tab 切换 ==========
    saveCurrentTabData() {
      if (!this.prescriptions.length) return;
      this.$set(this.prescriptionDataMap, this.activeIndex, {
        detailTables: JSON.parse(JSON.stringify(this.detailTables)),
        innerIsEditable: this.innerIsEditable,
        innerDetailTypes: [...this.innerDetailTypes],
        detailRequired: this.detailRequired,
        operationGuide: this.operationGuide,
        singleCount: this.singleCount,
        treatCount: this.treatCount,
        frequency: this.frequency,
        frequencyUnit: this.frequencyUnit,
        singlePrice: this.singlePrice,
        coursePrice: this.coursePrice,
        totalPrice: this.totalPrice,
        currentUnitPrice: this.currentUnitPrice,
      });
    },
    loadTabData(index) {
      this._isLoadingTab = true;
      const data = this.prescriptionDataMap[index];
      if (data) {
        this.detailTables = JSON.parse(JSON.stringify(data.detailTables));
        this.innerIsEditable = data.innerIsEditable;
        this.innerDetailTypes = [...data.innerDetailTypes];
        this._prevDetailTypes = [...data.innerDetailTypes];
        this.detailRequired = data.detailRequired;
        this.operationGuide = data.operationGuide;
        this.singleCount = data.singleCount;
        this.treatCount = data.treatCount;
        this.frequency = data.frequency;
        this.frequencyUnit = data.frequencyUnit;
        this.singlePrice = data.singlePrice;
        this.coursePrice = data.coursePrice;
        this.totalPrice = data.totalPrice;
        this.currentUnitPrice = data.currentUnitPrice || 0;
      } else {
        const def = createPrescriptionData();
        this.detailTables = def.detailTables;
        this.innerIsEditable = def.innerIsEditable;
        this.innerDetailTypes = def.innerDetailTypes;
        this._prevDetailTypes = [...def.innerDetailTypes];
        this.detailRequired = def.detailRequired;
        this.operationGuide = def.operationGuide;
        this.singleCount = def.singleCount;
        this.treatCount = def.treatCount;
        this.frequency = def.frequency;
        this.frequencyUnit = def.frequencyUnit;
        this.singlePrice = def.singlePrice;
        this.coursePrice = def.coursePrice;
        this.totalPrice = def.totalPrice;
        this.currentUnitPrice = def.currentUnitPrice || 0;
      }
      this.$nextTick(() => {
        this._isLoadingTab = false;
      });
    },
    switchTab(index) {
      if (this.activeIndex === index) return;
      this.saveCurrentTabData();
      this.activeIndex = index;
      this.loadTabData(index);
    },

    // ========== 新增处方弹窗 ==========
    async openAddDialog() {
      this.addForm = {
        category: "",
        itemId: "",
        itemName: "",
        detailRequired: false,
      };
      this.itemOptions = [];
      this.showAddDialog = true;
      await this.fetchItemOptions();
    },
    async fetchItemOptions(query) {
      this.itemLoading = true;
      try {
        const params = {
          pageNum: 1,
          pageSize: 999,
        };
        if (this.addForm.category) {
          params.classify = this.addForm.category;
        }
        if (query) {
          params.py = query;
        }
        const res = await getMappedNondrugItemList(params);

        if (res.ResultCode == 0) {
          const list = res?.Data?.Items || [];
          this.itemOptions = list.map((item) => ({
            id: item.pid,
            name: item.itemName,
            detailRequired: item.detailIsnull === "1",
            detailDefault: item.detailDefault || "",
            detailCumulative: item.detailCumulative || "",
            classify: item.classify || "",
            price: item.price || 0,
            pricingUnit: item.pricingUnit || "",
            singleNumber: item.singleNumber || "",
            countCoefficient: item.countCoefficient || 1,
            minTreatmentDuration: item.minTreatmentDuration || 0,
          }));
        }
      } catch (e) {
        console.error("获取项目列表失败", e);
      } finally {
        this.itemLoading = false;
      }
    },
    onCategoryChange() {
      this.addForm.itemId = "";
      this.addForm.itemName = "";
      this.fetchItemOptions();
    },
    async searchItem(query) {
      await this.fetchItemOptions(query);
    },
    onItemSelected(id) {
      const item = this.itemOptions.find((i) => i.id === id);
      if (item) {
        this.addForm.itemName = item.name;
      }
    },
    async confirmAdd() {
      if (!this.addForm.itemId) {
        this.$message.warning("请选择项目名称");
        return;
      }

      // 检查项目是否已存在，不允许重复添加
      const isDuplicate = this.prescriptions.some(
        (p) => p.itemId === this.addForm.itemId
      );
      if (isDuplicate) {
        this.$message.warning("该项目已添加，不能重复添加");
        return;
      }

      // 调用详情接口获取项目完整信息
      let detailData = {};
      try {
        const res = await getNondrugItemDetail(this.addForm.itemId);
        if (res.ResultCode == 0) {
          detailData = res.Data || {};
        }
      } catch (e) {
        console.error("获取项目详情失败", e);
      }

      const categoryLabel =
        this.classifyOptions.find((c) => c.value === this.addForm.category)
          ?.label || "";

      // 解析详情默认值 → 详情类型名称
      const detailDefault = detailData.detailDefault || "";
      const detailTypeValues = detailDefault
        ? String(detailDefault).split(",")
        : [];
      const detailTypes = detailTypeValues
        .map((v) => DETAIL_DEFAULT_MAP[v.trim()])
        .filter(Boolean);

      // 详情是否必填
      const detailRequired = detailData.detailIsnull === "1";

      // 单次数量
      const singleNumber = detailData.singleNumber || "0";
      const singleCount = singleNumber === "0" ? 1 : 0;

      // 价格
      const price = detailData.price || 0;
      // 保存旧 tab 数据
      if (this.prescriptions.length > 0) {
        this.saveCurrentTabData();
      }

      // 从 itemOptions 中获取选中项的 classify
      const selectedItem = this.itemOptions.find(
        (i) => i.id === this.addForm.itemId,
      );

      const newIndex = this.prescriptions.length;
      this.prescriptions.push({
        category: this.addForm.category,
        categoryLabel,
        itemId: this.addForm.itemId,
        itemName: this.addForm.itemName,
        price,
        pricingUnit: detailData.pricingUnit || "",
        singleNumber,
        countCoefficient: detailData.countCoefficient || 1,
        minTreatmentDuration: detailData.minTreatmentDuration || 0,
        detailCumulative: detailData.detailCumulative || "",
        classify: selectedItem?.classify || "",
        ygtid: detailData.appId || "",
        departmentId: detailData.deptId || "",
        stitutionsId: detailData.institutionCode || "",
        stitutionsName: detailData.institutionName || "",
      });

      // 新 tab 的默认数据，根据详情设置
      this.prescriptionDataMap[newIndex] = createPrescriptionData({
        detailRequired,
        detailTypes,
        singleCount,
        unitPrice: price,
      });

      // 切到新 tab
      this.activeIndex = newIndex;
      this.loadTabData(newIndex);

      this.showAddDialog = false;
      this.$emit("prescriptions-change", this.prescriptions);
    },
    removePrescription(index) {
      this.$confirm("确认删除该处方？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.prescriptions.splice(index, 1);
          const oldMap = this.prescriptionDataMap;
          this.prescriptionDataMap = {};
          this.prescriptions.forEach((_, i) => {
            if (i < index) {
              this.prescriptionDataMap[i] = oldMap[i];
            } else {
              this.prescriptionDataMap[i] = oldMap[i + 1];
            }
          });

          if (this.prescriptions.length === 0) {
            this.activeIndex = 0;
            this.detailTables = {
              穴位: [createEmptyRow(1)],
              经络: [],
              耳穴: [],
              部位: [],
              其他详情: [],
            };
          } else {
            this.activeIndex = Math.min(index, this.prescriptions.length - 1);
            this.loadTabData(this.activeIndex);
          }

          this.$emit("prescriptions-change", this.prescriptions);
        })
        .catch(() => {});
    },
    clearAll() {
      if (!this.prescriptions.length) {
        // 没有处方 tab 时，仅重置表格和统计
        this.detailTables = {
          穴位: [createEmptyRow(1)],
          经络: [],
          耳穴: [],
          部位: [],
          其他详情: [],
        };
        this.operationGuide = "";
        this.singleCount = 0;
        this.treatCount = 1;
        this.frequency = undefined;
        this.frequencyUnit = undefined;
        this.singlePrice = "0.00";
        this.coursePrice = "0.00";
        this.totalPrice = "0.00";
        this.currentUnitPrice = 0;
        this.innerIsEditable = "1";
        this.innerDetailTypes = ["穴位"];
        this._prevDetailTypes = ["穴位"];
        this.detailRequired = false;
        this.emitStatistics();
        return;
      }
      // 只清空当前选中 tab 的内容，保留处方 tab 本身
      const p = this.prescriptions[this.activeIndex];
      const unitPrice = p?.price || 0;
      this.prescriptionDataMap[this.activeIndex] = createPrescriptionData({
        detailRequired: false,
        detailTypes: [],
        singleCount: 0,
        unitPrice,
      });
      this.loadTabData(this.activeIndex);
      this.calcPrice();
      this.$emit("prescriptions-change", this.prescriptions);
    },

    // ========== 工具栏 change ==========
    onEditableChange(val) {
      this.$emit("update:isEditable", val);
    },
    onDetailTypesChange(val) {
      // 无详情 与其他选项不能同时选中
      const NO_DETAIL = "无详情";
      const lastSelected = val.length > this._prevDetailTypes?.length
        ? val.find((v) => !this._prevDetailTypes.includes(v))
        : null;

      if (lastSelected === NO_DETAIL) {
        // 选中了"无详情"，取消其他所有选项
        val = [NO_DETAIL];
      } else if (lastSelected && lastSelected !== NO_DETAIL && val.includes(NO_DETAIL)) {
        // 选中了其他选项，取消"无详情"
        val = val.filter((v) => v !== NO_DETAIL);
      }
      this.innerDetailTypes = val;
      this._prevDetailTypes = [...val];

      val.forEach((type) => {
        const table = this.detailTables[type];
        const isEmpty = !table || table.length === 0;
        if (type === "无详情") {
          if (isEmpty) {
            this.$set(this.detailTables, type, [{ description: "" }]);
          }
        } else {
          if (isEmpty) {
            this.$set(this.detailTables, type, [createEmptyRow(1)]);
          }
        }
      });
      this.$emit("update:detailTypes", val);
    },

    // ========== 配穴表格（按详情类型） ==========
    getDetailTable(type) {
      if (!this.detailTables[type]) {
        this.$set(this.detailTables, type, [createEmptyRow(1)]);
      }
      return this.detailTables[type];
    },
    getLeftList(type) {
      return this.getDetailTable(type).filter((item) => item.id % 2 !== 0);
    },
    getRightList(type) {
      return this.getDetailTable(type).filter((item) => item.id % 2 === 0);
    },
    async getAcupointList(keyword = "", serchtype = "") {
      try {
        const res = await getXueweiList({
          pageid: 1,
          pagesize: 999,
          serchtype: serchtype,
          keyword: keyword,
        });
        if (res.code === 0) {
          this.acupointList = res.data.acupoints || [];
        }
      } catch (e) {
        console.error("获取穴位列表失败", e);
      }
    },
    async getMeridianList(keyword = "") {
      try {
        const res = await collateralChannels({
          mertype: "1",
          pageid: 1,
          pagesize: 999,
          keyword: keyword,
        });
        if (res.code == 0) {
          this.meridianList = (res.data.meridians || []).map((item) => ({
            acuid: item.merid,
            acuname: item.mername,
          }));
        }
      } catch (e) {
        console.error("获取经络列表失败", e);
      }
    },
    async getEarAcupointList(keyword = "") {
      try {
        const params = { page: 1, limit: 999 };
        if (keyword) params.keyWord = keyword;
        const res = await getAcuMeridianList(params);
        if (res.code == 0) {
          const list = res.data?.records || [];
          this.earAcupointList = (Array.isArray(list) ? list : []).map(
            (item) => ({
              acuid: item.id,
              acuname: item.name,
            }),
          );
        }
      } catch (e) {
        console.error("获取耳穴列表失败", e);
      }
    },
    getSearchOptions(type) {
      switch (type) {
        case "经络":
          return this.meridianList;
        case "耳穴":
          return this.earAcupointList;
        default:
          return this.acupointList;
      }
    },
    getFilterMethod(type) {
      return (query) => {
        this.searchByType(query, type);
      };
    },
    searchByType(query, type) {
      const pinyin = /^[A-Za-z]+$/g;
      const serchtype = pinyin.test(query) ? "1" : "";
      switch (type) {
        case "经络":
          this.getMeridianList(query);
          break;
        case "耳穴":
          this.getEarAcupointList(query);
          break;
        default:
          this.getAcupointList(query, serchtype);
      }
    },
    onItemChange(acuid, scope, detailType) {
      const row = scope.row;
      const table = this.getDetailTable(detailType);
      const exists = table.find(
        (item) => item.acuid === acuid && item.id !== row.id,
      );
      if (exists) {
        this.$message.error("不可重复选择");
        row.acuid = "";
        row.name = "";
        row.acuname = "";
        return;
      }
      const optionsList = this.getSearchOptions(detailType);
      const selected = optionsList.find((item) => item.acuid === acuid);
      if (selected) {
        row.acuid = selected.acuid;
        row.acuname = selected.acuname;
        row.name = selected.acuname;
        if (
          detailType === "穴位" &&
          selected.num != null &&
          selected.num !== ""
        ) {
          row.count = Number(selected.num) || 1;
        }
      }
      this.addDetailRow(scope, detailType);
    },
    onDetailInput(scope, detailType) {
      // 其他详情输入文字后自动新增一行
      if (scope.row.name) {
        this.addDetailRow(scope, detailType);
      }
    },
    addDetailRow(scope, detailType) {
      const table = this.getDetailTable(detailType);
      if (scope) {
        const index = scope.row.id - 1;
        if (index === table.length - 1) {
          table.push(createEmptyRow(1));
        } else {
          const rest = table.splice(scope.row.id);
          table.push(createEmptyRow(1));
          this.$set(this.detailTables, detailType, table.concat(rest));
        }
      } else {
        table.push(createEmptyRow(1));
      }
      this.reIndexDetail(detailType);
      this.searchByType("", detailType);
    },
    isDeleteDisabled(row, detailType) {
      if (!this.isLocked) return false;
      if (detailType !== "穴位") return true;
      return row.mainType === "1";
    },
    deleteDetailRow(scope, detailType) {
      if (this.isDeleteDisabled(scope.row, detailType)) return;
      const table = this.getDetailTable(detailType);
      const index = scope.row.id - 1;
      if (index === 0 && table.length === 1) return;
      table.splice(index, 1);
      this.reIndexDetail(detailType);
    },
    async find(scope, detailType) {
      const row = scope.row;
      if (!row.acuid) return;
      try {
        let res;
        if (detailType === "经络") {
          res = await getMerD({ merid: row.acuid });
        } else if (detailType === "耳穴") {
          res = await getAcuMeridianDetail(row.acuid);
        } else {
          res = await getAcupointD({ acuid: row.acuid });
        }
        if (res.code === 0 || res.ResultCode === 0) {
          this.detailData = res.data || res.Data || {};
          this.detailType = detailType;
          this.showDetailDialog = true;
        }
      } catch (e) {
        console.error("获取详情失败", e);
      }
    },
    copyDetailRow(scope, detailType) {
      const table = this.getDetailTable(detailType);
      const copy = { ...scope.row, id: 1 };
      const index = scope.row.id;
      table.splice(index, 0, copy);
      this.reIndexDetail(detailType);
    },
    reIndexDetail(detailType) {
      const table = this.getDetailTable(detailType);
      table.forEach((item, index) => {
        item.id = index + 1;
      });
    },

    // ========== 底部统计 ==========
    // 仅更新价格，不重新计算 singleCount（用于用户手动修改单次数量时）
    updatePrice() {
      const price = this.currentUnitPrice || this.unitPrice || 0;
      this.singlePrice = (this.singleCount * price).toFixed(2);
      this.coursePrice = (
        this.treatCount * parseFloat(this.singlePrice)
      ).toFixed(2);
      this.saveCurrentTabData();
      let total = 0;
      Object.values(this.prescriptionDataMap).forEach((d) => {
        total += parseFloat(d.coursePrice) || 0;
      });
      this.totalPrice = total.toFixed(2);
      this.emitStatistics();
    },
    // 根据详情重新计算 singleCount 并更新价格（用于穴位详情变化时）
    calcPrice() {
      const price = this.currentUnitPrice || this.unitPrice || 0;
      const totalFromDetails = this.calcTotalCount();
      if (totalFromDetails > 0 && !this._isLoadingTab) {
        this.singleCount = totalFromDetails;
      }
      this.singlePrice = (this.singleCount * price).toFixed(2);
      this.coursePrice = (
        this.treatCount * parseFloat(this.singlePrice)
      ).toFixed(2);
      this.saveCurrentTabData();
      let total = 0;
      Object.values(this.prescriptionDataMap).forEach((d) => {
        total += parseFloat(d.coursePrice) || 0;
      });
      this.totalPrice = total.toFixed(2);
      this.emitStatistics();
    },
    calcTotalCount() {
      let total = 0;
      const validTypes = ["穴位", "经络", "耳穴", "部位", "其他详情"];
      validTypes.forEach((type) => {
        const table = this.detailTables[type];
        if (table) {
          table.forEach((row) => {
            if (row.acuid || row.name) {
              total += row.count || 0;
            }
          });
        }
      });
      return total;
    },
    emitStatistics() {
      this.$emit("update:statistics", {
        operationGuide: this.operationGuide,
        singleCount: this.singleCount,
        treatCount: this.treatCount,
        frequency: this.frequency,
        frequencyUnit: this.frequencyUnit,
        singlePrice: this.singlePrice,
        coursePrice: this.coursePrice,
        totalPrice: this.totalPrice,
      });
    },
    validate() {
      if (!this.prescriptions.length) {
        this.$message.warning("请先新增处方");
        return false;
      }
      if (this.detailRequired && this.innerDetailTypes.length === 0) {
        this.$message.warning("请至少勾选一个详情类型");
        return false;
      }
      if (!this.operationGuide.trim()) {
        this.$message.warning("请输入操作指南");
        return false;
      }
      if (!this.singleCount || this.singleCount <= 0) {
        this.$message.warning("请输入单次数量");
        return false;
      }
      return true;
    },
    handleSave() {
      if (!this.validate()) return;
      this.saveLoading = true;
      const treatmentList = this.buildTreatmentList();
      const firstP = this.prescriptions[0] || {};
      const institutionInfo = {
        ygtid: firstP.ygtid || "",
        departmentId: firstP.departmentId || "",
        stitutionsId: firstP.stitutionsId || "",
        stitutionsName: firstP.stitutionsName || "",
      };
      this.$emit("save", treatmentList, institutionInfo);
    },
    saveDone() {
      this.saveLoading = false;
    },
    buildTreatmentList() {
      this.saveCurrentTabData();
      const DETAIL_TYPE_MAP = {
        穴位: "1",
        经络: "2",
        耳穴: "3",
        部位: "4",
        其他详情: "5",
      };
      const TYPE_TO_FIELD = {
        穴位: "detailPoint",
        经络: "detailMeridian",
        耳穴: "detailEarPoint",
        部位: "detailBodyPart",
        其他详情: "detailOther",
      };

      return this.prescriptions.map((p, index) => {
        const d = this.prescriptionDataMap[index] || createPrescriptionData();

        const detailPoint = [];
        const detailMeridian = [];
        const detailEarPoint = [];
        const detailBodyPart = [];
        const detailOther = [];
        const detailNone = [];
        const detailArrays = {
          穴位: detailPoint,
          经络: detailMeridian,
          耳穴: detailEarPoint,
          部位: detailBodyPart,
          其他详情: detailOther,
        };

        Object.keys(detailArrays).forEach((type) => {
          const table = d.detailTables[type] || [];
          table.forEach((row) => {
            if (row.acuid || row.name) {
              detailArrays[type].push({
                acupoint: type === "穴位" ? row.mainType || "0" : "0",
                name: row.acuname || row.name || "",
                num: row.count || 1,
                pointCode: "",
                pointId: row.acuid || "",
                remark: row.remark || "",
                seqn: String(row.id || ""),
                type: DETAIL_TYPE_MAP[type] || "1",
              });
            }
          });
        });
        return {
          treatItemId: p.itemId,
          treatItemName: p.itemName,
          treatClass: p.classify || "",
          isUpdate: d.innerIsEditable || "1",
          singleQty: d.singleCount || 0,
          singleAmount: parseFloat(d.singlePrice) || 0,
          treatNum: d.treatCount || 0,
          courseAmount: parseFloat(d.coursePrice) || 0,
          frequency:
            d.frequency && d.frequencyUnit
              ? `${d.frequency}天${d.frequencyUnit}次`
              : "",
          useExplain: d.operationGuide || "",
          pointMatchGuide: "",
          seqn: index + 1,
          ownerType: "1",
          detailPoint,
          detailMeridian,
          detailEarPoint,
          detailBodyPart,
          detailOther,
          detailNone: d.innerDetailTypes.includes("无详情")
            ? { description: "" }
            : null,
        };
      });
    },
    // 编辑时 回填组件数据
    loadFromServerData(treatmentList) {
      if (!Array.isArray(treatmentList) || !treatmentList.length) return;

      const TYPE_VALUE_MAP = {
        "1": "穴位",
        "2": "经络",
        "3": "耳穴",
        "4": "部位",
        "5": "其他详情",
        "6": "无详情",
      };

      this.prescriptions = [];
      this.prescriptionDataMap = {};

      treatmentList.forEach((item, index) => {
        const unitPrice = Number(item.price) || 0;
        const pricingUnit = item.basisStitutionsnondrug?.pricingUnit || "";
        this.prescriptions.push({
          category: "",
          categoryLabel: "",
          itemId: item.treatItemId || "",
          itemName: item.treatItemName || "",
          price: unitPrice,
          pricingUnit: pricingUnit,
          singleNumber: "",
          countCoefficient: 1,
          minTreatmentDuration: 0,
          detailCumulative: "",
        });

        const allDetails = [].concat(
          item.detailPoint || [],
          item.detailMeridian || [],
          item.detailEarPoint || [],
          item.detailBodyPart || [],
          item.detailOther || [],
        );

        // 按 type 分组到 detailTables
        const detailTables = {
          穴位: [],
          经络: [],
          耳穴: [],
          部位: [],
          其他详情: [],
          无详情: [],
        };
        const activeTypes = new Set();

        if (
          item.detailNone !== null &&
          item.detailNone !== undefined &&
          typeof item.detailNone === "object" &&
          !Array.isArray(item.detailNone)
        ) {
          activeTypes.add("无详情");
        }

        allDetails.forEach((d) => {
          const typeName = TYPE_VALUE_MAP[d.type] || "";
          if (typeName && detailTables[typeName]) {
            activeTypes.add(typeName);
            detailTables[typeName].push({
              id: detailTables[typeName].length + 1,
              acuid: d.pointId || "",
              acuname: d.name || "",
              name: d.name || "",
              count: d.num || 1,
              remark: d.remark || "",
              mainType: d.acupoint || "1",
            });
          }
        });

        ["穴位", "经络", "耳穴", "部位", "其他详情"].forEach((type) => {
          if (detailTables[type].length === 0) {
            detailTables[type] = [createEmptyRow(1)];
          }
        });
        if (!detailTables["无详情"]) {
          detailTables["无详情"] = [];
        }

        let parsedFreqDays = undefined;
        let parsedFreqTimes = undefined;
        if (item.frequency) {
          const match = String(item.frequency).match(/(\d+)天(\d+)次/);
          if (match) {
            parsedFreqDays = parseInt(match[1], 10);
            parsedFreqTimes = parseInt(match[2], 10);
          }
        }

        // 构造 tab 数据
        this.prescriptionDataMap[index] = {
          detailTables,
          innerIsEditable: item.isUpdate || "1",
          innerDetailTypes: activeTypes.size > 0 ? [...activeTypes] : ["穴位"],
          detailRequired: item.basisStitutionsnondrug?.detailIsnull === "1",
          operationGuide: item.useExplain || "",
          singleCount: item.singleQty || 0,
          treatCount: item.treatNum || 1,
          frequency: parsedFreqDays,
          frequencyUnit: parsedFreqTimes,
          singlePrice: String(item.singleAmount || "0.00"),
          coursePrice: (
            (item.treatNum || 1) * (item.singleAmount || 0)
          ).toFixed(2),
          totalPrice: "0.00",
          currentUnitPrice: unitPrice,
        };
      });

      this.activeIndex = 0;
      this.loadTabData(0);

      // 疗程金额
      let total = 0;
      Object.values(this.prescriptionDataMap).forEach((d) => {
        total += parseFloat(d.coursePrice) || 0;
      });
      this.totalPrice = total.toFixed(2);

      this.$emit("prescriptions-change", this.prescriptions);
    },
    getData() {
      if (!this.validate()) return null;
      this.saveCurrentTabData();
      return {
        prescriptions: this.prescriptions.map((p, i) => {
          const d = this.prescriptionDataMap[i] || createPrescriptionData();
          return {
            ...p,
            isEditable: d.innerIsEditable,
            detailTypes: d.innerDetailTypes,
            detailRequired: d.detailRequired,
            detailTables: d.detailTables,
            acupoints: (d.detailTables["穴位"] || []).filter(
              (item) => item.acuid,
            ),
            statistics: {
              operationGuide: d.operationGuide,
              singleCount: d.singleCount,
              treatCount: d.treatCount,
              frequency: d.frequency,
              frequencyUnit: d.frequencyUnit,
              singlePrice: d.singlePrice,
              coursePrice: d.coursePrice,
              totalPrice: d.totalPrice,
            },
          };
        }),
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.recipe-acupoint-wrapper {
  .top-btns {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
    flex-shrink: 0;
  }
}

// 处方 tab 列表
.prescription-tabs {
  display: flex;
  margin-bottom: 10px;
  flex-shrink: 0;

  .tab-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 14px;
    color: #666;
    background: #f5f7fa;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 6px;
    transition: all 0.25s;

    &:hover {
      color: #5386f6;
      background: #e8eefb;
    }

    &.active {
      background: #5386f6;
      color: #fff;

      &:hover {
        background: #4078f0;
      }

      .tab-close {
        color: rgba(255, 255, 255, 0.7);

        &:hover {
          color: #fff;
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }

    .tab-name {
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tab-close {
      margin-left: 8px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      border-radius: 50%;
      font-size: 14px;
      color: #999;
      transition: all 0.2s;

      &:hover {
        background: rgba(0, 0, 0, 0.1);
        color: #ff6245;
      }
    }
  }
}

.recipe-acupoint {
  border: 2px solid #dedede;
  padding: 7px 0 0;
  display: flex;
  flex-direction: column;

  // 工具栏
  .table-toolbar {
    margin-bottom: 10px;
    padding: 0 5px;
    flex-shrink: 0;

    .toolbar-item {
      margin-right: 30px;
      margin-bottom: 5px;

      span {
        font-size: 14px;
        color: #333;
        white-space: nowrap;
      }
    }
  }

  // 滚动容器
  .table-container {
    padding: 0 5px;
    flex: 1;
    min-height: 0;
    overflow: auto;
  }

  .no-data-tip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    padding: 40px 0;
  }

  // 详情表格区域
  .detail-table-section {
    margin-bottom: 10px;

    .detail-section-label {
      display: inline-block;
      padding: 2px 12px;
      border: 1px solid #ff6245;
      border-radius: 4px;
      color: #ff6245;
      font-size: 13px;
      margin-bottom: 6px;
    }
  }

  // 配穴表格
  .table-show {
    width: 100%;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .table-left {
      flex: 0 0 49.9%;
      overflow-y: auto;
      border: 1px solid #dedede;
      box-sizing: border-box;
    }
  }

  // 底部统计
  .table-bottom {
    flex-shrink: 0;
    padding: 0 5px;
    margin-top: 5px;

    .table-b-header {
      .header-about {
        .item {
          margin-right: 20px;
          margin-bottom: 10px;

          span {
            font-size: 14px;
            color: #333;
            white-space: nowrap;
          }
        }
      }
    }
  }

  .stat-row {
    .stat-field {
      margin-right: 50px;
      margin-bottom: 5px;

      span {
        font-size: 14px;
        color: #333;
        white-space: nowrap;
      }

      .stat-unit {
        margin: 0 4px;
      }
    }
  }

  .operate {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    img {
      width: 16px;
    }
  }
}

.recipe-acupoint ::v-deep .el-table .cell {
  text-align: center;
}

.recipe-acupoint ::v-deep .el-select {
  width: 100%;
}

.recipe-acupoint ::v-deep .el-table td {
  padding: 2px 0;
}

.recipe-acupoint ::v-deep .el-table th {
  padding: 2px 0;
}

.recipe-acupoint .table-show .table-left::v-deep .el-table__empty-block {
  min-height: 33px !important;
  height: 33px !important;
}

// 底部金额
.table-b-bottom {
  flex-shrink: 0;
  padding: 10px;
  border-top: 2px solid #dedede;
  margin-top: 5px;

  .t-b-l-item {
    font-size: 14px;
    color: #333;
    margin-right: 20px;

    span {
      color: #ff6245;
    }
  }
}

// 详情弹窗样式（scoped 内）
.drug-body {
  padding: 10px;

  .drug-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;

    > span {
      min-width: 80px;
      font-size: 14px;
      color: #333;
      text-align: right;
      margin-right: 10px;
      flex-shrink: 0;
    }

    > div {
      flex: 1;
      font-size: 14px;
      color: #666;
      word-break: break-all;
      line-height: 1.6;
    }

    .detail-img {
      img {
        max-width: 100%;
        max-height: 300px;
      }
    }
  }
}
</style>

<style lang="scss">
.add-prescription-dialog {
  margin: 0 auto;

  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    padding: 18px;
  }

  .add-dialog-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    background: #5386f6;
    position: relative;

    span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #fff;
    }

    .close-btn {
      transform: rotate(45deg);
      color: #fff;
      position: absolute;
      top: -13px;
      right: 20px;
      font-size: 44px;
      cursor: pointer;
    }
  }

  .add-dialog-body {
    min-height: 350px;

    .add-form-row {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .label {
        font-size: 14px;
        color: #333;
        white-space: nowrap;
        min-width: 100px;
        text-align: right;
      }
    }
  }

  .add-dialog-btns {
    display: flex;
    justify-content: center;
    margin-top: 20px;

    .confirm-btn {
      width: 108px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #5386f6;
      color: #fff;
      border-radius: 3px;
      font-size: 18px;
      cursor: pointer;
    }
  }
}

.detail-dialog {
  margin: 0 auto;

  .el-dialog__header {
    padding: 0;
    background: #5386f6;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }

  .el-dialog__title {
    font-size: 16px;
    color: #fff;
  }

  .el-dialog__headerbtn {
    top: 8px;
    right: 10px;
    font-size: 22px;
    .el-dialog__close {
      color: #fff;
      font-size: 22px;
    }
  }

  .el-dialog__body {
    padding: 18px;
    max-height: 75vh;
    overflow-y: auto;
  }

  .drug-body {
    padding: 10px;

    .drug-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 12px;

      > span {
        min-width: 80px;
        font-size: 14px;
        color: #333;
        text-align: right;
        margin-right: 10px;
        flex-shrink: 0;
      }

      > div {
        flex: 1;
        font-size: 14px;
        color: #666;
        word-break: break-all;
        line-height: 1.6;
      }

      .detail-img {
        img {
          max-width: 100%;
          max-height: 300px;
        }
      }
    }
  }
}
</style>