<template>
  <div class="productOrderBox">
    <div class="pageTop">
      <div class="titles">生产单</div>
      <div class="titles GOM">GOM</div>
      <div v-if="pageHeader.arrangeCode" class="barcode">
        <div id="qrCode" ref="qrCodeDiv"></div>
        <!-- <vue-barcode
        :value="pageHeader.arrangeCode"
        margin-right="5"
        :display-value="pageHeader.arrangeCode"
        font="bold"
        margin-left="5"
        text-margin="5"
        text-position="bottom"
        style="width:250px;"
        width="2"
        ean128="ean128"
        :text="pageHeader.arrangeCode"
        height="30"
        margin-top="10"
        margin="20"
        margin-bottom="10"
        text-align="right"
        font-size="13"
        font-weight="600">不支持vue-barcode</vue-barcode> -->
      </div>
      <div>
        产品类别：{{ pageHeader.itemTypeName }}
      </div>
      <div>
        客户名称：{{ pageHeader.clientName }}
      </div>
      <div class="titleType">
        <div>单据类型：{{ pageHeader.tableTypeName }}</div>
        <div>派工倍数：{{ pageHeader.dispatchMultiple }}</div>
        <div>排版行数：{{ pageHeader.rowNum }}</div>
        <div>规格书编号：{{ pageHeader.productionSolutionCode }}</div>
      </div>
      <div class="packType">
        <div>包装方式：{{ pageHeader.packMode }}</div>
        <div>印刷方向：{{ pageHeader.printingDirection }}</div>
        <div>工艺要求：{{ pageHeader.routeDesc }}</div>
      </div>
      <div class="materialLength">
        <div>材料总长度：{{ pageHeader.materialLength }}</div>
        <div>完工日期：{{ pageHeader.finishTime }}</div>
        <div>打印时间：{{ date }}</div>
      </div>
      <div class="materialLength">
        <div>生产制程：{{ pageHeader.processDesc }}</div>
      </div>
    </div>
    <table border class="form-header font-size-16" style="table-layout: fixed;width: 100%;border:1px solid #000000;font-size:14px;line-height:25px;">
      <!--  -->
      <tr height="20" class="color000">
        <td colspan="4" align="center">产品编码</td>
        <td colspan="5" align="center">产品名称</td>
        <td colspan="2" align="center">单位</td>
        <td colspan="2" align="center">生产量</td>
        <td colspan="2" align="center">Loss数</td>
        <td colspan="2" align="center">参考数</td>
        <td colspan="2" align="center" style="background-color: #7e78788e;-webkit-print-color-adjust: exact;">派工数</td>
        <td colspan="2" align="center">材料总重(KG)</td>
        <td colspan="3" align="center">单层厚(丝)</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="4" align="center">{{ workOrderInfo.productCode }}</td>
        <td colspan="5" align="center" style="word-wrap:break-word;word-break:break-all">{{ workOrderInfo.productName }}</td>
        <td colspan="2" align="center">{{ workOrderInfo.unit }}</td>
        <td colspan="2" align="center">{{ workOrderInfo.quantity }}</td>
        <td colspan="2" align="center">{{ workOrderInfo.lossNum }}</td>
        <td colspan="2" align="center">{{ workOrderInfo.dispatchQuantity }}</td>
        <td colspan="2" align="center" style="background: #7e78788e;-webkit-print-color-adjust: exact;">{{ workOrderInfo.referenceQuantity }}</td>
        <td colspan="2" align="center">{{ workOrderInfo.materialWeight }}</td>
        <td colspan="3" align="center">{{ workOrderInfo.singleLayerThick }}</td>
      </tr>
      <!--  -->
      <tr height="5" class="color000">
      </tr>
      <tr height="20" class="color000">
        <td colspan="2" align="center">形体配色</td>
        <td colspan="2" align="center">指令</td>
        <td colspan="2" align="center">数量</td>
        <td colspan="2" align="center">Loss数</td>
        <td colspan="2" align="center">形体配色</td>
        <td colspan="2" align="center">指令</td>
        <td colspan="2" align="center">数量</td>
        <td colspan="2" align="center">Loss数</td>
        <td colspan="2" align="center">形体配色</td>
        <td colspan="2" align="center">指令</td>
        <td colspan="2" align="center">数量</td>
        <td colspan="2" align="center">Loss数</td>
      </tr>
      <tr v-for="(item,index) in soSizeList" :key="'soSizeList' + index" height="20" class="color000">
        <td colspan="2" align="center">{{ item[0]&&item[0].colorNo }}</td>
        <td colspan="2" align="center" style="word-wrap:break-word;word-break:break-all">{{ item[0]&&item[0].clientCmd }}</td>
        <td colspan="2" align="center">{{ item[0]&&item[0].quantity }}</td>
        <td colspan="2" align="center">{{ item[0]&&item[0].lossNum }}</td>
        <td colspan="2" align="center">{{ item[1]&&item[1].colorNo }}</td>
        <td colspan="2" align="center" style="word-wrap:break-word;word-break:break-all">{{ item[1]&&item[1].clientCmd }}</td>
        <td colspan="2" align="center">{{ item[1]&&item[1].quantity }}</td>
        <td colspan="2" align="center">{{ item[1]&&item[1].lossNum }}</td>
        <td colspan="2" align="center">{{ item[2]&&item[2].colorNo }}</td>
        <td colspan="2" align="center" style="word-wrap:break-word;word-break:break-all">{{ item[2]&&item[2].clientCmd }}</td>
        <td colspan="2" align="center">{{ item[2]&&item[2].quantity }}</td>
        <td colspan="2" align="center">{{ item[2]&&item[2].lossNum }}</td>
      </tr>
      <tr height="5" class="color000">
      </tr>
      <tr height="20" class="color000">
        <td colspan="7" align="center" style="text-align: left;">客户货单编码：</td>
        <td colspan="17" align="center" style="text-align: left">客户货品名称：</td>
      </tr>
      <!--  -->
          <tbody v-for="(soDirective, index) in soDirectives" :key="'soDirectives' + index" >
            <tr height="20" class="color000">
        <td colspan="3" align="center">产品材质：</td>
        <td colspan="21" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.productSpec }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">备注：</td>
        <td colspan="21" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.remark }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">印刷正面颜色</td>
        <td colspan="9" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.frontColorName }}</td>
        <td colspan="3" align="center">印刷背面颜色</td>
        <td colspan="9" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.oppositeColorName }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">段别</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.segment }}</td>
        <td colspan="3" align="center">销线</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.salePath }}</td>
        <td colspan="3" align="center">整/半码</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.wholeSize }}</td>
        <td colspan="3" align="center">季度</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.quarter }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">PO号</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.poNo }}</td>
        <td colspan="3" align="center">WIPNo号</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.wipNo }}</td>
        <td colspan="3" align="center">SK编号</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.skNo }}</td>
        <td colspan="3" align="center">专利号</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.patentNo }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">材质描述</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.materialDesc }}</td>
        <td colspan="3" align="center">SHIP TO ID</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.shipToId }}</td>
        <td colspan="3" align="center">周期</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.cycle }}</td>
        <td colspan="3" align="center">装箱数</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ soDirective.packingNum }}</td>
      </tr>
      </tbody>

      <tr height="20" class="color000">
        <td colspan="3" align="center">生产制程</td>
        <td colspan="9" align="center">描述</td>
        <td colspan="3" align="center">数量</td>
        <td colspan="3" align="center">审核/签字</td>
        <td colspan="6" align="center">备注</td>
      </tr>
      <tr height="20" v-for="(item,index) in processList" :key="'processList' + index" class="color000">
        <td colspan="3" align="center">{{ item.processName }}</td>
        <td colspan="9" align="center" style="word-wrap:break-word;word-break:break-all">{{ item.desc }}</td>
        <td colspan="3" align="center">{{ item.quantity }}</td>
        <td colspan="3" align="center">{{ item.signature }}</td>
        <td colspan="6" align="center" style="word-wrap:break-word;word-break:break-all">{{ item.remark }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">产品正面</td>
        <td colspan="9" align="center">
          <img width="200" :src="img.frontImg" alt="">
        </td>
        <td colspan="3" align="center">产品背面</td>
        <td colspan="9" align="center">
          <img width="200" :src="img.backImg" alt="">
        </td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="2" align="center">物料类别</td>
        <td colspan="2" align="center">物料编码</td>
        <td colspan="6" align="center">物料名称</td>
        <td colspan="2" align="center">标准用量</td>
        <td colspan="2" align="center">订单用量</td>
        <td colspan="2" align="center">单位</td>
        <td colspan="2" align="center">应用工序</td>
        <td colspan="2" align="center">仓库</td>
        <td colspan="2" align="center">库位</td>
        <td colspan="2" align="center">备注</td>
      </tr>
      <tr v-for="(item,index) in processItemList" :key="'processItemList' + index" height="20" class="color000">
        <td colspan="2" align="center">{{ item.itemType }}</td>
        <td colspan="2" align="center" style="word-wrap:break-word;word-break:break-all">{{ item.itemCode }}</td>
        <td colspan="6" align="center" style="word-wrap:break-word;word-break:break-all">{{ item.itemName }}</td>
        <td colspan="2" align="center">{{ item.standardDosage }}</td>
        <td colspan="2" align="center">{{ item.quantity }}</td>
        <td colspan="2" align="center">{{ item.unit }}</td>
        <td colspan="2" align="center">{{ item.processName }}</td>
        <td colspan="2" align="center"></td>
        <td colspan="2" align="center"></td>
        <td colspan="2" align="center">{{ item.remark }}</td>
      </tr>
    </table>

    <div class="pageBottom">
      <div class="productionManagement">
        <div>生 管：{{ pageFooter.productionManagement }}</div>
        <div>打印人：{{ pageFooter.printUsername }}</div>
        <div>输单员/审核员：{{ pageFooter.auditors }}</div>
        <div>跟单员：{{ pageFooter.merchandiser }}</div>
      </div>
      <div class="productionManagement">
        <div>第一联：生产部（白）</div>
        <div>第二联：仓库（黄）</div>
        <div>第三联：存根（红）</div>
      </div>
      <div text-center>
        第1页，共1页
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import QRCode from 'qrcodejs2';
export default {
  // components: { VueBarcode },
  props: ['workOrderTable'],
  data() {
    return {
      date: dayjs().format('YYYY-MM-DD'),
      // workOrderInfo: {
      //     "productCode": "IF2022042440", // 产品编号
      //     "productName": "*QT03800 李宁鞋类不干胶防伪防窜(升级版)鞋舌贴标3.4*2.8cm ", // 产品名称
      //     "unit": "ST", // 单位
      //     "quantity": 10092.0, // 生产量
      //     "lossNum": 0, // loss数
      //     "dispatchQuantity": 10092.0, // 参考数
      //     "referenceQuantity": 10092.0, // 派工数
      //     "materialWeight": 0.0, // 总重
      //     "singleLayerThick": 0.0 // 单层厚
      // },
      // soSizeList: [
      //     [ {
      //         "colorNo": "", // 形体配色
      //         "clientCmd": "XC24030018", // 指令
      //         "quantity": 1009.0, // 数量
      //         "lossNum": 0.000 // loss数量
      //     },
      //     {
      //         "colorNo": "",
      //         "clientCmd": "XC24030018",
      //         "quantity": 303.0,
      //         "lossNum": 0.000
      //     },
      //     {
      //         "colorNo": "",
      //         "clientCmd": "XC24030018",
      //         "quantity": 303.0,
      //         "lossNum": 0.000
      //     }],
      //     [{
      //         "colorNo": "",
      //         "clientCmd": "XC24030018",
      //         "quantity": 1615.0,
      //         "lossNum": 0.000
      //     },
      //     {
      //         "colorNo": "",
      //         "clientCmd": "XC24030018",
      //         "quantity": 706.0,
      //         "lossNum": 0.000
      //     }]
      // ],
      // soDirectives: [
      //   {
      //   "productSpec": null, // 产品材质
      //   "remark": null, // 备注
      //   "frontColorName": "紫红,深红,朱红", // 印刷正面颜色
      //   "oppositeColorName": "紫红,深红,朱红", //  印刷背面颜色
      //   "segment": "UNISEX", // 段别
      //   "salePath": "中国", // 销线
      //   "wholeSize": null, // 整/半码
      //   "quarter": "24Q2", // 季度
      //   "poNo": null, // PO号
      //   "wipNo": null, // WIPNo号
      //   "skNo": null, // sk编号
      //   "patentNo": null, // 专利号
      //   "materialDesc": null, // 材质描述
      //   "shipToId": null, // SHIP TO ID
      //   "cycle": null,// 周期
      //   "packingNum": null // 装箱数
      // }
      // ],
      // processList: [ // 生产制程
      //   {
      //       "processName": "高端排版", // 生产制程
      //       "remark": "", // 备注
      //       "desc": "", // 描述
      //       "signature": "", // 审核/签字
      //       "quantity": 10092.000 // 数量
      //   },
      //   {
      //       "processName": "数码印刷",
      //       "remark": "",
      //       "desc": "",
      //       "quantity": 10092.000
      //   },
      //   {
      //       "processName": "模切",
      //       "remark": "",
      //       "desc": "",
      //       "quantity": 10092.000
      //   }
      // ],
      // img: {
      //   "frontImg": "http://192.168.3.181:9000/mes/2024/03/20/1111_20240320192902A005.png", // 产品正面
      //   "backImg": "http://192.168.3.181:9000/mes/2024/03/20/2222_20240320192903A006.png" // 产品背面
      // },
      // processItemList: [ // 物料
      //   {
      //     "itemCode": "IF2024041609", // 物料编码
      //     "itemType": "铜版纸不干胶", // 物料类别
      //     "itemName": "白格背印AW4200A*/31cm*1000m", // 物料名称
      //     "unit": "MIN", // 单位
      //     "standardDosage": 0, // 标准用量
      //     "quantity": 11.586, // 订单用量
      //     "processName": "数码印刷", // 应用工序
      //     "remark": null // 备注
      //   }
      // ],
      // pageHeader: {
      //   "itemTypeName": "",
      //   "arrangeCode": "BP24704001",
      //   "clientName": null,
      //   "tableTypeName": "直接出货单-正常单",
      //   "productionSolutionCode": "60000000",
      //   "finishTime": null,
      //   "routeDesc": "高端排版-数码印刷-QC&包装-模",
      //   "rowNum": "",
      //   "dispatchMultiple": 2.00,
      //   "printingDirection": "06",
      //   "materialLength": 0.0,
      //   "packMode": "按size包装"
      // },
      // pageFooter: {
      //   "printUsername": "admin",
      //   "auditors": "",  // 输单员/审核员
      //   "merchandiser": "", // 跟单员
      //   "productionManagement": "", // 生管
      //   "entryTime": "2024-05-08"
      // },
    }
  },
  mounted() {
    if (this.$refs.qrCodeDiv) {
        this.$refs.qrCodeDiv.innerHTML = '';
    }
    if(this.pageHeader.arrangeCode) {
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.pageHeader.arrangeCode, // 需要转换为二维码的内容
        width: 70, //宽度
        height: 70, //高度
        colorDark: '#000000', //二维码方块颜色
        colorLight: '#ffffff', //背景颜色
        correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
      });
    }
    
  },
  computed: {
    workOrderInfo (){
      return this.workOrderTable.body.workOrderInfo
    },
    soSizeList (){
      let result = [];
      for(let i=0; i<this.workOrderTable.body.soSizeList.length; i+=3 ){
          result.push(this.workOrderTable.body.soSizeList.slice(i,i+3));
      }
      if (result.length === 0) {
        result = [[{}]]
      }
      return result
    },
    soDirectives (){
      return this.workOrderTable.body.soDirectives.length === 0 ? [{}] : this.workOrderTable.body.soDirectives
    },
    processList (){
      return this.workOrderTable.body.processList.length === 0 ? [{}] : this.workOrderTable.body.processList
    },
    processItemList (){
      return this.workOrderTable.body.processItemList.length === 0 ? [{}] : this.workOrderTable.body.processItemList
    },
    img (){
      return this.workOrderTable.body.img
    },
    pageHeader (){
      return this.workOrderTable.pageHeader
    },
    pageFooter (){
      return this.workOrderTable.pageFooter
    },
  }
}
</script>

