<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"
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
        "
      >
        <tbody>
          <tr align="center">
            <td colspan="3">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img
                  style="width: 80px; height: 80px"
                  src="@/assets/logo.jpg"
                  alt=""
                />
                <div>
                  <div style="font-size: 14px">湖南宝悦新型建材有限公司</div>
                  <div style="font-size: 10px"
                    >HUNAN BAO YUE BULIDING MATERAIL</div
                  >
                </div>
              </div>
            </td>
            <td colspan="3" style="font-size: 24px">
              <div style="border-bottom: 2px solid #000; width: 150px"
                >销 售 出 库 单</div
              >
            </td>
            <td colspan="3"><svg id="print"></svg></td>
          </tr>
          <tr>
            <td colspan="3" style="padding: 2.5px">
              出库单号：{{ formData.bizNo }}
            </td>
            <td colspan="3" style="padding: 2.5px">
              项目: {{ formData.projectName }}</td
            >
            <td colspan="3" style="padding: 2.5px">
              日期：{{ getNowFormatDate() }}
            </td>
          </tr>
          <tr>
            <td colspan="3" style="padding: 2.5px 2.5px 10px 2.5px">
              客户：{{ formData.linkName }}</td
            >
            <td colspan="3" style="padding: 2.5px 2.5px 10px 2.5px">
              联系电话: {{ formData.linkPhone }}</td
            >
            <td colspan="3" style="padding: 2.5px 2.5px 10px 2.5px">
              车牌号： {{ formData.carNo }}</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: 2.5px"> 产品编码 </td>
            <td style="padding: 2.5px"> 产品名称 </td>
            <td style="padding: 2.5px"> 规格型号 </td>
            <td style="padding: 2.5px"> 单位 </td>
            <td style="padding: 2.5px"> 数量 </td>
            <td style="padding: 2.5px"> 块数 </td>
            <td style="padding: 2.5px"> 强度 </td>
            <td style="padding: 2.5px"> 密度 </td>
            <td style="padding: 2.5px"> 备注 </td>
          </tr>
          <tr align="center" v-for="(item, index) in codeList">
            <td style="padding: 2.5px">{{ item.categoryCode }}</td>
            <td style="padding: 2.5px">{{ item.categoryName }}</td>
            <td style="padding: 2.5px"
              >{{ item.specification }}{{ item.categoryModel }}</td
            >
            <td style="padding: 2.5px">{{ item.measureUnit }}</td>
            <td style="padding: 2.5px">{{ item.measureQuantity }}</td>
            <td style="padding: 2.5px">{{ item.packingQuantity }}</td>
            <td style="padding: 2.5px">{{ item.packagingStrength }}</td>
            <td style="padding: 2.5px">{{ item.packagingDensity }}</td>
            <td style="padding: 2.5px">{{ item.remark }}</td>
          </tr>
          <tr align="center">
            <td colspan="4" style="padding: 2.5px"> 合计 </td>
            <td colspan="1" style="padding: 2.5px">
              {{
                codeList.reduce((total, item) => {
                  return (total += item.measureQuantity);
                }, 0)
              }}
            </td>
            <td style="padding: 2.5px"></td>
            <td colspan="2" style="padding: 2.5px"></td>
            <td colspan="1" style="padding: 2.5px"></td>
          </tr>
          <tr align="center">
            <td colspan="3" style="padding: 2.5px">
              注意事项：遗失托盘赔偿260/个
            </td>
            <td colspan="2" style="padding: 2.5px"> 装车托盘数：</td>
            <td style="padding: 2.5px"></td>
            <td style="padding: 2.5px"> 带回托盘数： </td>
            <td colspan="2" style="padding: 2.5px"></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: 2.5px">
              承运人：{{ this.formData.driverNames }}</td
            >
            <td colspan="3" style="padding: 2.5px"> 装卸工：</td>
            <td colspan="3" style="padding: 2.5px"> 签收人：</td>
            <td colspan="3" style="padding: 2.5px">
              制单人：{{ this.formData.markerName }}</td
            >
          </tr>
          <tr>
            <td colspan="8" style="padding: 2.5px"
              >物流服务评价：<input
                type="checkbox"
                id="vehicle1"
                name="vehicle1"
                value="Bike"
                style="padding: 1px 2.5px"
              />
              <span>满意</span>

              <input
                type="checkbox"
                id="vehicle2"
                name="vehicle2"
                value="Car"
                style="padding: 1px 2.5px"
              /><span>不满意</span>
            </td>
            <td colspan="4" style="padding: 2.5px"
              >打印时间：{{ getNowFormatDate() }}</td
            >
          </tr>
          <tr>
            <td colspan="2" style="padding: 2.5px"> (白)记账联 </td>
            <td colspan="2" style="padding: 2.5px"> (红)客户留存联 </td>
            <td colspan="2" style="padding: 2.5px"> (蓝)结算联 </td>
            <td colspan="2" style="padding: 2.5px"> (绿)运费联 </td>
            <td colspan="2" style="padding: 2.5px"> (黄)装卸联 </td>
            <td colspan="2" style="padding: 2.5px"> (白)出门联 </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 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);
          storageApi.getBySendRecordNo(res.sourceBizNo).then((data) => {
            console.log('res---------', data);
            if (JSON.stringify(data) != '{}') {
              this.formData.projectName = data.saleOrder?.projectName;
              this.formData.carNo = data.carNo; // 车牌号
              this.formData.linkName = data.linkName; // 客户名称
              this.formData.linkPhone = data.linkPhone; // 客户电话
              this.formData.driverNames = data.logisticTrakListNoteVOList
                .map((item) => item.driverName)
                .join(','); // 承运人
              this.codeList = this.codeList.map((item) => {
                let obj = data.productList.filter(
                  (proItem) => proItem.productId == item.categoryId
                )[0];
                console.log('obj---------', obj);
                return {
                  ...item,
                  packagingDensity: obj.extField.packagingDensity,
                  packagingStrength: obj.extField.packagingStrength
                };
              });
            }
            this.QRvisible = true;
            this.$nextTick(() => {
              JsBarcode('#print', '1234567822222', {
                format: 'CODE39', //选择要使用的条形码类型
                width: 0.8, //设置条之间的宽度
                height: 50, //高度
                displayValue: false, //是否在条形码下方显示文字
                text: '', //覆盖显示的文本
                fontOptions: 'bold italic', //使文字加粗体或变斜体
                font: 'fantasy', //设置文本的字体
                textAlign: 'right', //设置文本的水平对齐方式
                textPosition: 'top', //设置文本的垂直位置
                textMargin: 1, //设置条形码和文本之间的间距
                fontSize: 15, //设置文本的大小
                background: '#fff', //设置条形码的背景
                lineColor: '#000', //设置条和文本的颜色。
                margin: 2 //设置条形码周围的空白边距
              });
            });
          });
        });
      },
      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>
