web_dist/src/views/hospitalization/nurse-module/PrintInfusionCard.vue

<template>
  <page-layer>
    <template #header>
      <el-select v-model="queryParams.wardCode" style="width: 88px" @change="handleWardChange">
        <el-option v-for="item in userWards" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <span class="ml12">
        执行日期：<el-date-picker v-model="queryParams.executeDate" :clearable="false" style="width: 102px"
          @change="datePickChange"></el-date-picker>
      </span>
      <span class="ml12">床位范围：
        <el-select v-model="queryParams.bedNoStart" style="width: 70px" value-key="bedNo"
          @change="handleStartBedChange">
          <el-option v-for="item in patientBedList" :key="item.bedNo" :value="item">
            {{ item.bedNoLabel }}
            <el-divider direction="vertical"></el-divider>
            <span class="green-text">{{ item.patNo }}</span>
            <el-divider direction="vertical"></el-divider>
            <span class="blue-text">{{ item.patName }}</span>
          </el-option>
        </el-select>
        <span style="margin: 0 4px; font-size: 11px">至</span>
        <el-select v-model="queryParams.bedNoEnd" style="width: 70px" value-key="bedNo" @change="handleEndBedChange">
          <el-option v-for="item in patientBedList" :key="item.bedNo" :value="item"
            :disabled="item.sortNo < queryParams.sortNoStart">
            {{ item.bedNoLabel }}
            <el-divider direction="vertical"></el-divider>
            <span :class="item.sortNo < queryParams.sortNoStart ? 'is-disabled' : 'green-text'">{{ item.patNo }}</span>
            <el-divider direction="vertical"></el-divider>
            <span :class="item.sortNo < queryParams.sortNoStart ? 'is-disabled' : 'blue-text'">{{ item.patName }}</span>
          </el-option>
        </el-select>
      </span>
      <span class="ml12">
        频率：
        <el-select v-model="queryParams.frequency" style="width: 60px">
          <el-option value="ALL" label="全部"></el-option>
          <el-option value="ALWAYS" label="长期"></el-option>
          <el-option value="ONCE" label="临时"></el-option>
        </el-select>
      </span>
      <span class="ml12">
        打印范围：
        <el-select v-model="queryParams.printRange" style="width: 76px">
          <el-option value="ALL" label="全部"></el-option>
          <el-option value="UNPRINTED" label="新增"></el-option>
          <el-option value="PRINTED" label="已打印"></el-option>
        </el-select>
      </span>
      <span class="ml12">
        类型：
        <el-select v-model="queryParams.cardType" @change="handleTypeChange" style="width: 76px">
          <el-option value="INFUSION_CARD" label="输液卡"></el-option>
          <el-option value="BOTTLE_CARD" label="瓶贴"></el-option>
        </el-select>
      </span>
      <!-- <span class="ml12" v-if="queryParams.cardType === 'BOTTLE_CARD'">
        瓶贴类型：
        <el-select v-model="queryParams.bottleCardType" style="width: 76px">
          <el-option :value="2" label="输液"></el-option>
          <el-option :value="7" label="注射"></el-option>
          <el-option value="BOTTLE_CARD" label="雾化"></el-option>
        </el-select>
      </span> -->
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="Search" @click="executeQuery">检索</el-button>
      <el-button type="primary" icon="Printer" @click="execPrint">打印</el-button>
    </template>
    <template #main>
      <div style="display: flex; flex-wrap: wrap" id="infusion_list">
        <div v-if="queryParams.cardType === 'INFUSION_CARD'">
          <div v-for="(item, index) in patientInfusionInfos" :id="item.patInfo.patNo">
            <div class="crad-area"
              style="width: 90%; margin: 8px 12px; padding: 4px; border: 1px solid red ;display: flex;justify-content: center; align-items: center;">
              <infusion-card :drug-groups="item.drugGroups" :pat-info="item.patInfo" :yz-date="queryParams.executeDate"
                :print-date="printDate">
              </infusion-card>
            </div>
          </div>
        </div>
        <div v-else id="print-test">
          <div v-for="(item, index) in patientInfusionInfos" :id="item.patInfo.patNo + '-' + index"
            style="width: 230px;display: inline-block;margin-right: 20px">
            <bottle-card :drugs="item.bottleCardDrugs" :pat-info="item.patInfo" :yz-date="queryParams.executeDate"
              :bottle-group="item.bottleGroup" style="margin-bottom: 10px;">
            </bottle-card>
          </div>
        </div>
        <div class="print-hiden-area" style="margin: 0px 12px">
          <div v-for="(item, index) in printPatientBottleInfos" :id="item.patInfo.patNo + '-' + index + '_print'"
            style="width: 230px;display: inline-block;margin-right: 20px">
            <bottle-card :drugs="item.bottleCardDrugs" :pat-info="item.patInfo" :yz-date="queryParams.executeDate"
              :bottle-group="item.bottleGroup" style="margin-bottom: 10px;">
            </bottle-card>
          </div>
        </div>
      </div>
    </template>
  </page-layer>
