<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;
          padding: 50px 20px 10px 20px;
          box-sizing: border-box;
        "
      >
        <table
          cellspacing="0"
          style="
            width: 100%;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
            font-size: 12px;
          "
        >
          <tbody>
            <tr align="center">
              <td colspan="12" style="font-size: 24px; font-weight: bold">
                嘉实（湖南）医药科技有限公司产品出库单
              </td>
            </tr>
            <tr style="padding-top: 20px">
              <td colspan="5" style="padding: 20px 10px 2.5px 10px">
                制单日期：{{ getNowFormatDate() }}
              </td>
              <td colspan="5" style="padding: 20px 10px 2.5px 10px">
                发货日期: {{ getNowFormatDate() }}</td
              >
              <td colspan="3" style="padding: 20px 10px 2.5px 10px">
                出库日期：{{ getNowFormatDate() }}
              </td>
            </tr>
            <tr>
              <td colspan="5" style="padding: 2.5px 10px">
                上市许可持有人：嘉实（湖南）医药科技有限公司</td
              >
              <td colspan="5" style="padding: 2.5px 10px">
                地址: 长沙高新开发区汇智中路179号金导园C区8栋</td
              >
              <td colspan="3" style="padding: 2.5px 10px">
                电话： 0731-84221288</td
              >
            </tr>
            <tr>
              <td colspan="5" style="padding: 2.5px 10px"> 受托生产企业：</td>
              <td colspan="8" style="padding: 2.5px 10px"> 地址: </td>
            </tr>
            <tr>
              <td colspan="5" style="padding: 2.5px 10px 10px 10px">
                购货单位：</td
              >
              <td colspan="8" style="padding: 2.5px 10px 10px 10px">
                收货地址:
              </td>
            </tr>
          </tbody>
        </table>
        <table
          border
          cellspacing="0"
          style="
            width: 100%;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
            font-size: 12px;
          "
        >
          <tbody>
            <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>
              <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.extField?.packingSpecification
              }}</td>
              <td style="padding: 10px 0">{{ item.measureUnit }}</td>
              <td style="padding: 10px 0">{{ item.approvalNumber }}</td>
              <td style="padding: 10px 0">{{ item.batchNo }}</td>
              <td style="padding: 10px 0">{{ item.packingUnit }}</td>
              <td style="padding: 10px 0">{{ item.measureQuantity }}</td>
              <td style="padding: 10px 0">{{ item.unitPrice }}</td>
              <td style="padding: 10px 0">{{ item.totalMoney }}</td>
              <td style="padding: 10px 0"></td>
              <td style="padding: 10px 0">{{ item.remark }}</td>
            </tr>
            <tr align="center">
              <td colspan="7" style="padding: 10px 0"> 合计 </td>
              <td style="padding: 10px 0">
                {{
                  codeList.reduce((total, item) => {
                    return (total += item.measureQuantity);
                  }, 0)
                }}</td
              >
              <td style="padding: 10px 0"> {{ codeList[0].unitPrice }}</td>
              <td style="padding: 10px 0">
                {{
                  codeList.reduce((total, item) => {
                    return (total += item.totalMoney);
                  }, 0)
                }}</td
              >
              <td style="padding: 10px 0"></td>
              <td style="padding: 10px 0"></td>
            </tr>
          </tbody>
        </table>
        <table
          cellspacing="0"
          style="
            width: 100%;
            table-layout: fixed;
            word-break: break-all;
            word-wrap: break-word;
            font-size: 12px;
          "
        >
          <tbody>
            <tr>
              <td colspan="3" style="padding: 10px 0"> 开票员：</td>
              <td colspan="3" style="padding: 10px 0">
                保管员：{{ formData.markerName }}</td
              >
              <td colspan="3" style="padding: 10px 0"> 复核：</td>
              <td colspan="3" style="padding: 10px 0"> 发货员：</td>
            </tr>
            <tr>
              <td colspan="3" style="padding: 10px 0"> 白联：开票留存 </td>
              <td colspan="3" style="padding: 10px 0"> 红联：仓库留存 </td>
              <td colspan="3" style="padding: 10px 0"> 蓝联：财务留存 </td>
              <td colspan="3" 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) {
        console.log(this.user);
        // 制单人
        storageApi.getInboundDetailsById(id).then((res) => {
          this.formData = res;
          this.formData.markerName = this.user.info.name;
          this.codeList = res.outInDetailList;
          this.codeList.reduce((total, item) => {
            return (total += item.measureQuantity);
          }, 0);
          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>