<style scoped lang="scss">
.productOrderBox{
  position: relative;
  width: 920px;
  height: 1300px;
  padding: 0 49px;
  padding-top:20px;
  box-sizing: border-box;
}
.pageTop{
  color: #000;
  padding: 0px 10px;
  position: relative;
  .titles{
    text-align: center;
    font-size:25px;
    letter-spacing: 2px;
  }
  .GOM {
    color: #9f9c978e;
    position: absolute;
    left: 50%;
    font-size:28px;
    transform: translateX(-50%)
  }
  .barcode{
    position: absolute;
    top: 10px;
    right: -5px;
    width: 300px;
    height: 80px;
    display: flex;
    overflow: hidden;
    justify-content: flex-end;
  }

  .titleType{
    display: flex;
    div{
      padding-right:72px;
      min-width: 100px;
    }
  }
  .packType{
    display: flex;
    div{
      padding-right:50px;
      min-width: 100px;
    }
  }
  .materialLength{
    display: flex;
    div{
      padding-right:30px;
      min-width: 300px;
    }
  }
}
.pageBottom{
  width: 850px;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0px 49px;
  color: #000;
  .productionManagement{
    display: flex;
    justify-content: space-between;
    div{
      min-width: 120px;
    }
  }
}
[text-center]{
  text-align: center;
}
.color000{
  color: #000;
  td {
    word-wrap:break-word;
    word-break:break-all
  }
}
</style>
