<template>
  <div class="productOrderSpecification">
    <div class="pageTop">
      <div class="titles" style="padding-bottom: 30px;">领料单
        <div v-if="Table.applyNo" class="barcode">
          <vue-barcode
            :value="Table.applyNo"
            margin-right="5"
            :display-value="Table.applyNo"
            font="bold"
            margin-left="5"
            text-margin="5"
            text-position="bottom"
            style="width:250px;"
            width="2"
            ean128="ean128"
            :text="'领取单号：'+ Table.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.workunitName}}</div>
      </div>
      <div class="titles text-left">
        <div class="cdbh">领取类型：{{Table.applyType}}</div>
        <div class="cdbh">领取日期：{{Table.createTime}}</div>
        <div class="cdbh" style="padding-left: 30px">列印时间：{{Table.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.processes" :key="'processes' + index" class="color000">
        <td colspan="3" align="center">{{item.serialNumber}}</td>
        <td colspan="6" align="center">{{item.itemCode}}</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.processes.length}}份单</td>
        <td colspan="15" align="center">
          {{Table.workorderCode}}
        </td>
      </tr>
    </table>
    <div class="pageBottom">
      <div>
        领取人：{{ Table.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">
.productOrderSpecification{
  position: relative;
  width: 920px;
  height: 600px;
  padding: 0 49px;
  padding-top:20px;
  box-sizing: border-box;

}
.pageTop{
  color: #000;
  padding: 0px 10px;
  .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;
  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>

