<template>
  <div class="app-container">
    <el-dialog title="" :visible.sync="printDialogVisible" width="1000px">
      <div>
        <el-form inline  label-width="80px">
          <el-form-item label="补打板次" prop="factory">
            <el-input v-model="idCardsNum" placeholder="请输入" style="width:100px"/>
          </el-form-item> 
          <el-button type="primary" icon="el-icon-check" circle @click="showSupplementPrint()"/>

          <el-form-item label="增打批次" prop="batchCode">
            <el-select
              v-model="batchCode"
              placeholder="请选择批次"
              @change="$forceUpdate()"
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="item in batchCodeOption"
                :key="item.batchCode"
                :label="item.batchCode"
                :value="item.batchCode"
              ></el-option>
            </el-select>
          </el-form-item> 
          <el-form-item label="增打板次" prop="idCardsNumAdd">
            <el-input v-model="idCardsNumAdd" placeholder="请输入" style="width:100px"/>
          </el-form-item> 
          <el-form-item label="增打数量" prop="batchQuantity">
            <el-input v-model="batchQuantity" placeholder="请输入" style="width:100px"/>
          </el-form-item> 
          <el-button type="primary" icon="el-icon-check" circle @click="showAddPrint()"/>
        </el-form>
      </div>

      <div id="printFrom" class="my-print-box">
        <div v-for="(item, index) in printData.idCardList" :key="index">
          <el-form  class="print-card">
            <el-row>
              <el-col :span="7">
                <img src="@/assets/logo/lanjv.png" class="report-logo" />
              </el-col>
            </el-row>
            <el-row>
              <el-col  class="center-text">
                <span>产品标识卡</span>
              </el-col>
            </el-row>
            <div class="custom-divider"></div>
            
            <el-row class="my-print-foot">
              <el-col :offset="1" :span="13">
                <div class="card-div2">产品名称: {{ item.productName  }}</div><br />
                <div class="card-div2">批次号: {{ item.batchCode }}</div><br />
                <div class="card-div2">生产日期: {{ item.productDateStr }}</div><br />
                <div class="card-div2">板次: {{ item.palletNo }}</div><br />
                <div class="card-div2">数量: {{ item.batchQuantity }}</div>
              </el-col>
              <el-col :offset="1" :span="9">
                <canvas :id="'qrcode-' + index" class="qrcode"></canvas>
              </el-col>
            </el-row>
          </el-form>
          <div style="margin-top: 10px;">
            <table align="center" border="1" cellpadding="0" cellspacing="0" width="820">
            <tr class="tr-row"><td class="tr-row-1"></td><td class="tr-row-2"></td></tr>
            <tr class="tr-row"><td class="tr-row-1"></td><td class="tr-row-2"></td></tr>
            <tr class="tr-row"><td class="tr-row-1"></td><td class="tr-row-2"></td></tr>
            </table>
          </div>
          <div v-if="(index + 1) % 1 === 0" class="print-page"></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlePrint(printData)">打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import {
  getIdCardList,
  getBatchCode,
} from '@/api/plan/workorder';
import QRCode from 'qrcode';

