<template>
    <el-dialog title="打印预览" append-to-body :modelValue="showPrint" fullscreen width="85%" 
      @close="closeDialog" :custom-class="isPrint ? 'noprint' : 'rbdyBox'">
        <el-button  @click="printData" type="primary" class="printButton" :class="isPrint ? '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="checkedList[0] && modelOne!= null && modelOne.wo != null">
              <!-- <tr>
                <td>订单号</td>
                <td colspan="4">{{ modelOne.wo.woCode || '/' }}</td>
                <td>使用部门</td>
                <td colspan="3">{{ modelOne.wo.pjYieldOrder.useDept || '/' }}</td>
                <td>单位</td>
                <td colspan="2">3400</td>
              </tr> -->
              <tr>
                <td colspan="2">零件号</td>
                <td colspan="2">21E8-570-1122-L36</td>
                <td colspan="2">产品型号</td>
                <td colspan="2">{{ modelOne.wo.pjYieldOrder.productType || '/' }}</td>
                <td colspan="2">生产标识</td>
                <td colspan="1">JHT</td>
              </tr>
              <tr>
                <td colspan="2">批次号</td>
                <td colspan="2">Y1702506402</td>
                <td colspan="2">名称</td>
                <td colspan="2">Φ5.5焊杯插针</td>
                <td colspan="2">数量</td>
                <td colspan="1">{{ modelOne.wo.pjYieldOrder.poQty || '/' }}</td>
              </tr>
              <tr>
                <!-- <td>材料</td>
                <td colspan="4">{{ modelOne.dsPart.material || '/' }}</td> -->
                <td colspan="2">硬度</td>
                <td colspan="6">111</td>
                <td colspan="2">零件面积(dm²)</td>
                <td colspan="1">{{ modelOne.wo.pjYieldOrder.poArea || '/' }}</td>
                <!-- <td>设备编码</td>
                <td colspan="2">{{ '' || '/' }}</td> -->
              </tr>
              <tr>
                <td  colspan="2">镀种</td>
                <td colspan="6">{{ modelOne.wo.pjYieldOrder.plate || '/' }}</td>
                <td  colspan="2">材料</td>
                <td colspan="1">{{ '' || '/' }}</td>
              </tr>
              <tr>
                <td colspan="2">工艺路线</td>
                <td colspan="9">{{ modelOne.wo.pjYieldOrder.primaryCraft || '/' }}</td>
              </tr>
              <tr>
                <td colspan="2">质量信息</td>
                <td colspan="9">{{ ( modelOne.dsPart.cruxMemo? modelOne.dsPart.cruxMemo :'' +'   '+ modelOne.dsPart.memo?modelOne.dsPart.memo:'') || '/' }}</td>
              </tr>
            </template>
           
            <template v-if="modelTwo && modelTwo.length>0">
              <tr>
                <td colspan="11" style="font-size:21px;font-weight:550;">生产过程</td>
              </tr>
              <template v-for="(item,index) in modelTwo" >
                <tr v-if="index != 0" style="height: 20px;"></tr>
                <tr>
                  <td colspan="11" style="font-size:16px;font-weight:550;">
                    {{item.orders}} - {{item.ppsName}} 工序详情
                  </td>
                </tr>
                <tr v-if="item.selfInspection && JSON.stringify(item.selfInspection) != '{}'">
                  <td colspan="2">自检</td>
                  <td colspan="6">{{item.selfInspection.content}}</td>
                  <td colspan="2">结论</td>
                  <td colspan="1">{{item.selfInspection.conclusion}}</td>
                </tr>
                <tr>
                  <td colspan="5">工艺文件编号/版本号</td>
                  <td colspan="6">010-01796589/Q</td>
                </tr>
                <tr>
                  <td colspan="5">CPS文件编号/版本号</td>
                  <td colspan="6">/</td>
                </tr>
                <tr>
                  <td colspan="2">操作者</td>
                  <td :colspan="item.Hanger ? '2' : '1'">李新乐</td>
                  <td colspan="1">挂具编号</td>
                  <td colspan="1">GDAU</td>
                  <td colspan="2">检验员确认</td>
                  <td colspan="3">曹鹏飞/2025-06-28</td>
                </tr>
                <template v-if="item.slotPosition && item.slotPosition.length != 0">
                  <tr >
                    <td colspan="3">槽位/工步</td>
                    <td colspan="5">工艺要求</td>
                    <td colspan="7">实际参数</td>
                  </tr>
                  <!-- <tr v-for="slot in item.slotPosition" :key="slot.id">
                    <td>{{slot.slotName}}</td>
                  </tr> -->
                  <template v-for="(itemSlot, indexSlot) in item.slotPosition" :key="itemSlot.slotName + indexSlot">
                    <component
                      :is="getTemplateComponent(itemSlot.rfpsType)"
                      :itemSlot="itemSlot"
                      :indexSlot="indexSlot"
                    />
                  </template>
                </template>
                
                
              </template>
              
            </template>
            

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