</template>

<script setup>
import PageLayer from "@/layout/PageLayer.vue";
import { formatDate, getDatetime, getDate } from "@/utils/date";
import {
  getPatientBeds,
  queryInfusionCardOrBottleCard,
  updatePrintStatus
} from '@/api/inpatient/nurse-module/print-infusion-card'
import InfusionCard from "@/components/inpatient/nurse-module/InfusionCard.vue";
import { ElMessage } from "element-plus";
import { getLodop, initLodop } from "@/utils/c-lodop";
import BottleCard from "@/components/inpatient/nurse-module/BottleCard.vue";
import { getWardsApi } from "@/api/login";

const userWards = ref([])

const patientBedList = ref([])
const printDate = ref(null)

const handleWardChange = (wardCode) => {
  getPatientBeds(wardCode).then(res => {
    patientBedList.value = res
    if (res.length > 0) {
      queryParams.bedNoStart = res[0].bedNoLabel
      queryParams.sortNoStart = res[0].sortNo
      queryParams.bedNoEnd = res[res.length - 1].bedNoLabel
      queryParams.sortNoEnd = res[res.length - 1].sortNo
    } else {
      queryParams.bedNoStart = null
      queryParams.sortNoStart = null
      queryParams.bedNoEnd = null
      queryParams.sortNoEnd = null
    }
  })
}

const queryParams = reactive({
  executeDate: getDate(),
  wardCode: null,
  bedNoStart: null,
  bedNoEnd: null,
  sortNoStart: null,
  sortNoEnd: null,
  frequency: 'ALWAYS',
  printRange: 'UNPRINTED',
  cardType: 'INFUSION_CARD',
  bedNos: []
})

const patientInfusionInfos = ref([])
const printPatientBottleInfos = ref([])

const handleStartBedChange = (bed) => {
  queryParams.bedNoStart = bed.bedNoLabel
  queryParams.sortNoStart = bed.sortNo
}

const handleEndBedChange = (bed) => {
  queryParams.bedNoEnd = bed.bedNoLabel
  queryParams.sortNoEnd = bed.sortNo
}

const handleTypeChange = (val) => {
  // console.log("val",val)
  patientInfusionInfos.value = []
  queryParams.bottleCardType = val == "INFUSION_CARD" ? "" : 2
  // console.log("queryParams",queryParams)
}

const datePickChange = () => {
  patientInfusionInfos.value = []
  queryParams.executeDate = formatDate(queryParams.executeDate)
  console.log("patientInfusionInfos", patientInfusionInfos.value)
}

const executeQuery = () => {
  patientInfusionInfos.value = []
  queryParams.executeDate = formatDate(queryParams.executeDate)
  queryParams.bedNos = []
  patientBedList.value.forEach(bed => {
    if (bed.sortNo >= queryParams.sortNoStart && bed.sortNo <= queryParams.sortNoEnd) {
      queryParams.bedNos.push(bed.bedNo)
    }
  })
  queryInfusionCardOrBottleCard(queryParams).then(res => {
    nextTick(() => {
      patientInfusionInfos.value = res
      if (queryParams.cardType !== 'INFUSION_CARD' && patientInfusionInfos.value.length > 0) {
        //瓶贴分配药品组号
        patientInfusionInfos.value.forEach(item => {
          let group = patientInfusionInfos.value.filter(citem => citem.patInfo.patNo === item.patInfo.patNo)
          group.forEach((v, vindex) => {
            let target = patientInfusionInfos.value.find(citem => citem.bottleCardDrugs[0].actOrderNo === v.bottleCardDrugs[0].actOrderNo)
            target.bottleGroup = vindex + 1 + "/" + group.length
            // console.log("target",target)
          })
          // console.log("group",group)
          // console.log("index")
        })
        // console.log("patientInfusionInfo  s",patientInfusionInfos.value)
      }
      // for (let i = 0; i < 2; i++) {
      //  patientInfusionInfos.value = [...patientInfusionInfos.value, ...res]
      // }
      // printPatientBottleInfos.value = res
      printDate.value = getDatetime()
    })
  }).catch(() => {
    patientInfusionInfos.value = []
  })
}

