<template>
  <div class="productOrderSpecification">
    <div class="pageTop">
      <div class="titles" style="padding-bottom: 30px;">领料单
        <div v-if="Table[0].applyNo" class="barcode">
          <vue-barcode
            :value="Table[0].applyNo"
            margin-right="5"
            :display-value="Table[0].applyNo"
            font="bold"
            margin-left="5"
            text-margin="5"
            text-position="bottom"
            style="width:250px;"
            width="2"
            ean128="ean128"
            :text="'领取单号：'+ Table[0].applyNo"
            height="45"
            margin-top="10"
            margin="10"
            margin-bottom="20"
            text-align="left"
            font-size="16">不支持vue-barcode</vue-barcode>
        </div>
      </div>
      <div class="titles text-left">
        <div class="cdbh">领料部门：{{Table[0].workunitName}}</div>
      </div>
      <div class="titles text-left">
        <div class="cdbh">领取类型：{{Table[0].applyType}}</div>
        <div class="cdbh">领取日期：{{Table[0].createTime}}</div>
        <div class="cdbh" style="padding-left: 30px">列印时间：{{Table[0].printTime}}</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" style="font-weight: 600">
        <td colspan="3" align="center">项次</td>
        <td colspan="6" align="center">材料编码</td>
        <td colspan="11" align="center">材料名称</td>
        <!-- <td colspan="3" align="center">单位</td> -->
        <td colspan="4" align="center">申请量</td>
      </tr>
      <tr height="20" v-for="(item,index) in Table" :key="'processes' + index" class="color000">
        <td colspan="3" align="center">{{item.serialNumber}}</td>
        <td colspan="6" align="center">{{item.sapItemCode ? Number(item.sapItemCode) : ''}}</td>
        <td colspan="11" align="center">{{item.itemName}}</td>
        <!-- <td colspan="3" align="center">{{item.serialNumber}}</td> -->
        <td colspan="4" align="center">{{item.applyNum}}</td>
      </tr>
      <tr height="20" class="color000">
        <td colspan="9" align="center">生产单号<br/>共计：{{Table[0].countWorkOrder}}份单</td>
        <td colspan="15" align="center">
          {{Table[0].workorderCode}}
        </td>
      </tr>
    </table>
    <div class="pageBottom">
      <div>
        领取人：{{ Table[0].createBy }}
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import VueBarcode from 'vue-barcode'
export default {
  components: { VueBarcode },
  props: ['Table'],
  dicts: ['pro_requisition_type'],
  data() {
    return {
      date: dayjs().format('YYYY-MM-DD'),
      mytable: {
      "apiFlag": false,
      "manualUpdate": false,
      "searchValue": null,
      "createBy": "admin",
      "createTime": "2024-06-14 15:47:08",
      "updateBy": "admin",
      "updateTime": "2024-06-14 15:47:08",
      "remark": "",
      "params": {},
      "materialRequestId": 4,
      "applyNo": "SN202400680",
      "itemId": 2178,
      "taskId": 294,
      "taskWorkunitId": 195,
      "workorderId": null,
      "workorderCode": "001000000306",
      "requirementNumber": "3048",
      "requirementProjectNumber": "7",
      "materialType": 0,
      "pickingReason": null,
      "processId": null,
      "applyNum": 8888,
      "applyType": 1,
      "batchNumber": null,
      "itemCode": "000000000001000278",
      "itemName": "190g单铜大度（88.9*119.4CM）3500张/件",
      "sapItemCode": "000000000001000278",
      "arrangeCode": null,
      "attr1": null,
      "attr2": null,
      "attr3": 0,
      "attr4": 0,
      "startTime": "2024-06-14 20:00:00",
      "endTime": null,
      "workunitId": 352,
      "workunitName": "普通印刷机11",
      "workunitCode": "UBZ00148",
      "printTime": "2024-08-12 10:04:58",
      "serialNumber": "8",
      "workstationCode": "BZ000053",
      "workstationName": "铜版印刷",
      "workshopCode": null,
      "workshopName": null,
      processes: []
  }
    }
  },
  computed: {
    // applyType (){
    //   console.log(JSON.parse(JSON.stringify(this.dict.type.pro_requisition_type)), this.Table.applyType)
    //   const item = this.dict.type.pro_requisition_type.find(v=> Number(v.value) === this.Table.applyType)
    //   console.log('item', item)
    //   return item && item.label ? item.label : ''
    // },
    // pageHeader (){
    //   return this.Table.pageHeader
    // },
    // pageFooter (){
    //   return this.Table.pageFooter
    // },
  }
}
</script>

<style scoped lang="scss">
@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  /* 将需要铺满A4纸的内容放在这里 */
  .content {
    width: 100%;
    height: 100%;
    padding: 0;
  }
  /* 表格边框 */
  table {
    border-collapse: collapse;
    border: 1px solid #000;
  }
  /* 表格内容边框 */
  td,
  th {
    border: 1px solid #000;
  }
}
.font-family-song {
  font-family: "宋体";
}
.productOrderSpecification{
  height: 100vh;
  padding: 24px;
  color: #000;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  .pageTop {
    padding-bottom: 8px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    .titles{
      text-align: center;
      font-size:22px;
      position: relative;
    .cdbh{
      font-weight: 400;
      font-size: 16px;
      display: inline-block;
      width: 33.3%;
    }
    .barcode{
      position: absolute;
      top:13px;
      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;
//   position: absolute;
//   bottom: 0px;
//   padding: 0px 49px;
//   color: #000;
//   border: 2px solid #000;
//   div{
//     margin-left:100px;
//     min-width: 100px;
//   }
// }
[text-center]{
  text-align: center;
}
.text-left {
  text-align: left !important;
}
.color000{
  color: #000;
  font-weight: 400 !important;
  td {
    word-wrap:break-word;
    word-break:break-all
  }
}
}
</style>

