<template>
  <ele-modal
    title="出库单"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="90%"
  >
    <div id="printSection">
      <table border cellspacing="0">
        <tbody>
          <tr>
            <td colspan="13" align="center" class="title">
              嘉实（湖南）医药科技有限公司产品出库单</td
            >
          </tr>
          <tr>
            <td colspan="4"> 制单日期：{{ getNowFormatDate() }} </td>
            <td colspan="5"> 制单人：{{ this.user.info.name }} </td>
            <td colspan="4"> 出库单号：{{ this.formData.bizNo }} </td>
          </tr>
          <!-- <tr>
            <td colspan="4"> 上市许可持有人：嘉实(湖南)医药科技有限公司 </td>
            <td colspan="8">
              地址:长沙高新开发区汇智中路179号全导民c区8栋 电话:0731-64221288
            </td>
          </tr>
          <tr>
            <td colspan="4"> 购货单位：阿萨德阿阿斯顿阿萨德 </td>
            <td colspan="8">
              收货地址:长沙高新开发区汇智中路179号全导民c区8栋
            </td>
          </tr> -->
          <tr align="center">
            <td> 产品名称 </td>
            <td> 产品编码 </td>
            <td> 型号 </td>
            <td> 规格 </td>
            <td> 牌号 </td>
            <td> 批次号 </td>
            <td> 最小包装单元 </td>
            <td> 包装数量 </td>
            <td> 计量数量 </td>
            <td> 重量 </td>
            <td> 重量单位 </td>
            <td> 单价 </td>
            <td> 仓库 </td>
          </tr>
          <tr align="center" v-for="(item, index) in codeList">
            <td>{{ item.categoryName }}</td>
            <td>{{ item.categoryCode }}</td>
            <td>{{ item.categoryModel }}</td>
            <td>{{ item.specification }}</td>
            <td>{{ item.brandNum }}</td>
            <td>{{ item.batchNo }}</td>
            <td>{{ item.minPackingQuantity }}</td>
            <td>{{ item.packingQuantity }}</td>
            <td>{{ item.measureQuantity }}</td>
            <td>{{ item.weight }}</td>
            <td>{{ item.weightUnit }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.warehouseName }}</td>
          </tr>
          <!-- <tr align="center">
            <td colspan="7"> 合计 </td>
            <td colspan="2"> 500 </td>
            <td colspan="3"> 5664.000 </td>
          </tr> -->
          <tr>
            <td colspan="13"> 审核人：{{ formData.verifyName }} </td>
            <!-- <td colspan="3"> 开票员：李玉瑶 </td>
            <td colspan="3"> 保管员：李玉瑶 </td>
            <td colspan="3"> 复核：李玉瑶 </td>
            <td colspan="3"> 发货员：李玉瑶 </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 { mapGetters } from 'vuex';

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

    methods: {
      open(id) {
        console.log(this.user);
        storageApi.getInboundDetailsById(id).then((res) => {
          this.formData = res;
          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}`;
      },
      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;
    th,
    td {
      padding: 20px;
    }
    .title {
      font-size: 28px;
      font-weight: bold;
    }
  }
</style>