const frequencyOptions = [
  {
    //每天两次
    arr: ['Bid', 'Q12H', 'Q12H/单日', 'Q12H/双日', 'bod'
    ],
    add: 1
  },
  {
    //每天三次
    arr: ['Tid', 'Tod'],
    add: 2
  },
  {
    //每天四次
    arr: ['Qid'],
    add: 3
  },
]

const handlePrintByFrequency = () => {
  let result = [...printPatientBottleInfos.value]
  printPatientBottleInfos.value.forEach(item => {
    let frequency = item.bottleCardDrugs[0].frequCode
    let add = 0;
    for (let i = 0; i < frequencyOptions.length; i++) {
      if (frequencyOptions[i].arr.includes(frequency)) {
        add = frequencyOptions[i].add
        break;
      }
    }
    if (add > 0) {
      let index = result.findIndex(citem => citem.bottleCardDrugs[0].actOrderNo === item.bottleCardDrugs[0].actOrderNo);
      for (let i = 0; i < add; i++) {
        let target = { ...item }
        target.patInfo.patNo = target.patInfo.patNo + '_' + i
        result.splice(index, 0, target);
      }
    }
  })
  return result
}

const execPrint = () => {
  const type = queryParams.cardType === 'INFUSION_CARD' ? '输液卡' : '瓶贴卡'
  if (patientInfusionInfos.value.length === 0) {
    ElMessage({
      message: `请先检索${type}。`,
      type: 'warning',
      duration: 2500,
      showClose: true
    })
    return
  }
  let LODOP = getLodop();
  if (queryParams.cardType == 'INFUSION_CARD') {
    let prntContent = document.getElementById("infusion_list").innerHTML
    // console.log("prntContent",prntContent)
    let printHTML = ""
    const printStyle = `<style>td{border: 1px solid black;
    font-size: 12px;padding: 2px;}</style>`
    if (patientInfusionInfos.value.length == 1) {
      let id = queryParams.cardType === 'INFUSION_CARD'
        ? patientInfusionInfos.value[0].patInfo.patNo : patientInfusionInfos.value[0].patInfo.patNo + '-' + i
      printHTML = document.getElementById(id).innerHTML
      LODOP.PRINT_INIT('infusionCard')
      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
      LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printStyle + '<body style:"display: flex;justify-content: center;align-items: center;">' + printHTML + '</body>')
      LODOP.SET_PRINT_STYLE('ItemType', 3)
      LODOP.PREVIEW();
    } else {
      LODOP.PRINT_INIT('infusionCard')
      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
      let PAGE_MAX_HEIGHT = 1050
      let pageHeightNow = 0
      let currentPageHTML = '';
      for (let i = 0; i < patientInfusionInfos.value.length; i++) {
        let info = patientInfusionInfos.value[i]
        let printTarget = document.getElementById(info.patInfo.patNo)
        console.log('printTarget', printTarget)
        if (pageHeightNow + printTarget.offsetHeight > PAGE_MAX_HEIGHT) {
          LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printStyle + currentPageHTML);
          LODOP.NewPage(); // 开启新页
          // 新页初始化：当前行作为新页的第一行
          currentPageHTML = printTarget.innerHTML;
          pageHeightNow = printTarget.offsetHeight;
        } else {
          pageHeightNow += printTarget.offsetHeight
          currentPageHTML += printTarget.innerHTML
        }
        // let info = patientInfusionInfos.value[i]
        // let id = queryParams.cardType === 'INFUSION_CARD'
        //   ? info.patInfo.patNo : info.patInfo.patNo + '-' + i
        // let printCount = queryParams.cardType === 'INFUSION_CARD'
        //   ? 3 : 6
        // // console.log("printCount",printCount)
        // if (i !== 0 && ((i + 1) % printCount == 0 || i == patientInfusionInfos.value.length - 1)) {
        //   // console.log("printIndex",i)
        //   printHTML = document.getElementById(id).innerHTML + printHTML
        //   let printFinal = printStyle + '<body><div style:"width:600px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">' + printHTML + '</div></body>';
        //   console.log("printFinal", printFinal)

        //   // LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm',printStyle + '<body style:"width:800px;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;">' + printHTML + '</body>' )
        //   LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printFinal)
        //   LODOP.SET_PRINT_STYLE('ItemType', 3)
        //   LODOP.PREVIEW();
        //   // LODOP.PRINT()
        //   printHTML = ""
        // } else {
        //   printHTML += document.getElementById(id).innerHTML
        // }
      }
      LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printStyle + currentPageHTML);
      LODOP.PREVIEW()
    }
    updatePrintState()
  } else {
    printPatientBottleInfos.value = [...patientInfusionInfos.value]
    printPatientBottleInfos.value = handlePrintByFrequency()
    // console.log("patientInfusionInfos",patientInfusionInfos.value)
    // console.log("printPatientBottleInfos",printPatientBottleInfos.value)
    nextTick(() => {
      //       LODOP.PRINT_INIT('infusionCard');
      //       LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '');
      //       /* 一行3个，预留间距 */

      //       const printStyle = `<style>
      //   .card-container { display: inline;  } 
      //   td { border: 1px solid black; font-size: 12px; padding: 2px; }
      // </style>`;
      //       const PAGE_MAX_HEIGHT = 1100; // 页面最大高度阈值（px）
      //       let currentPageHTML = printStyle; // 当前页内容
      //       let currentPageTotalHeight = 0; // 当前页累计高度（px）
      //       let currentRowElements = []; // 当前行的元素
      //       let currentRowMaxHeight = 0; // 当前行最高元素高度（px）

      //       printPatientBottleInfos.value.forEach((item, index) => {
      //         const printTarget = document.getElementById(`${item.patInfo.patNo}-${index}_print`);
      //         if (!printTarget) return;

      //         // 获取当前元素高度（px）
      //         const itemHeight = printTarget.offsetHeight;

      //         // 1. 处理当前行：添加元素并更新行最高高度
      //         currentRowElements.push(printTarget);
      //         currentRowMaxHeight = Math.max(currentRowMaxHeight, itemHeight);

      //         // 2. 当行内元素满3个时，计算行高并判断是否分页
      //         if (currentRowElements.length === 3) {
      //           // 计算当前行加入后，页面的总高度
      //           const totalHeightAfterAdd = currentPageTotalHeight + currentRowMaxHeight;

      //           // 3. 判断是否需要分页
      //           if (totalHeightAfterAdd > PAGE_MAX_HEIGHT) {
      //             // 先打印当前页已有的内容
      //             LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
      //             LODOP.NewPage(); // 开启新页

      //             // 新页初始化：当前行作为新页的第一行
      //             currentPageHTML = printStyle;
      //             currentPageTotalHeight = currentRowMaxHeight;
      //           } else {
      //             // 不需要分页，累加当前行高度
      //             currentPageTotalHeight = totalHeightAfterAdd;
      //           }

      //           // 4. 将当前行的3个元素添加到页面HTML
      //           currentRowElements.forEach(el => {
      //             currentPageHTML += `<div class="card-container">${el.outerHTML}</div>`;
      //           });

      //           // 5. 重置行状态，准备下一行
      //           currentRowElements = [];
      //           currentRowMaxHeight = 0;
      //         }
      //       });

      //       // 6. 处理最后一行未填满3个元素的情况
      //       if (currentRowElements.length > 0) {
      //         // 计算剩余行加入后的总高度
      //         const totalHeightAfterAdd = currentPageTotalHeight + currentRowMaxHeight;

      //         // 如果超出页面高度，单独分页
      //         if (totalHeightAfterAdd > PAGE_MAX_HEIGHT) {
      //           LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
      //           LODOP.NewPage();
      //           currentPageHTML = printStyle;
      //           currentPageTotalHeight = currentRowMaxHeight;
      //         } else {
      //           currentPageTotalHeight = totalHeightAfterAdd;
      //         }

      //         // 添加剩余元素到页面
      //         currentRowElements.forEach(el => {
      //           currentPageHTML += `<div class="card-container">${el.outerHTML}</div>`;
      //         });
      //       }

      //       // 7. 添加最后一页内容
      //       if (currentPageHTML) {
      //         LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
      //       }

      //       LODOP.PREVIEW();

      LODOP.PRINT_INIT('infusionCard');
      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '');
      /* 一行3个，使用float布局确保兼容性 */

      const printStyle = `<style>
  .card-row { overflow: hidden; margin-bottom: 10px; } /* 清除浮动并添加行间距 */
  .card-container { 
    float: left; 
    width: 31.5%; 
    box-sizing: border-box; 
    padding: 0 5px; /* 预留间距 */
  } 
  td { border: 1px solid black; font-size: 12px; padding: 2px; }
  /* 最后一个元素清除右侧内边距 */
  .card-container:nth-child(3n) { padding-right: 0; }
  /* 第一个元素清除左侧内边距 */
  .card-container:nth-child(3n+1) { padding-left: 0; }
</style>`;

      const PAGE_MAX_HEIGHT = 840; // 页面最大高度阈值（px）
      let currentPageHTML = printStyle; // 当前页内容
      let currentPageTotalHeight = 0; // 当前页累计高度（px）
      let currentRowHTML = ''; // 当前行的HTML内容
      let currentRowElements = []; // 当前行的元素
      let currentRowMaxHeight = 0; // 当前行最高元素高度（px）

      printPatientBottleInfos.value.forEach((item, index) => {
        const printTarget = document.getElementById(`${item.patInfo.patNo}-${index}_print`);
        if (!printTarget) return;

        // 获取当前元素高度（px）
        const itemHeight = printTarget.offsetHeight;

        // 1. 处理当前行：添加元素并更新行最高高度
        currentRowElements.push(printTarget);
        currentRowMaxHeight = Math.max(currentRowMaxHeight, itemHeight);
        currentRowHTML += `<div class="card-container">${printTarget.outerHTML}</div>`;

        // 2. 当行内元素满3个时，计算行高并判断是否分页
        if (currentRowElements.length === 3) {
          // 包装当前行为一个带清除浮动的容器
          const rowWithClearfix = `<div class="card-row">${currentRowHTML}</div>`;

          // 计算当前行加入后，页面的总高度
          const totalHeightAfterAdd = currentPageTotalHeight + currentRowMaxHeight;

          // 3. 判断是否需要分页
          if (totalHeightAfterAdd > PAGE_MAX_HEIGHT) {
            // 先打印当前页已有的内容
            LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
            LODOP.NewPage(); // 开启新页

            // 新页初始化：当前行作为新页的第一行
            currentPageHTML = printStyle + rowWithClearfix;
            currentPageTotalHeight = currentRowMaxHeight;
          } else {
            // 不需要分页，累加当前行高度并添加到页面
            currentPageHTML += rowWithClearfix;
            currentPageTotalHeight = totalHeightAfterAdd;
          }

          // 5. 重置行状态，准备下一行
          currentRowElements = [];
          currentRowMaxHeight = 0;
          currentRowHTML = '';
        }
      });

      // 6. 处理最后一行未填满3个元素的情况
      if (currentRowElements.length > 0) {
        // 包装当前行为一个带清除浮动的容器
        const rowWithClearfix = `<div class="card-row">${currentRowHTML}</div>`;

        // 计算剩余行加入后的总高度
        const totalHeightAfterAdd = currentPageTotalHeight + currentRowMaxHeight;

        // 如果超出页面高度，单独分页
        if (totalHeightAfterAdd > PAGE_MAX_HEIGHT) {
          LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
          LODOP.NewPage();
          currentPageHTML = printStyle + rowWithClearfix;
          currentPageTotalHeight = currentRowMaxHeight;
        } else {
          currentPageHTML += rowWithClearfix;
          currentPageTotalHeight = totalHeightAfterAdd;
        }
      }

      // 7. 添加最后一页内容
      if (currentPageHTML) {
        LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', currentPageHTML);
      }

      LODOP.PREVIEW();
      printPatientBottleInfos.value = []
      // LODOP.PRINT_INIT('infusionCard')
      // LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
      // let printHTML = "";
      // let pageHeightNow = 0;
      // let pageHeighInRow = 0;
      // let rowCount = 0;
      // let isWarp = false;
      // let isRowHeightNew = true
      // const printStyle = `<style>td{border: 1px solid black;
      //   font-size: 12px;padding: 2px;}</style>`
      // patientInfusionInfos.value.forEach((item, index) => {
      //   let printTarget = document.getElementById(item.patInfo.patNo + '-' + index);
      //   console.log("printTarget", printTarget.offsetHeight)
      //   if (printTarget.offsetHeight > pageHeighInRow) {
      //     pageHeighInRow = printTarget.offsetHeight;
      //     isRowHeightNew = true;
      //   }
      //   // console.log("pageHeighInRow", pageHeighInRow)
      //   // console.log("pageHeightNow", pageHeightNow)
      //   // console.log("HeightAll", pageHeighInRow + pageHeightNow)
      //   if (isWarp) {
      //     isWarp = false
      //     // if(isRowHeightNew)
      //     if (isRowHeightNew && pageHeighInRow + pageHeightNow > 900) {
      //       // console.log("11")
      //       // 此时超出一页
      //       // LODOP.PRINT()
      //       rowCount = 0
      //       LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printStyle + printHTML)
      //       LODOP.NewPage(); // 关键：开启新页
      //       printHTML = printTarget.outerHTML;
      //       pageHeightNow = pageHeighInRow;
      //       // isWarp = true
      //       rowCount = 1; // 重置行计数
      //     } else {
      //       // console.log("2")
      //       // pageHeightNow = pageHeighInRow + pageHeightNow;
      //       printHTML += printTarget.outerHTML;
      //     }
      //   } else {
      //     rowCount++;
      //     isRowHeightNew = false
      //     if (rowCount == 3) {
      //       // 换行
      //       isWarp = true;
      //       rowCount = 0;
      //       isRowHeightNew = true;
      //       pageHeightNow = pageHeighInRow + pageHeightNow;
      //       console.log('pageHeightNow',pageHeightNow)
      //     }
      //     printHTML += printTarget.outerHTML;
      //   }
      // });
      // if (printHTML) {
      //   LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printStyle + printHTML);
      // }
      // let prntContent1 = document.getElementById("print-test").innerHTML
      // let flexStyles = getStyleText('.print-bottle-card-area');
      // // const printStyle = `<style>${flexStyles}td{border: 1px solid black;
      // // font-size: 12px;padding: 2px;}</style>`
      // // let printFinal = printStyle + prntContent1
      // // console.log("prntContent1", prntContent1)
      // // LODOP.ADD_PRINT_HTML('0mm', '0mm', '210mm', '297mm', printFinal)
      // // LODOP.SET_PRINT_STYLE('ItemType', 3)
      // LODOP.PREVIEW();
      updatePrintState()
    });
  }
}

