<template>
  <ele-modal
    title="出库单"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="90%"
  >
    <div id="printSection">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin: 50px;
        "
      >
        <table
          border
          cellspacing="0"
          style="
            width: 100%;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
          "
        >
          <tbody>
            <tr align="center">
              <td colspan="4">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <img
                    style="width: 70px; height: 50px"
                    src="@/assets/logo1.jpg"
                    alt=""
                  />
                  <div>
                    <div style="font-size: 14px">嘉实医药</div>
                    <div style="font-size: 10px">HARVEST PHARMACEUTICALS</div>
                  </div>
                </div>
              </td>
              <td colspan="6"> 文件编码: R10/SMP-XS-005-01 </td>
            </tr>
            <tr align="center">
              <td colspan="4" style="padding: 10px"> 编号：SMP-XS-005-01 </td>
              <td colspan="6" style="padding: 10px"> 名称: 产品出库通知单</td>
            </tr>
          </tbody>
        </table>
        <table
          cellspacing="0"
          style="
            width: 100%;
            margin: 20px 0;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
          "
        >
          <tbody>
            <tr align="center">
              <td>产品出库通知单</td>
            </tr>
          </tbody>
        </table>
        <table
          border
          cellspacing="0"
          style="
            width: 100%;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
          "
        >
          <tbody>
            <tr align="center">
              <td rowspan="2" style="padding: 10px 0; width: 130px">
                受托生产企业
              </td>
              <td colspan="2" style="padding: 10px 0"> 单位名称 </td>
              <td colspan="7" style="padding: 10px 0"> </td>
            </tr>
            <tr align="center">
              <td colspan="2" style="padding: 10px 0"> 仓储地址 </td>
              <td colspan="7" style="padding: 10px 0"> </td>
            </tr>
            <tr align="center">
              <td colspan="10" style="padding: 10px 0"> 出库产品信息 </td>
            </tr>
            <tr align="center">
              <td style="padding: 10px 0"> 产品名称 </td>
              <td style="padding: 10px 0"> 规格 </td>
              <td style="padding: 10px 0"> 批号 </td>
              <td style="padding: 10px 0"> 单位 </td>
              <td style="padding: 10px 0"> 数量 </td>
              <td style="padding: 10px 0"> 收货单位 </td>
              <td style="padding: 10px 0"> 收获地址 </td>
              <td style="padding: 10px 0"> 收货人/电话 </td>
              <td style="padding: 10px 0"> 回款时间/承诺回款时间 </td>
              <td style="padding: 10px 0"> 备注 </td>
            </tr>
            <tr align="center" v-for="(item, index) in codeList">
              <td style="padding: 10px 0">{{ item.categoryName }}</td>
              <td style="padding: 10px 0">{{ item.specification }}</td>
              <td style="padding: 10px 0">{{ item.batchNo }}</td>
              <td style="padding: 10px 0">{{ item.measureUnit }}</td>
              <td style="padding: 10px 0">{{ item.measureQuantity }}</td>
              <td style="padding: 10px 0"></td>
              <td style="padding: 10px 0"></td>
              <td style="padding: 10px 0"></td>
              <td style="padding: 10px 0"></td>
              <td style="padding: 10px 0">{{ item.remark }}</td>
            </tr>
            <tr align="center">
              <td colspan="2" style="padding: 10px 0"> 填表人 </td>
              <td colspan="8" style="padding: 10px 0"> 签名/日期： </td>
            </tr>
            <tr align="center">
              <td colspan="2" style="padding: 10px 0"> 审批人 </td>
              <td colspan="8" style="padding: 10px 0"> 签名/日期： </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

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

<script>
  import { mapGetters } from 'vuex';
  import JsBarcode from 'jsbarcode';
  import storageApi from '@/api/warehouseManagement';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    data() {
      return {
        checked: '',
        QRvisible: false,
        codeList: [],
        formData: {}
      };
    },

    methods: {
      open(id) {
        storageApi.getInboundDetailsById(id).then((res) => {
          this.formData = res;
          this.formData.markerName = this.user.info.name;
          this.codeList = res.outInDetailList;
          this.QRvisible = true;
        });
      },
      close() {
        this.QRvisible = false;
      },
      //获取当前日期函数
      getNowFormatDate() {
        let date = new Date(),
          obj = {
            year: date.getFullYear(), //获取完整的年份(4位)
            month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
            strDate: date.getDate(), // 获取当前日(1-31)
            week: '星期' + '日一二三四五六'.charAt(date.getDay()), //获取当前星期几(0 ~ 6,0代表星期天)
            hour: date.getHours(), //获取当前小时(0 ~ 23)
            minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
            second: date.getSeconds() //获取当前秒数(0 ~ 59)
          };
        Object.keys(obj).forEach((key) => {
          if (obj[key] < 10) obj[key] = `0${obj[key]}`;
        });
        // return `${obj.year}年${obj.month}月${obj.strDate}日 ${obj.hour}:${obj.minute}:${obj.second}`;
        return `${obj.year}-${obj.month}-${obj.strDate}`;
      },
      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">
  #printSection {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .table_box {
      width: 70%;
      table-layout: fixed;
      word-break: break-all;
      word-wrap: break-word;
    }
    th,
    td {
      padding: 20px;
      position: relative;
    }
    .barCode {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .person {
      width: 70%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      > div {
        flex: 1;
      }
    }
  }
</style>
