<template>
  <div ref="_printRef" class="print" style="width:756px;">
    <div v-for="(map,index) in data" :key="index" :style="{width:'100%',marginTop:(index+1)%2===0?'40px':'0px'}">
      <div style="width: 100%;position: relative">
        <div style="width: 100%;text-align: center;line-height: 40px;font-size: 20px;font-weight: bold">大连船舶重工集团钢加有限公司</div>
        <div style="width: 100%;text-align: center;line-height: 30px;font-size: 16px;font-weight: bold">配送交接单</div>
        <div style="line-height: 20px">船号: {{ map.dcCh }}</div>
        <div class="table-head">
          <span style="width:4%;">序号</span>
          <span style="width:11%;">船号</span>
          <span style="width:9%;">批量</span>
          <span style="width:23%;">图号</span>
          <span style="width:22.5%;">物品名称</span>
          <span style="width:23.5%;">规格</span>
          <span style="width:7%;">材质</span>
        </div>
        <div class="table-content" v-for="(item,index) in map.list">
          <span style="width:4%;text-align: center;">{{ index+1 }}</span>
          <span style="width:11%;text-align: center;">{{ item.dcCh }}</span>
          <span style="width:9%;text-align: center;">{{ item.dcPl }}</span>
          <span style="width:23%;text-align: center;">{{ item.dcTh }}</span>
          <span style="width:22.5%;text-align: center;">{{ item.wpmc }}</span>
          <span style="width:23.5%;text-align: center;">{{ item.wpgg }}</span>
          <span style="width:7%;text-align: center;">{{ item.wpxh }}</span>
        </div>
        <div class="table-foot" style="border:1px solid">
          <span style="text-align: center"> 合计: </span>
          <span style="text-align: center"> {{ map.count }}</span>
        </div>
        <div style="font-size: 18px;margin-top: 2px">
          <span style="margin-left: 5px">质检员:</span>
          <span style="margin-left: 30%">收货单位:</span>
          <span style="margin-left: 30%">收货人:</span>
        </div>
      </div>
      <div class="pageEnd"></div>
    </div>
  </div>
</template>

<script>
export default {
  name:'QfxqzxPrint',
  data(){
    return {
      data:[],

    }
  },
  methods:{
    show(_data){
      //手动按行换页计算
      //每页行数
      const pageSize=30;
      const tmpData=[]
      const groupData=this.group(_data,(item)=>{
        return item.dcCh
      })

      Object.keys(groupData).forEach(key=>{
        const item=groupData[key]
        const map={
          dcCh:key.replaceAll('"',''),
          list:item,
          count:item.length
        }
        tmpData.push(map)
      })
      this.data=tmpData
      this.$emit('showPrintComp')
    },
    group(list, fn){
      const groups = {};
      list.forEach(function (o) {
        const group = JSON.stringify(fn(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return groups;
    },
    sliceToPage(data,len){
      let index=0,_newArr=[]
      while (index<data.length){
        let size=len;
        if ((index+len)>=data.length){
          size=data.length-index;
        }
        _newArr.push(data.slice(index, index += size));
      }
      return _newArr;
    }
  }
}

</script>

<style>
.table-head span{
  font-size: 14px;
  text-align: center;
  display: inline-block;
  border: 1px solid;
}
.table-content span{
  display: inline-block;
  font-size: 14px;
  text-align: center;
  border: 1px solid;
  height: 40px;
  vertical-align:middle;
  word-break: normal;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: hidden;
}
.QRCode{
  width:110px;
  position: absolute;
  left:610px;
  /*top:10px;*/
}

@media print {
  .noPrint {
    display: none;
  }
  .pageEnd {
    page-break-after: always;
  }
}
</style>