function updatePrintState() {
  const params = {
    cardType: queryParams.cardType,
    orderNos: []
  }

  patientInfusionInfos.value.forEach(info => {
    if (params.cardType === 'INFUSION_CARD') {
      info.drugGroups.forEach(group => {
        params.orderNos.push(group.mainDrug.actOrderNo)
      })
    } else {
      info.bottleCardDrugs.forEach(group => {
        params.orderNos.push(group.actOrderNo)
      })
    }
  })

  nextTick(() => {
    updatePrintStatus(params).then(res => {
      console.log(res)
    })
  })

}

function getStyleText(selector) {
  var sheets = document.styleSheets;
  var styleText = '';
  for (var i = 0; i < sheets.length; i++) {
    try {
      var rules = sheets[i].cssRules || sheets[i].rules;
      if (rules) {
        for (var j = 0; j < rules.length; j++) {
          if (rules[j].selectorText && rules[j].selectorText.includes(selector)) {
            styleText += rules[j].cssText + '\n';
          }
        }
      }
    } catch (e) { /* 可能跨域安全错误 */ }
  }
  return styleText;
}

// J,S,JS,SJ
// -- 小输液卡
// -- 已打印：print_comment like '%S%'
// -- 未打印：isnull(print_comment,'') not like '%S%'
//
// -- 已打印：print_comment like '%J%'
// -- 未打印：isnull(print_comment,'') not like '%J%'
onMounted(() => {
  initLodop()
  getWardsApi().then(res => {
    userWards.value = res
    if (!queryParams.wardCode) {
      queryParams.wardCode = userWards.value[0].value
    }
    handleWardChange(queryParams.wardCode)
  })
})
</script>

<style scoped>
.ml12 {
  margin-left: 12px;
}

.green-text {
  color: green;
}

.blue-text {
  color: #1146f3
}

.is-disabled {
  color: #a8abb2;
}

.crad-area {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.print-bottle-card-area {
  width: 730px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  /* float: left; */
  padding: 15px 5px;
}

.print-hiden-area {
  /* display: none; */
}

@media print {
  .your-flex-container {
    display: flex !important;
    flex-direction: row !important;
    /* 其他必要flex属性 */
  }

  .flex-item {
    flex: 1 !important;
  }

  .print-bottle-card-area {
    width: 700px;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-wrap: wrap;
  }
}
</style>