<template>
    <el-dialog title="打印预览" append-to-body :modelValue="showPrint" fullscreen width="85%" 
      @close="closeDialog" :custom-class="isPrint ? 'noprint' : 'rbdyBox'">
      <!-- @click="printData" -->
        <el-button  v-print="printConfig"   type="primary" class="printButton no-print">打 印</el-button>
        <div  v-loading="loading" id="printMe" ref="printContent" class="printBox">
          <!-- <div class="printTitle">
            <div style="text-align:left;">JONHON受控</div>
            <div style="width: 88%;text-align:center;">热表分厂质量记录卡</div> 
          </div> -->
          <div class="fixTopLeft">JONHON受控</div>
          <div class="printTitle">热表分厂质量记录卡</div>
          <div class="tableNo">表号：</div>
          <table id="cus-table" cellspacing="0" style="width:100%">
            <template v-if="modelOne!= null && modelOne.dsPart!= null">
              <tr>
                <td colspan="1">零件号</td>
                <td colspan="2">{{modelOne.dsPart.partCode || '/'}}</td>
                <td colspan="1">产品型号</td>
                <td colspan="2">{{ modelOne.dsPart.productType || '/' }}</td>
                <td colspan="1">生产标识</td>
                <td colspan="2">{{modelOne.dsPart.prodIdent || '/'}}</td>
              </tr>
               <tr>
                <td colspan="1">批次号</td>
                <td colspan="2">{{modelOne.dsPart.batchNo || '/'}}</td>
                <td colspan="1">名称</td>
                <td colspan="2">{{modelOne.dsPart.partName || '/'}}</td>
                <td colspan="1">数量</td>
                <td colspan="2">{{ modelOne.dsPart.qty || '/' }}</td>
              </tr>
             <tr>
                <td colspan="1">硬度</td>
                <td colspan="5">{{modelOne.dsPart.hardness || '/'}}</td>
                <td colspan="1">零件面积(dm²)</td>
                <td colspan="2">{{ modelOne.dsPart.area || '/' }}</td>
              </tr>
               <tr>
                <td  colspan="1">镀种</td>
                <td colspan="5">{{ modelOne.dsPart.plate || '/' }}</td>
                <td  colspan="1">材料</td>
                <td colspan="2">{{ modelOne.dsPart.material || '/' }}</td>
              </tr>
             <tr>
                <td colspan="1">工艺路线</td>
                <td colspan="8">{{ modelOne.dsPart.craftWay || '/' }}</td>
              </tr>
              <tr>
                <td colspan="1">质量信息</td>
                <td colspan="8">{{ modelOne.dsPart.keyInfo || '/' }}</td>
              </tr>
            </template>
           <template v-if="modelTwo && modelTwo.length>0">
              <tr>
                <td colspan="9" style="font-size:21px;">生产过程</td>
              </tr>
              <template v-for="(item,index) in modelTwo" >
                <tr v-if="index != 0" style="height: 20px;"></tr>
                <tr>
                  <td colspan="9" style="font-size:16px;">
                    {{item.orders}} - {{item.procedureSet.ppsName}} 工序详情
                  </td>
                </tr>
                 <tr v-if="item.selfInspection && JSON.stringify(item.selfInspection) != '{}'">
                  <td colspan="1">自检</td>
                  <td colspan="4">{{item.selfInspection.content}}</td>
                  <td colspan="1">结论</td>
                  <td colspan="3">{{item.selfInspection.conclusion}}</td>
                </tr>
                <template v-if="item.auditFile && JSON.stringify(item.auditFile) != '{}'">
                    <tr>
                      <td colspan="5">工艺文件编号/版本号</td>
                      <td colspan="4">{{item.auditFile.papers || '/'}}</td>
                    </tr>
                    <tr>
                      <td colspan="5">CPS文件编号/版本号</td>
                      <td colspan="4">{{item.auditFile.referenceFile || '/'}}</td>
                    </tr>
                </template>
                <tr v-if="(item.gjCode && !item.fbCode && !item.deviceCode) || item.fbCode">
                  <td colspan="1">操作者</td>
                  <td colspan="1">{{item.createMan || '/'}}</td>
                  <td colspan="1" v-if="item.gjCode && !item.fbCode && !item.deviceCode ">挂具编号</td>
                  <td colspan="1" v-if="item.gjCode && !item.fbCode && !item.deviceCode">{{item.gjCode || '/'}}</td>
                  <td colspan="1" v-if="item.fbCode">飞拔编号</td>
                  <td colspan="1" v-if="item.fbCode">{{item.fbCode || '/'}}</td>
                  <td colspan="1" v-if="item.procedureSet.ppsName=='荧光检测'">
                    {{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}
                  </td>
                  <td v-else>{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}</td>
                  <template v-if="item.procedureSet.ppsName=='荧光检测'">
                    <td colspan="4"><img :src="testManImg(index) ? testManImg(index):'/'" style="width:70px;height:25px;margin:6px 0 6px 0"></br>{{ item.factEndTime || '/' }}</td>
                  </template>
                  <td colspan="4" v-else>
                    {{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : (testMan(index) ? (testMan(index) + ' / '+item.factEndTime):'/') }}
                    <!-- 曹鹏飞1/2025-06-28 -->
                  </td>
                </tr>
                <tr v-else>
                  <td colspan="1">操作者</td>
                  <td colspan="4">{{item.createMan || '/'}}</td>
                  <td colspan="1" v-if="item.procedureSet.ppsName=='荧光检测'">
                    {{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}
                  </td>
                  <td v-else>{{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : '检验员确认' }}</td>
                  <template v-if="item.procedureSet.ppsName=='荧光检测'">
                    <td colspan="3"><img :src="testManImg(index) ? testManImg(index):'/'" style="width:70px;height:25px;margin:6px 0 6px 0"></br>{{ item.factEndTime || '/' }}</td>
                  </template>
                  <td colspan="3" v-else>
                    {{ (item.procedureSet.ppsName.indexOf('检验') != -1 || item.procedureSet.ppsName == '镀后接收') ? '/' : (testMan(index) ? (testMan(index) + ' / '+item.factEndTime):'/') }}
                    <!-- 曹鹏飞2/2025-06-28 -->
                  </td>
                </tr>
                 <tr v-if="item.deviceCode && item.deviceCode != ''">
                  <td colspan="1">设备编号</td>
                  <td colspan="4">{{item.deviceCode || '/'}}</td>
                  <td colspan="1">有效期</td>
                  <td colspan="3"></td>
                </tr>
                <tr v-if="item.slotList && item.slotList.length>0">
                  <td colspan="9" >同槽信息</td>
                </tr>
               <tr v-if="item.tankInfo && JSON.stringify(item.tankInfo) != {}">
                  <td colspan="1">掺镀件面积(dm²)</td>
                  <td colspan="2">{{item.tankInfo.cdjArea}}</td>
                  <td colspan="1">陪镀件面积(dm²)</td>
                  <td colspan="1">{{item.tankInfo.pdjArea}}</td>
                  <td colspan="1">挂具面积(dm²)</td>
                  <td colspan="3">{{item.tankInfo.gjArea}}</td>
                </tr>
               <template v-if="item.slotList && item.slotList.length>0">
                  <tr>
                    <td colspan="1">同槽编号</td>
                    <td colspan="2">零件号</td>
                    <td colspan="1">批次号</td>
                    <td>数量</td>
                    <td>生产标识</td>
                    <td>面积(dm²)</td>
                    <td colspan="2">总面积(dm²)</td>
                  </tr>
                  <tr v-for="(slot,index) in item.slotList">
                    <td v-if="index === 0" :rowspan="item.slotList.length">{{slot.mtnCode || '/'}}</td>
                    <td v-if="!slot.cdj" colspan="2">{{slot.partCode || '/'}}</td>
                    <td v-if="!slot.cdj" colspan="1">{{slot.batchNo || '/'}}</td>
                    <td v-if="!slot.cdj" >{{slot.workQty || '/'}}</td>
                    <td v-if="!slot.cdj" >{{slot.prodIdent || '/'}}</td>
                    <td v-if="!slot.cdj" >{{slot.area || '/'}}</td>
                    <td v-if="slot.cdj" colspan="5">{{slot.cdj}}</td>
                    <td v-if="slot.cdj">{{slot.cdjArea}}</td>
                    <td v-if="index === 0" :rowspan="item.slotList.length" colspan="2">{{slot.sumArea || '/'}}</td>
                  </tr>
                </template>
                 <template v-if="item.dsRbFilePreserveSlotList && item.dsRbFilePreserveSlotList.length>0">
                  <tr >
                    <td colspan="1">槽位/工步</td>
                    <td colspan="4">工艺要求</td>
                    <td colspan="4">实际参数</td>
                  </tr>
                  <template v-for="(itemSlot, indexSlot) in item.dsRbFilePreserveSlotList" :key="itemSlot.slotName + indexSlot">
                    <component
                      :is="getTemplateComponent(itemSlot.rfpsType)"
                      :itemSlot="itemSlot"
                      :indexSlot="indexSlot"
                      :quality="true"
                    />
                  </template>
                </template>
                
                
              </template>
              
            </template>
            
            

          </table>
        </div>
    </el-dialog>
</template>

<script>
import {getWordDetail} from '@/api/qualityManagement/inspectionArchiving/eRecord'
import Templates from "@/views/qualityTemplate/index.js";
import { getTemplateComponent } from '@/utils/templateMapper.js';
import printOrderJson from './printOrder.json';
export default {
    props:{
        showPrint: {
            type: Boolean,
            default: false
        },
        checkedList: {
            type: Array,
            default: () => []
        },
        printType:{
          type:String,
          default:''
        },
        woId:{
          type:String,
          default:''
        },
        rbChecked:{
          type:Array,
          default:() =>[]
        }
    },
    components: {
      ...Templates,
    },
    data(){
        return{
            // printObj: {
            //     id: 'printMe',
            //     popTitle: '打印66',
            //     ignoreClass: 'noprint',
            //     endCallback: (e) => {
            //     console.log(e, 5555);
            //     }
            // },
            printConfig :{
              id: 'printMe',
              // extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css',
              extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
              // preview: true,
            },
            
            dsPart:{},
            modelOne: {
                wo: { pjYieldOrder: {}},
                checkList: [],
                wpList: [
                {
                    prWorkOrder: { pjYieldOrder: {}},
                    procedureSet: {},
                    partCode: '',
                    woCode: ''
                }
                ],
                dsPart: {}
            },
            isPrint:false,
            modelTwo: [
              {
                orders: '0005',ppsName:'上挂',
                Hanger:true,
                selfInspection:{content:"零件表面无油污、锈蚀、磕碰伤、划痕等缺陷",conclusion:"合格"}
              },
              {
                orders: '0010',ppsName:'清洗',
                deviceCode:"9652249",
                qcProduceRunsList:[
                  // {
                  //   insertIndex: "1",
                  //   rfpsType: 2,
                  //   // slotIndex: "1",
                  //   slotName: "超声波除油",
                  //   childrenList:[
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2025/06/28 09:00:49"
                  //     },
                  //     {
                  //       "rfpsId": "2",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "结束",
                  //       "paramValue": "2025/06/28 09:30:49"
                  //     },
                  //     {
                  //       "rfpsId": "2",
                  //       "detailName": "温度（℃）",
                  //       "detailIndex": "1",
                  //       "ask": "40~60",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "参数名称1",
                  //       "paramValue": "55"
                  //     },
                  //   ]
                  // },
                  {
                    insertIndex: "1",
                    rfpsType:22,
                    // slotIndex: "1",
                    slotName: "自来水洗",
                    childrenList:[
                      {
                        "rfpsId": "1",
                        "detailName": "时间（min）",
                        "detailIndex": "1",
                        "ask": "20～40",
                        "rfpdTime": "2026-3-6 18:36:44",
                        "qualified": "合格",
                        "paramName": "开始",
                        "paramValue": "2"
                      },
                      {
                        "rfpsId": "1",
                        "detailName": "时间（min）",
                        "detailIndex": "1",
                        "ask": "20～40",
                        "rfpdTime": "2026-3-6 18:36:44",
                        "qualified": "合格",
                        "paramName": "开始",
                        "paramValue": "2"
                      },
                      {
                        "rfpsId": "1",
                        "detailName": "时间（min）",
                        "detailIndex": "1",
                        "ask": "20～40",
                        "rfpdTime": "2026-3-6 18:36:44",
                        "qualified": "合格",
                        "paramName": "开始",
                        "paramValue": "2"
                      },
                      {
                        "rfpsId": "1",
                        "detailName": "时间（min）",
                        "detailIndex": "1",
                        "ask": "20～40",
                        "rfpdTime": "2026-3-6 18:36:44",
                        "qualified": "合格",
                        "paramName": "开始",
                        "paramValue": "2"
                      },
                      {
                        "rfpsId": "1",
                        "detailName": "时间（min）",
                        "detailIndex": "1",
                        "ask": "20～40",
                        "rfpdTime": "2026-3-6 18:36:44",
                        "qualified": "合格",
                        "paramName": "开始",
                        "paramValue": "2"
                      },
                      // {
                      //   "rfpsId": "1",
                      //   "detailName": "时间（min）",
                      //   "detailIndex": "1",
                      //   "ask": "20～40",
                      //   "rfpdTime": "2026-3-6 18:36:44",
                      //   "qualified": "合格",
                      //   "paramName": "开始",
                      //   "paramValue": "2"
                      // },
                      // {
                      //   "rfpsId": "1",
                      //   "detailName": "时间（min）",
                      //   "detailIndex": "1",
                      //   "ask": "20～40",
                      //   "rfpdTime": "2026-3-6 18:36:44",
                      //   "qualified": "合格",
                      //   "paramName": "开始",
                      //   "paramValue": "2"
                      // },
                      // {
                      //   "rfpsId": "1",
                      //   "detailName": "时间（min）",
                      //   "detailIndex": "1",
                      //   "ask": "20～40",
                      //   "rfpdTime": "2026-3-6 18:36:44",
                      //   "qualified": "合格",
                      //   "paramName": "开始",
                      //   "paramValue": "2"
                      // },
                      // {
                      //   "rfpsId": "1",
                      //   "detailName": "时间（min）",
                      //   "detailIndex": "1",
                      //   "ask": "20～40",
                      //   "rfpdTime": "2026-3-6 18:36:44",
                      //   "qualified": "合格",
                      //   "paramName": "开始",
                      //   "paramValue": "2"
                      // },
                      // {
                      //   "rfpsId": "1",
                      //   "detailName": "时间（min）",
                      //   "detailIndex": "1",
                      //   "ask": "20～40",
                      //   "rfpdTime": "2026-3-6 18:36:44",
                      //   "qualified": "合格",
                      //   "paramName": "开始",
                      //   "paramValue": "2"
                      // },
                      // {
                      //   "rfpsId": "1",
                      //   "detailName": "时间（min）",
                      //   "detailIndex": "1",
                      //   "ask": "20～40",
                      //   "rfpdTime": "2026-3-6 18:36:44",
                      //   "qualified": "合格",
                      //   "paramName": "开始",
                      //   "paramValue": "2"
                      // },
                      // {
                      //   "rfpsId": "1",
                      //   "detailName": "时间（min）",
                      //   "detailIndex": "1",
                      //   "ask": "20～40",
                      //   "rfpdTime": "2026-3-6 18:36:44",
                      //   "qualified": "合格",
                      //   "paramName": "开始",
                      //   "paramValue": "2"
                      // },

                    ]
                  },
                  // {
                  //   insertIndex: "1",
                  //   rfpsType: 1,
                  //   // slotIndex: "1",
                  //   slotName: "超声波除油",
                  //   childrenList:[
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2"
                  //     },
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2"
                  //     },
                  //   ]
                  // },
                  // {
                  //   insertIndex: "1",
                  //   rfpsType: 8,
                  //   // slotIndex: "1",
                  //   slotName: "超声波除油",
                  //   childrenList:[
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2"
                  //     },
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2"
                  //     },
                  //   ]
                  // },
                  // {
                  //   insertIndex: "1",
                  //   rfpsType: 3,
                  //   // slotIndex: "1",
                  //   slotName: "超声波除油",
                  //   childrenList:[
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2"
                  //     },
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "结束",
                  //       "paramValue": "2"
                  //     },
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2"
                  //     },
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "20～40",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "结束",
                  //       "paramValue": "2"
                  //     },
                  //   ]
                  // }
                ]
              },
              {
                orders: '0020',ppsName:'挂镀金',
                deviceCode:"9652249",
                tankInfo:{
                  cdjArea:0,
                  slotList:[
                    {
                      slotNo:"B- BD2025062814474772",
                      partCode:'21E8-570-1122-L36',
                      batchNo:'Y1702506402'
                    },
                    {
                      slotNo:"B- BD2025062814474772",
                      partCode:'21E8-570-1122-L37',
                      batchNo:'Y1702506402'
                    },
                    {
                      slotNo:"B- BD2025062814474772",
                      partCode:'21E8-570-1122-L38',
                      batchNo:'Y1702506402',
                    }
                  ]
                },
              }
            ],
            modelThree: { checkList: [], procedureSet: {}},
            modelFour: { procedureSet: {}, prWorkOrder: { pjYieldOrder: {}}},
            modelFive: [],
        }
    },
    created(){
      // const { modelOne, modelTwo, modelThree, modelFour, modelFive } =
      //   printOrderJson.data;
      // this.modelOne = modelOne
      // this.modelTwo = modelTwo
      // this.modelThree = modelThree
      // this.modelFour = modelFour;
      // this.modelFive = modelFive;
      
      getWordDetail({
        woId:this.woId,
        moduleList:this.rbChecked,
        planList:this.checkedList
      }).then(res =>{
          console.log('res----------',res)
      })
      
    },
    methods:{
      // 获取本道工序下第一个检验工序第一个试验项目的检验员
      testMan(index) {
        let testWorkPlan = null;
        for (var i = index; i < this.modelTwo.length; i++) {
          if (this.modelTwo[i].procedureSet.ppsName.indexOf('检验') != -1) {
            if (testWorkPlan == null) {
              testWorkPlan = this.modelTwo[i];
              if (this.modelThree && this.modelThree.checkList) {
                const item = this.modelThree.checkList.find(
                  (item) =>
                    item.testOrders.indexOf(testWorkPlan.orders + '-') != -1
                );
                
                let checkInfo = this.modelTwo[i].procedureSet.ppsName=='荧光检测'?item.imgUrl:item.checkName
                return checkInfo;
              } else {
                return null;
              }
            }
          }
        }
      },
      testManImg(index) {
        let testWorkPlan = null;
        console.log(9999999,this.modelTwo[index],index)
        return this.modelTwo[index].workerImgUrl;
      },
      getTemplateComponent(type) {
        const componentName = getTemplateComponent(type);
        return componentName;
      },
      printData(){
        // exportEchartsToPdf('printMe','热表分厂质量记录卡')
        // window.print()

        const overflowInfo = this.checkPrintOverflow();
        console.log('打印页数:', overflowInfo.pageCount);
        
        if (overflowInfo.isOverflow) {
          this.addPageBreaks();
        }
        
        window.print();
        
        // 打印后清理分页提示（可选）
        setTimeout(() => {
          this.removePageBreaks();
        }, 1000);
      },
      closeDialog(){
        this.$emit('closeDialog');
      },
       // 判断内容是否超出 A4 纸高度
      checkPrintOverflow() {
        const A4_HEIGHT = 297; // A4 纸高度 (mm)
        const PRINT_MARGIN = 20; // 上下边距 (mm)
        // const AVAILABLE_HEIGHT = (A4_HEIGHT - PRINT_MARGIN) * 3.78; // 转换为像素 (1mm ≈ 3.78px)
        const AVAILABLE_HEIGHT = 880
        console.log('AVA============',AVAILABLE_HEIGHT)
        
        const printContent = this.$refs.printContent;
        console.log('dom-----------',document.getElementById('printMe'))
        console.log('hei-------',document.getElementById('printMe').offsetHeight)
        console.log('prine---------',printContent)
        if (!printContent) return false;
        
        const contentHeight = printContent.scrollHeight;
        const pageCount = Math.ceil(contentHeight / AVAILABLE_HEIGHT);
        console.log('cont-------------',contentHeight)
        console.log('pageCount-------------',pageCount)
        
        return {
          isOverflow: contentHeight > AVAILABLE_HEIGHT,
          pageCount,
          contentHeight,
          availableHeight: AVAILABLE_HEIGHT
        };
      },
       // 为表格添加分页符
      addPageBreaks() {
        const A4_HEIGHT_PX = 1123; // A4 纸可打印高度像素 (约 297mm - 20mm 边距)
        const table = document.getElementById('cus-table');
        if (!table) return;
        
        const rows = table.querySelectorAll('tr');
        let currentHeight = 0;
        let page = 1;
        
        rows.forEach((row, index) => {
          const rowHeight = row.offsetHeight;
          currentHeight += rowHeight;
          
          // 接近页面底部时添加分页符
          if (currentHeight > A4_HEIGHT_PX * page && index > 0) {
            row.style.pageBreakBefore = 'always';
            page++;
            
            // 可选：添加分页提示行
            this.insertPageBreakRow(table, row, page);
          }
        });
      },
      // 插入分页提示行
      insertPageBreakRow(table, referenceRow, pageNum) {
        const pageBreakRow = document.createElement('tr');
        pageBreakRow.className = 'page-break-tip';
        pageBreakRow.innerHTML = `
          <td colspan="12" style="text-align:right;font-size:12px;color:#666;">
            --- 第 ${pageNum} 页 ---
          </td>
        `;
        referenceRow.parentNode.insertBefore(pageBreakRow, referenceRow);
      },
      // 清理分页提示
      removePageBreaks() {
        const pageBreakTips = document.querySelectorAll('.page-break-tip');
        pageBreakTips.forEach(tip => tip.remove());
        
        const rows = document.querySelectorAll('#cus-table tr');
        rows.forEach(row => {
          row.style.pageBreakBefore = '';
        });
      },
    }
}
</script>

<style lang="scss" >
    .printButton {
      float: right;
      margin-right: 8px;
      margin-top: 16px;

    }
.printBox {
  width: 100%;
  padding: 6px;
  text-align: center;
  .printTitle {
    font-size: 22px;
    font-weight: 700;
    padding: 8px;
    color:#606266
    // margin-bottom: 6px;
  }

  .tableNo{
    text-align: right;
    margin-bottom: 10px;
  }

  table {
    width: 100%;
    table-layout: fixed;
    tr {
      width: 100%;
      // table-layout: fixed;
      page-break-inside: avoid;
      // break-inside: avoid;
    }
    td {
      // width: 11.1%;
      width: 168px;
      height: 30px;
      border: 1px solid #000;
      background: transparent;
      color: #000;
      font-size: 14px;
      text-align: center;
      padding: 0;
      margin: 0;
    }
    // 分页提示行样式
    .page-break-tip {
      page-break-before: always;
      break-before: always;
      height: 20px;
      border: none !important;
    }
  }
}
.fixTopLeft{
  // position: fixed;
  float: left;
  top: 1;
  left: 0;
  font-family: 'SimHei';
  font-size: 24px;
  color: black;
}


@media print {
  /* 隐藏不需要打印的元素：按钮、导航栏、侧边栏等 */
  .no-print, header, footer, .sidebar, button {
    display: none !important;
  }
  @page {
    size: auto;
    margin: 6mm;
  }
}
// @media print { @page { size:21cm 29.7cm } }
</style>
<style lang="scss">
@media print {
  .no-print {
    display: none !important;
  }

  .print-btn {
    display: none !important;
  }
  
  body {
    margin: 0;
    // padding: 20px;
    // font-size: 12pt;
    background: white !important;
  }
  
  @page {
    size: auto;
    margin: 6mm;
  }

  .printBox {
    width: 100% !important;
    overflow: visible !important;
    
    table {
      width: 98% !important;
      table-layout: fixed;
      border-collapse: collapse;
      
      
      tr {
        page-break-inside: avoid;
        // break-inside: avoid;

        td {
          width: 8.1%;

          // &:first-child{
          //   width: 55px;
          // }
        }
      }
    }

    .print-table,
    .print-table td,
    .print-table th {
      border-collapse: collapse !important;
      box-sizing: border-box !important;
      page-break-inside: avoid !important;
    }
  }
}
</style>
