<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: 1px">
              发货单号：{{ formData.docNo }}
            </td>
            <td colspan="3" style="padding: 1px">
              项目: {{ formData.projectName }}</td
            >
            <td colspan="3" style="padding: 1px">
              日期：{{ getNowFormatDate() }}
            </td>
          </tr>
          <tr>
            <td colspan="3" style="padding: 1px 1px 10px 1px">
              客户：{{ formData.linkName }}</td
            >
            <td colspan="3" style="padding: 1px 1px 10px 1px">
              联系电话: {{ formData.linkPhone }}</td
            >
            <td colspan="3" style="padding: 1px 1px 10px 1px">
              车牌号： {{ 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: 1px;width: 120px" > 产品编码 </td>
            <td style="padding: 1px;"> 产品名称 </td>
            <td style="padding: 1px;width: 130px;"> 规格 </td>
            <!-- <td style="padding: 1px"> 型号 </td> -->
            <td style="padding: 1px"> 单位 </td>
            <td style="padding: 1px"> 数量 </td>
            <td style="padding: 1px"> 块数 </td>
            <td style="padding: 1px"> 强度 </td>
            <td style="padding: 1px"> 密度 </td>
            <td style="padding: 1px" v-if="isPrintPrice"> 单价（元） </td>
            <td style="padding: 1px" v-if="isPrintPrice"> 金额（元） </td>
            <td style="padding: 1px"> 备注 </td>
          </tr>
          <tr align="center" v-for="(item, index) in codeList">
            <td style="padding: 1px">{{ item.productCode }}</td>
            <td style="padding: 1px">{{ item.productName }}</td>
            <td style="padding: 1px">{{ item.specification }}</td>
            <!-- <td style="padding: 1px">{{ item.modelType }}</td> -->
            <td style="padding: 1px">{{ item.measuringUnit }}</td>
            <td style="padding: 1px">{{ item.totalCount }}</td>
            <td style="padding: 1px">{{ item.blockCount }}</td>
            <td style="padding: 1px">{{
              item.extField.packagingStrength
            }}</td>
            <td style="padding: 1px">{{ item.extField.packagingDensity }}</td>
            <td style="padding: 1px" v-if="isPrintPrice">{{
              item.discountSinglePrice
            }}</td>
            <td style="padding: 1px" v-if="isPrintPrice">{{
              item.discountTotalPrice
            }}</td>
            <td style="padding: 1px">{{ item.remark }}</td>
          </tr>
          <tr align="center">
            <td colspan="4" style="padding: 1px"> 合计 </td>
            <td colspan="1" style="padding: 1px">
              {{
                codeList.reduce((total, item) => {
                  return (total += item.totalCount);
                }, 0)
              }}
            </td>
            <td style="padding: 1px"></td>
            <td colspan="2" style="padding: 1px"></td>
            <td colspan="1" style="padding: 1px" v-if="isPrintPrice">
              {{
                codeList.reduce((total, item) => {
                  return (total += item.discountTotalPrice);
                }, 0)
              }}
            </td>
            <td colspan="1" v-if="isPrintPrice" style="padding: 1px"></td>
          </tr>
          <tr align="center">
            <td colspan="3" style="padding: 1px">
              注意事项：遗失托盘赔偿260/个
            </td>
            <td colspan="2" style="padding: 1px"> 装车托盘数：</td>
            <td style="padding: 1px"></td>
            <td style="padding: 1px"> 带回托盘数： </td>
            <td :colspan="isPrintPrice ? 3 : 1" style="padding: 1px"></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: 1px">
              承运人：{{ this.formData.driverNames }}</td
            >
            <td colspan="3" style="padding: 1px">
              装卸工：{{ this.formData.carName }}</td
            >
            <td colspan="3" style="padding: 1px"> 签收人：</td>
            <td colspan="3" style="padding: 1px">
              制单人：{{ this.formData.markerName }}</td
            >
          </tr>
          <tr>
            <td colspan="8" style="padding: 1px"
              >物流服务评价：<input
                type="checkbox"
                id="vehicle1"
                name="vehicle1"
                value="Bike"
                style="padding: 1px 1px"
              />
              <span>满意</span>

              <input
                type="checkbox"
                id="vehicle2"
                name="vehicle2"
                value="Car"
                style="padding: 1px 1px"
              /><span>不满意</span>
            </td>
            <td colspan="4" style="padding: 1px"
              >打印时间：{{ getNowFormatDate() }}</td
            >
          </tr>
          <tr>
            <td colspan="2" style="padding: 1px"> (白)记账联 </td>
            <td colspan="2" style="padding: 1px"> (红)客户留存联 </td>
            <td colspan="2" style="padding: 1px"> (蓝)结算联 </td>
            <td colspan="2" style="padding: 1px"> (绿)运费联 </td>
            <td colspan="2" style="padding: 1px"> (黄)装卸联 </td>
            <td colspan="2" style="padding: 1px"> (白)出门联 </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 { getSendSaleOrderrecordDetailSplit } from '@/api/saleManage/saleordersendrecord';
export default {
  name: 'print',
  computed: {
    ...mapGetters(['user'])
  },
  props: {},
  data() {
    return {
      checked: '',
      QRvisible: false,
      isPrintPrice: false,
      codeList: [],
      formData: {},
      carName:""
    };
  },

  methods: {
    open(id, isPrintPrice) {
      this.isPrintPrice = isPrintPrice;
      getSendSaleOrderrecordDetailSplit(id).then((data) => {
        if (JSON.stringify(data) != '{}') {
          this.formData = data;
          this.formData['carName']=data.carList.map(item=>item.name).toString()
          this.formData.projectName = data.saleOrder?.projectName;
          this.formData.driverNames = data.logisticTrakListNoteVOList
            .map((item) => item.driverName)
            .join(','); // 承运人
          this.codeList = data.productList;
          this.formData.markerName = this.user.info.name;
        }
        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>
