<template>
  <ele-modal
    title="出库单"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="90%"
  >
    <div
      id="printSection"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <table
        cellspacing="0"
        border
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
        "
      >
        <tbody>
          <tr>
            <td colspan="5" style="padding: 5px">
              <div>
                <div style="text-align:center;font-size:20px;font-weight:800">{{this.groupName||'湖南万隆智能科技有限公司'}}送货单</div>
                <div style="margin-top:15px">出库时间:{{ outBound.createTime  }}</div>
                <div style="margin-top:15px">客户:{{ formData.contactName }}</div>
              </div>
            </td>
          </tr>
          <tr align="center">
            <td style="padding: 5px"> 物料编码 </td>
            <td style="padding: 5px"> 物料名称 </td>
            <td style="padding: 5px">重量(KG) </td>
            <td style="padding: 5px"> 送货数</td>
            <td style="padding: 5px"> 备注</td>
          </tr>

          <tr
            align="center"
            v-for="(item, index) in formData?.productList"
          >
            <td style="padding: 5px"> {{ item.productCode }} </td>
            <td style="padding: 5px"> {{ item.productName }} </td>
            <td style="padding: 5px"> {{ item.totalWeight }}</td>
            <td style="padding: 5px"> {{ item.totalCount }}</td>
            <td style="padding: 5px"> {{ item.remark }}</td>
          </tr>
          <tr   align="center"> 
            <td style="padding: 5px"> </td>
            <td style="padding: 5px"> 总重量</td>
            <td style="padding: 5px"> {{ getAll('totalWeight') }}</td>
            <td style="padding: 5px">  {{ getAll('totalCount') }}</td>
            <td style="padding: 5px"> </td>
          </tr>
          <tr>
            <td style="padding: 5px">送货员： </td>
            <td style="padding: 5px"> 车牌：{{ formData.carNo }}</td>
            <td style="padding: 5px" colspan="3">
              <span style="width:180px;display:inline-block"> 商务： </span>
              <span style="width:180px;display:inline-block"> 仓管： </span>
            </td>
          </tr>
        </tbody>
      </table>

    
    </div>
    <div slot="footer">
        <el-button @click="print">打印预览</el-button>
        <el-button @click="close">关闭</el-button>
      </div>
  </ele-modal>
</template>

<script>
  import { getSendSaleOrderrecordDetailSplit } from '@/api/saleManage/saleordersendrecord';
  import { getInfoBySourceBizNoAll } from '@/api/wms';
  import { mapGetters } from 'vuex';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {},
    data() {
      return {
        checked: '',
        QRvisible: false,
        isPrintPrice: false,
        formData: {},
        outBound: {}
      };
    },
    props: {
      groupName:''
    },
    methods: {
      async open(id) {
        this.formData = await getSendSaleOrderrecordDetailSplit(id);
        this.QRvisible = true;
        let dataArray = await getInfoBySourceBizNoAll(this.formData.docNo);
        this.outBound = JSON.parse(JSON.stringify(dataArray[0]));
        // this.outBound['outInDetailRecordRequestList'] = [];

        // dataArray.forEach((item) => {
        //   item.outInDetailList.forEach((val) => {
        //     val.outInDetailRecordRequestList.forEach((j) => {
        //       j['categoryName'] = val.categoryName;
        //       j['categoryModel'] = val.categoryModel;
        //       j['specification'] = val.specification;
        //       j['categoryCode'] = val.categoryCode;
        //     });
        //     this.outBound['outInDetailRecordRequestList'].push(
        //       ...val.outInDetailRecordRequestList
        //     );
        //   });
        // });
        //包装维度
      },
      close() {
        this.QRvisible = false;
      },
      getAll(key){
        let num=0
       this.formData.productList.forEach(item=>{
         if(item[key]){
          num+=Number(item[key])
         }
       })
       return num

      },
      print() {
        const printSection = document.getElementById('printSection');
        // 创建打印任务
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head><title>打印预览</title>');
        printWindow.document.write(
          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
        );
        printWindow.document.write('</head><body>');
        printWindow.document.write(printSection.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.onload = function () {
          printWindow.print();
        };
      }
    }
  };
</script>

<style lang="scss"></style>
