<template>
  <div class="productOrderSpecification">
    <div class="pageTop">
      <div class="titles">{{$t('广州市宝绅科技应用有限公司')}}</div>
      <div class="img">
        <img width="140" src="@/assets/logo/logo.png" alt="">
      </div>
      <div class="pageContent">
        <div>{{$t('电话：020-36201735 36343998')}}</div>
        <div>{{$t('邮箱：')}}<u>gzbaoshen@gzbaoshen.com</u></div>
      </div>
      <div class="pageContent">
        <div>{{$t('传真：020-36201782 36201962')}}</div>
        <div style="padding-right:50px;">{{$t('网站：')}}<u>www.gzbaoshen.com</u></div>
      </div>
      <div class="titles">
        <div class="cdbh">{{$t('存档编号:')}}</div>
        <div>
          SPECIFICATION
        </div>
        <div style="font-weight: 400;">{{$t('(产品规格书)')}}</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="$t('规格书编号：')+ pageHeader.productionSolutionCode"
            height="30"
            margin-top="10"
            margin="10"
            margin-bottom="20"
            text-align="right"
            font-size="12">{{$t('不支持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">{{$t('产品类别')}}</td>
        <td colspan="3" align="center">{{ body.itemTypeName }}</td>
        <td colspan="3" align="center">{{$t('采购单位')}}</td>
        <td colspan="3" align="center">{{ body.purchaseUnit }}</td>
        <td colspan="2" align="center">{{$t('品牌')}}</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.brandName }}</td>
        <td colspan="2" align="center">{{$t('单位')}}</td>
        <td colspan="2" align="center">{{ body.unit }}</td>
        <td colspan="2" align="center">{{$t('换算值')}}</td>
        <td colspan="1" align="center">{{ body.conversionValue }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">{{$t('产品编码')}}</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.itemCode }}</td>
        <td colspan="3" align="center" >{{$t('产品名称')}}</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">{{$t('样品单号')}}</td>
        <td colspan="3" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.workorderProofingCode }}</td>
        <td colspan="3" align="center" >{{$t('英文名称')}}</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">{{$t('长度cm')}}</td>
        <td colspan="3" align="center">{{ body.length }}</td>
        <td colspan="3" align="center">{{$t('单层厚(丝)')}}</td>
        <td colspan="3" align="center">{{ body.singleLayerThick }}</td>
        <td colspan="2" align="center">{{$t('单重kg')}}</td>
        <td colspan="2" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.singleWeight }}</td>
        <td colspan="2" align="center">{{$t('层数')}}</td>
        <td colspan="2" align="center">{{ body.layerNum }}</td>
        <td colspan="2" align="center">{{$t('高度cm')}}</td>
        <td colspan="2" align="center">{{ body.height }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">{{$t('宽度cm')}}</td>
        <td colspan="3" align="center">{{ body.width }}</td>
        <td colspan="3" align="center">{{$t('印张长度cm')}}</td>
        <td colspan="3" align="center">{{ body.printingPaperlenth }}</td>
        <td colspan="2" align="center">{{$t('印张宽度cm')}}</td>
        <td colspan="2" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.printPaperwidth }}</td>
        <td colspan="2" align="center">{{$t('仓库')}}</td>
        <td colspan="2" align="center">{{ body.storePlace }}</td>
        <td colspan="2" align="center">{{$t('尺码组')}}</td>
        <td colspan="2" align="center">{{ body.sizeGroup }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">{{$t('派工倍数')}}</td>
        <td colspan="3" align="center">{{ body.sendworkMultiple }}</td>
        <td colspan="3" align="center">{{$t('排版行数')}}</td>
        <td colspan="3" align="center">{{ body.rowNum }}</td>
        <td colspan="2" align="center">{{$t('是否禁用')}}</td>
        <td colspan="4" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.isEnable }}</td>
        <td colspan="4" align="center">{{$t('是否创建新规格书')}}</td>
        <td colspan="2" align="center">{{ body.isCreateSpec }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">{{$t('是否要鞋图')}}</td>
        <td colspan="3" align="center">{{ body.isNeedShoeImg }}</td>
        <td colspan="3" align="center">{{$t('是否附样品')}}</td>
        <td colspan="3" align="center">{{ body.isAddSimple }}</td>
        <td colspan="2" align="center">{{$t('是否为唯一码产品')}}</td>
        <td colspan="4" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.isUniqueCode }}</td>
        <td colspan="4" align="center">{{$t('是否不考虑形体配色')}}</td>
        <td colspan="2" align="center">{{ body.isConsiderColor }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">{{$t('产品材质')}}</td>
        <td colspan="17" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.productMaterial }}</td>
        <td colspan="2" align="center">{{$t('配方')}}</td>
        <td colspan="2" align="center">{{ body.formula }}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="3" align="center">{{$t('印刷正面颜色')}}</td>
        <td colspan="9" align="center" style="word-wrap:break-word;word-break:break-all">{{ body.frontColorName }}</td>
        <td colspan="2" align="center">{{$t('印刷背面颜色')}}</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">{{$t('生产制程')}}</td>
        <td colspan="21" align="center">{{$t('描述')}}</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">{{$t('产品正面')}}</td>
        <td colspan="9" align="center">
          <img width="200" :src="body.frontImg" alt="">
        </td>
        <td colspan="3" align="center">{{$t('产品背面')}}</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>{{$t('客户确认')}}</div>
        </td>
        <td colspan="12" align="center">
          <div>R&D DEPARTMENT</div>
          <div>{{$t('研发部门')}}</div>
        </td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="6" align="center">
          <div>APPROVER</div>
          <div>{{$t('确认人')}}</div>
        </td>
        <td colspan="6" align="center">
          <div>APPROVED</div>
          <div>{{$t('日期')}}</div>
        </td>
        <td colspan="4" align="center">
          <div>APPROVED</div>
          <div>{{$t('核准')}}</div>
        </td>
        <td colspan="4" align="center">
          <div>CHECKED</div>
          <div>{{$t('审核')}}</div>
        </td>
        <td colspan="4" align="center">
          <div>PREPARED</div>
          <div>{{$t('制定')}}</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>{{$t('录入日期：{0}', [ pageFooter.entryTime ])}}</div>
      <div>{{$t('打印日期：{0}', [ 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": this.$t('common.enable'),
      //   "isCreateSpec": null,
      //   "isNeedShoeImg": null,
      //   "isAddSimple": "实物样",
      //   "isUniqueCode": "未定义",
      //   "isConsiderColor": "未定义",
      //   "productMaterial": null,
      //   "formula": null,
      //   "frontColorName": "紫红,深红,朱红",
      //   "oppositeColorName": "紫红,深红,朱红",
      //   "frontImg": "http://192.168.3.91:9000/mes/2024/03/20/1111_20240320192902A005.png",
      //   "backImg": "http://192.168.3.91: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>

