<template>
  <div class="productOrderSpecification">
    <div class="pageTop">
      <div class="titles">广州市宝绅科技应用有限公司</div>
      <div class="img">
        <img width="140" src="@/assets/logo/logo.png" alt="">
      </div>
      <div class="pageContent">
        <div>电话：020-36201735 36343998</div>
        <div>邮箱：<u>gzbaoshen@gzbaoshen.com</u></div>
      </div>
      <div class="pageContent">
        <div>传真：020-36201782 36201962</div>
        <div style="padding-right:50px;">网站：<u>www.gzbaoshen.com</u></div>
      </div>
      <div class="titles">
        <div class="cdbh">存档编号:</div>
        <div>
          SPECIFICATION
        </div>
        <div style="font-weight: 400;">
          (产品规格书)
        </div>
        <div  v-if="pageHeader.productionSolutionCode" class="barcode">
          <vue-barcode
            :value="pageHeader.productionSolutionCode"
            margin-right="5"
            :display-value="pageHeader.productionSolutionCode"
            font="bold"
            margin-left="5"
            text-margin="5"
            text-position="bottom"
            style="width:250px;"
            width="2"
            ean128="ean128"
            :text="'规格书编号：'+ pageHeader.productionSolutionCode"
            height="30"
            margin-top="10"
            margin="10"
            margin-bottom="20"
            text-align="right"
            font-size="12">不支持vue-barcode</vue-barcode>
        </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;    margin: 8px 10px 5px 10px;">
      <!--  -->
      <tr height="20" class="color000">
        <td colspan="3" align="center">产品类别</td>
        <td colspan="3" align="center">{{ body.itemTypeName }}</td>
        <td colspan="3" align="center">采购单位</td>
        <td colspan="3" align="center">{{ body.purchaseUnit }}</td>
        <td colspan="2" align="center">品牌</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.brandName }}</td>
        <td colspan="2" align="center">单位</td>
        <td colspan="2" align="center">{{ body.unit }}</td>
        <td colspan="2" align="center">换算值</td>
        <td colspan="1" align="center">{{ body.conversionValue }}</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">{{ body.itemCode }}</td>
        <td colspan="3" align="center" >产品名称</td>
        <td colspan="15" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.itemName }}</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">{{ body.workorderProofingCode }}</td>
        <td colspan="3" align="center" >英文名称</td>
        <td colspan="15" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.enName }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">长度cm</td>
        <td colspan="3" align="center">{{ body.length }}</td>
        <td colspan="3" align="center">单层厚(丝)</td>
        <td colspan="3" align="center">{{ body.singleLayerThick }}</td>
        <td colspan="2" align="center">单重kg</td>
        <td colspan="2" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.singleWeight }}</td>
        <td colspan="2" align="center">层数</td>
        <td colspan="2" align="center">{{ body.layerNum }}</td>
        <td colspan="2" align="center">高度cm</td>
        <td colspan="2" align="center">{{ body.height }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">宽度cm</td>
        <td colspan="3" align="center">{{ body.width }}</td>
        <td colspan="3" align="center">印张长度cm</td>
        <td colspan="3" align="center">{{ body.printingPaperlenth }}</td>
        <td colspan="2" align="center">印张宽度cm</td>
        <td colspan="2" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.printPaperwidth }}</td>
        <td colspan="2" align="center">仓库</td>
        <td colspan="2" align="center">{{ body.storePlace }}</td>
        <td colspan="2" align="center">尺码组</td>
        <td colspan="2" align="center">{{ body.sizeGroup }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">派工倍数</td>
        <td colspan="3" align="center">{{ body.sendworkMultiple }}</td>
        <td colspan="3" align="center">排版行数</td>
        <td colspan="3" align="center">{{ body.rowNum }}</td>
        <td colspan="2" align="center">是否禁用</td>
        <td colspan="4" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.isEnable }}</td>
        <td colspan="4" align="center">是否创建新规格书</td>
        <td colspan="2" align="center">{{ body.isCreateSpec }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">是否要鞋图</td>
        <td colspan="3" align="center">{{ body.isNeedShoeImg }}</td>
        <td colspan="3" align="center">是否附样品</td>
        <td colspan="3" align="center">{{ body.isAddSimple }}</td>
        <td colspan="2" align="center">是否为唯一码产品</td>
        <td colspan="4" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.isUniqueCode }}</td>
        <td colspan="4" align="center">是否不考虑形体配色</td>
        <td colspan="2" align="center">{{ body.isConsiderColor }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">产品材质</td>
        <td colspan="17" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.productMaterial }}</td>
        <td colspan="2" align="center">配方</td>
        <td colspan="2" align="center">{{ body.formula }}</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">{{ body.frontColorName }}</td>
        <td colspan="2" align="center">印刷背面颜色</td>
        <td colspan="10" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.oppositeColorName }}</td>
      </tr>

      <tr height="20" class="color000" style="font-weight: 600">
        <td colspan="3" align="center">生产制程</td>
        <td colspan="21" align="center">描述</td>
      </tr>
      <tr height="20" v-for="(item,index) in body.processes" :key="'processes' + index" class="color000">
        <td colspan="3" align="center">{{ item.processName }}</td>
        <td colspan="21" align="center" style="word-wrap:break-word;word-break:break-all">{{ item.desc }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">产品正面</td>
        <td colspan="9" align="center">
          <img width="200" :src="body.frontImg" alt="">
        </td>
        <td colspan="3" align="center">产品背面</td>
        <td colspan="9" align="center">
          <img width="200" :src="body.backImg" alt="">
        </td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="12" align="center">
          <div>CUSTOMER APPROVAL</div>
          <div>客户确认</div>
        </td>
        <td colspan="12" align="center">
          <div>R&D DEPARTMENT</div>
          <div>研发部门</div>
        </td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="6" align="center">
          <div>APPROVER</div>
          <div>确认人</div>
        </td>
        <td colspan="6" align="center">
          <div>APPROVED</div>
          <div>日期</div>
        </td>
        <td colspan="4" align="center">
          <div>APPROVED</div>
          <div>核准</div>
        </td>
        <td colspan="4" align="center">
          <div>CHECKED</div>
          <div>审核</div>
        </td>
        <td colspan="4" align="center">
          <div>PREPARED</div>
          <div>制定</div>
        </td>
      </tr>
      <tr height="40" class="color000">
        <td colspan="6" align="center">
          {{ body.customerApprover }}
        </td>
        <td colspan="6" align="center">
          {{ body.customerApproved }}
        </td>
        <td colspan="4" align="center">

        </td>
        <td colspan="4" align="center">

        </td>
        <td colspan="4" align="center">
          {{ body.rdprepared }}
        </td>
      </tr>
    </table>
    <div class="pageBottom">
      <div>
        录入日期：{{ pageFooter.entryTime }}
      </div>
      <div>
        打印日期：{{ date }}
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import VueBarcode from 'vue-barcode'
export default {
  components: { VueBarcode },
  props: ['productionSolutionTable'],
  data() {
    return {
      date: dayjs().format('YYYY-MM-DD'),
      // pageHeader: {
      //   "itemTypeName": null,
      //   "arrangeCode": null,
      //   "clientName": null,
      //   "tableTypeName": "直接出货单-正常单",
      //   "productionSolutionCode": "60000000",   //  规格数编号
      //   "finishTime": null,
      //   "routeDesc": null,
      //   "rowNum": null,
      //   "dispatchMultiple": null,
      //   "printingDirection": null,
      //   "materialLength": null,
      //   "packMode": null
      // },
      // pageFooter: {
      //   "printUsername": null,
      //   "auditors": null,
      //   "merchandiser": null,
      //   "productionManagement": null,
      //   "entryTime": "2024-05-08" // 录入时间
      // },
      // body: {
      //   "itemTypeName": "",
      //   "itemCode": "IF2024042440",
      //   "unit": "PCS",
      //   "brandName": "李宁",
      //   "purchaseUnit": "M2",
      //   "conversionValue": "0",
      //   "itemName": "*QT03800 李宁鞋类不干胶防伪防窜(升级版)鞋舌贴标3.4*2.8cm ",
      //   "workorderProofingCode": null,
      //   "enName": "LINING",
      //   "length": 0,
      //   "singleLayerThick": 0.0,
      //   "singleWeight": 0.0,
      //   "layerNum": 0.0,
      //   "height": 0.0,
      //   "width": 0.0,
      //   "printingPaperlenth": 12.30,
      //   "printPaperwidth": 12.00,
      //   "storePlace": "W00",
      //   "dispatchMultiple": 2.00,
      //   "isEnable": "启用",
      //   "isCreateSpec": null,
      //   "isNeedShoeImg": null,
      //   "isAddSimple": "实物样",
      //   "isUniqueCode": "未定义",
      //   "isConsiderColor": "未定义",
      //   "productMaterial": null,
      //   "formula": null,
      //   "frontColorName": "紫红,深红,朱红",
      //   "oppositeColorName": "紫红,深红,朱红",
      //   "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",
      //   "customerApprover": null, // 客户确认->确认人
      //   "customerApproved": "2024-05-10", // 客户确认->日期
      //   "processes": [ // map-> processes
      //       {
      //           "processName": "高端排版",
      //           "remark": "",
      //           "desc": "",
      //           "quantity": 10092.000
      //       },
      //       {
      //           "processName": "数码印刷",
      //           "remark": "",
      //           "desc": "",
      //           "quantity": 10092.000
      //       },
      //       {
      //           "processName": "模切",
      //           "remark": "",
      //           "desc": "",
      //           "quantity": 10092.000
      //       },
      //       {
      //           "processName": "QC&包装",
      //           "remark": "",
      //           "desc": "",
      //           "quantity": 10092.000
      //       }
      //   ],
      //   "rdchecked": null,   // 研发部门-> 审核
      //   "rdapproverd": null,  // 研发部门-> 核准
      //   "rdprepared": null // 研发部门-> 制定
      // }
    }
  },
  computed: {
    body (){
      return this.productionSolutionTable.body
    },
    pageHeader (){
      return this.productionSolutionTable.pageHeader
    },
    pageFooter (){
      return this.productionSolutionTable.pageFooter
    },
  }
}
</script>

<style scoped lang="scss">
.productOrderSpecification{
  position: relative;
  width: 920px;
  height: 1300px;
  padding: 0 49px;
  padding-top:20px;
  box-sizing: border-box;

}
.pageTop{
  color: #000;
  padding: 0px 10px;
  .titles{
    text-align: center;
    font-size:22px;
    font-weight: 600;
    position: relative;
    .cdbh{
      font-weight: 400;
      font-size: 16px;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    .barcode{
      position: absolute;
      top:-3px;
      right:-10px;
      width: 300px;
      height:80px;
      display: flex;
      overflow: hidden;
      justify-content: flex-end;
    }
  }
  .img{
    position: absolute;
    top:30px;
    left:10px;
  }
  .pageContent{
    width: 460px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;

  }
}
.pageBottom{
  display: flex;
  justify-content: flex-end;
  width: 850px;
  padding: 0px 49px;
  color: #000;
  div{
    margin-left:100px;
    min-width: 200px;
  }
}
[text-center]{
  text-align: center;
}
.color000{
  color: #000;
  td {
    word-wrap:break-word;
    word-break:break-all
  }
}
</style>

