<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;
      "
    >
      <div
        style="
          text-align: center;
          font-size: 20px;
          font-weight: 800;
          text-decoration: underline;
        "
        >湖南万隆智能科技有限公司采购入库单</div
      >
      <div style="display: flex; justify-content: space-between;width: 100%;margin-bottom: 10px;">
        <span style="flex: 3">供应商：{{ formData.supplierName }}</span>
        <span style="flex: 1">日期：{{ formData.receiveDate }}</span>
        <span style="flex: 2">编号：{{ formData.receiveNo }}</span>
      </div>
      <div style="display: flex; justify-content: space-between;width: 100%;margin-bottom: 10px;">
        <span style="flex: 1">摘要：</span>
      </div>
      <table
        cellspacing="0"
        border
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;margin-bottom: 10px;
        "
      >
        <tbody>
          <tr align="center">
            <td style="padding: 5px"> 行号 </td>
            <td style="padding: 5px"> 物料编码 </td>
            <td style="padding: 5px"> 物料名称 </td>
            <td style="padding: 5px">规格型号 </td>
            <td style="padding: 5px">单位 </td>
            <td style="padding: 5px"> 数量</td>
            <td style="padding: 5px"> 单价</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"> {{ index + 1 }} </td>
            <td style="padding: 5px"> {{ item.productCode }} </td>
            <td style="padding: 5px"> {{ item.productName }} </td>
            <td style="padding: 5px">
              {{ item.specification || ''
              }}{{ item.modelType ? '/' + item.modelType : '' }}
            </td>
            <td style="padding: 5px"> {{ item.measuringUnit }}</td>
            <td style="padding: 5px"> {{ item.totalCount }}</td>
            <td style="padding: 5px"> {{ item.singlePrice }}</td>
            <td style="padding: 5px"> {{ item.totalPrice }}</td>
            <td style="padding: 5px"> {{ item.remark }}</td>
          </tr>
          <tr align="center">
            <td style="padding: 5px" colspan="2">合计 </td>
            <td style="padding: 5px" colspan="7">
              <div style="display: flex; justify-content: space-between">
                <span style="flex: 1">本页数量小计：{{ this.getAll('totalCount') }}</span>
                <span style="flex: 1">本页金额小计：{{ this.getAll('totalPrice') }}</span>
                <span style="flex: 1">汇总数量：{{ this.getAll('totalCount') }}</span>
                <span style="flex: 1">汇总金额：{{ this.getAll('totalPrice') }}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div style="display: flex; justify-content: space-between;width: 100%;">
        <span style="flex: 1">审核：</span>
        <span style="flex: 1">业务员：</span>
        <span style="flex: 1">验收：</span>
        <span style="flex: 1">保管：</span>
        <span style="flex: 1">制单：{{ formData.createUserName }}</span>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getReceiveSaleOrderrecordDetail } from '@/api/purchasingManage/purchaseorderreceive';

  import { mapGetters } from 'vuex';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {},
    data() {
      return {
        QRvisible: false,
        formData: {}
      };
    },

    methods: {
      async open(id) {
        this.formData = await getReceiveSaleOrderrecordDetail(id);
        this.QRvisible = true;
      },
      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>