<script>
import Templates from "@/views/qualityTemplate/index.js";
import { getTemplateComponent } from '@/utils/templateMapper.js';
import { exportEchartsToPdf } from '@/utils/exportPdf'; // 引入工具函数
export default {
    props:{
        showPrint: {
            type: Boolean,
            default: false
        },
        checkedList: {
            type: Array,
            default: () => []
        },
    },
    components: {
      ...Templates,
    },
    data(){
        return{
            // printObj: {
            //     id: 'printMe',
            //     popTitle: '打印66',
            //     ignoreClass: 'noprint',
            //     endCallback: (e) => {
            //     console.log(e, 5555);
            //     }
            // },
            modelOne: {
                wo: { pjYieldOrder: {}},
                checkList: [],
                wpList: [
                {
                    prWorkOrder: { pjYieldOrder: {}},
                    procedureSet: {},
                    partCode: '',
                    woCode: ''
                }
                ],
                dsPart: {}
            },
            isPrint:false,
            modelTwo: [
              {
                orders: '0005',ppsName:'上挂',
                selfInspection:{content:"零件表面无油污、锈蚀、磕碰伤、划痕等缺陷",conclusion:"合格"}
              },
              {
                orders: '0010',ppsName:'清洗',
                slotPosition:[
                  {
                    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: 7,
                  //   slotIndex: "1",
                  //   slotName: "自来水洗",
                  //   childrenList:[
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "1-3",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2"
                  //     },
                  //   ]
                  // },
                  // {
                  //   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: 7,
                  //   slotIndex: "1",
                  //   slotName: "自来水洗",
                  //   childrenList:[
                  //     {
                  //       "rfpsId": "1",
                  //       "detailName": "时间（min）",
                  //       "detailIndex": "1",
                  //       "ask": "1-3",
                  //       "rfpdTime": "2026-3-6 18:36:44",
                  //       "qualified": "合格",
                  //       "paramName": "开始",
                  //       "paramValue": "2"
                  //     },
                  //   ]
                  // },
                ]
              },
            ],
            modelThree: { checkList: [], procedureSet: {}},
            modelFour: { procedureSet: {}, prWorkOrder: { pjYieldOrder: {}}},
        }
    },
    methods:{
      getTemplateComponent(type) {
        const componentName = getTemplateComponent(type);
        return componentName;
      },
      printData(){
        // exportEchartsToPdf('printMe','热表分厂质量记录卡')
        window.print()
      },
      closeDialog(){
        this.$emit('closeDialog');
      },
    }
}
</script>

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

      &.no-print{
        display: none;
      }
    }
.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 {
  tr {
    width: 100%;
    page-break-inside: avoid;
  }
  td {
    width: 9%;
    height: 30px;
    border: 1px solid #000;
    background: transparent;
    color: #000;
    font-size: 14px;
    text-align: center;
    padding: 0;
    margin: 0;
  }
}
}
.fixTopLeft{
  position: absolute;
  top: 1;
  left: 0;
  font-family: 'SimHei';
  font-size: 24px;
  color: black;
}


@media print {
  .noprint, .no-print{
    display: none !important;
  }
  @page {
    size: auto;
    margin: 6mm;
  }
}
// @media print { @page { size:21cm 29.7cm } }
</style>