export default {
  name: "printID",
  components: {
  },
  data() {
    return {
      idCardsNum: null,//板次
      idCardsNumAdd: null,//增打板次
      batchCode: null,//批次
      batchQuantity: null,//数量
      optType: undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      selectRow: {},
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      printDialogVisible: false,
      // 打印
      printData: {
        printable: "printFrom",
        ignore: ["no-print"],
        workCenter: "暂无数据",
        factory: null,
        idCardList: [],
        //gridStyle:'border: 1px solid lightgray; margin-bottom: -1px;'
      },
      workorderCode: '',
      workorderId: '',
      batchCodeOption: [],
      //工单重新渲染表格
      refreshWorkerTable: true,
      // 表单校验
      rules: {
       
      },
      tableIndex: "tableIndex",
    };
  },
  created() {
  },
  mounted() {
  

  },
  methods: {
      init(workorderCode,workorderId){
        this.workorderCode = workorderCode;
        this.workorderId = workorderId;
        this.idCardsNum = null;
        this.idCardsNumAdd = null;
        this.batchCode = null;
        this.batchQuantity = null;
        this.initBatchCodeselection(this.workorderId);
        this.showSupplementPrint();
      },

    //初始化批次号选择框
    initBatchCodeselection(workorderId){
      getBatchCode(workorderId).then((response) => {
        this.batchCodeOption = response;
      });
    },

    // 打印预览-浏览器打印
    handlePrint(params) {
      printJS({
      printable: params.printable,
      type: params.type || 'html',
      maxWidth: 1500,
      font_size: "", // 设置字体大小
      header: params.header, // '表单',
      targetStyles: ['*'],
      style: `
       body { margin: 10mm; padding: 0; }
        .print-page { page-break-after: always; }
      `,
      ignoreElements: params.ignore || [],
    });
    //打印完成后 版次变为空

    },
    // 打印预览-点击打印预览按钮-补打
   async showSupplementPrint() {
      console.log('执行了补充打印预览');
      let params = {};
      params.addFlag = '0'; //增打标志
      if(this.idCardsNum!=null){
        params.palletNo = this.idCardsNum;
      }
     let response = await getIdCardList({workorderCode:this.workorderCode,...params});
     this.printData.idCardList = response;
     this.$nextTick(() => {
      this.printData.idCardList.forEach((item, index) => {
        const canvas = document.getElementById('qrcode-' + index);
        QRCode.toCanvas(canvas, item.palletCode, { width: 300 , margin:1 }, function (error) {
          if (error) console.error(error);
          console.log('success!');
        });
      });
    })
    },

    // 打印预览-增打
   async showAddPrint() {
      console.log('执行了新增打印预览');
      let params = {};
      if(this.idCardsNumAdd == null || this.batchCode == null || this.batchQuantity == null
         ||this.idCardsNumAdd == '' || this.batchCode == '' || this.batchQuantity == ''
      ){
        this.$modal.msg("您填入的增打信息存在空值！");
        return;
      }else{
        //产品名称  后台返回
        //生产日期 后台返回
        params.batchCode = this.batchCode;//批次号 需要选择
        params.palletNo = this.idCardsNumAdd;//板次
        params.batchQuantity = this.batchQuantity;//数量
        params.addFlag = '1';//增打标志
      }
     let response = await getIdCardList({workorderCode:this.workorderCode,...params});
     this.printData.idCardList = response;
     if(this.printData.idCardList.length == 0){
      this.$modal.msg("该板次已被正常打印，请填入正确板次！");
     }else{
      this.$nextTick(() => {
      this.printData.idCardList.forEach((item, index) => {
        const canvas = document.getElementById('qrcode-' + index);
        QRCode.toCanvas(canvas, item.palletCode, { width: 300 , margin:1 }, function (error) {
          if (error) console.error(error);
          console.log('success!');
          });
        });
      })
      }
    }
  },
};
</script>
<style scoped>
.print-btn {
  margin-bottom: 15px;
  margin-left: 10px;
}

.center-text {
  text-align: center;
  font-size: 50px;
  font-weight: 800;
  color: black;
}

.report-logo {
  margin-top: 15px;
  margin-left: 15px;
  height: 70px;
}

.button-container {
  text-align: right;
  margin-top: 10px;
  margin-right: 10px;
}

.my-print-table {
  font-size: 20px;
}

.my-print-foot {
  font-size: 17px;
}
.my-print-foot2 {
  font-size: 19px;
}

.my-print-box{
  width:100%
}
.custom-divider {
    width: 100%;
    height: 1px;
    background-color: #a5a4a4 !important;
    margin: 20px 0 !important;
    -webkit-print-color-adjust: exact;
  }

.print-page {
  page-break-after: always;
}
@media print {
  .custom-divider {
    width: 100%;
    height: 1px;
    background-color: #a5a4a4 !important;
    margin: 20px 0 !important;
    -webkit-print-color-adjust: exact;
  }
}
.card-div1{
  font-size: 20px;
  font-weight: 600;
  padding-top: 14px;
}
.card-div2{
  font-size: 25px;
  font-weight: 700;
  padding-top: 2px;
  margin-left: 35px;
}
.tr-row {
  height: 35px; 
}
.tr-row-1 {
  width: 246px; 
}
.tr-row-2 {
  width: 574px; 
}
</style>
