<template>
  <ele-modal
    title="打印请托单"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="70%"
    :maxable="true"
  >
    <div
      id="printSection"
      style="
        width: 210mm;
        padding: 10mm 15mm;
        font-family: 'SimSun', 'Microsoft YaHei', sans-serif;
        color: #000;
        box-sizing: border-box;
      "
    >
      <h2
        style="
          text-align: center;
          font-size: 20pt;
          font-weight: bold;
          margin-bottom: 10mm;
        "
        >工作受托书</h2
      >

      <div
        style="
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 8mm;
        "
      >
        <div style="text-align: center; margin-right: 15mm">
          <img
            :src="form.qrCodeUrl"
            alt="二维码"
            style="width: 30mm; height: 30mm"
          />
          <div style="margin-top: 2mm; font-size: 10pt">{{ form.code }}</div>
        </div>
      </div>

      <div style="margin-bottom: 10mm; font-size: 11pt">
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 3mm;
          "
        >
          <div style="flex: 1; min-width: 45mm"
            >请托单位：{{ form.pleaseEntrustDeptName }}</div
          >
          <div style="flex: 1; min-width: 45mm"
            >请托日期：{{ form.pleaseEntrustDate }}</div
          >
          <div style="flex: 1; min-width: 45mm"
            >请托人：{{ form.pleaseEntrustUserName }}</div
          >
          <div style="flex: 1; min-width: 45mm"
            >完成日期：{{ form.finishDate }}</div
          >
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 3mm;
          "
        >
          <div style="flex: 1; min-width: 45mm"
            >受托单位：{{ form.receiveDeptName }}</div
          >
          <div style="flex: 1; min-width: 45mm"
            >审批日期：{{ form.approvalDate }}</div
          >
          <div style="flex: 1; min-width: 45mm"
            >审批人：{{ form.approvalUserName }}</div
          >
          <div style="flex: 1; min-width: 45mm"></div>
        </div>
      </div>

      <table
        style="
          width: 100%;
          border-collapse: collapse;
          font-size: 8pt;
          text-align: center;
        "
        border="1"
        cellspacing="0"
        cellpadding="4"
      >
        <thead>
          <tr>
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >生产工单号</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >工序名称</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >请托数量</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >需求描述</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >计划编号</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >批次号</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >编号</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >名称</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >规格</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >牌号</th
            >
            <th
              style="background-color: #f8f8f8; font-weight: bold; padding: 5px"
              >型号</th
            >
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in orderList" :key="index">
            <td style="padding: 5px; height: 25px">{{ item.workOrderCode }}</td>
            <td style="padding: 5px; height: 25px">{{ item.taskName }}</td>
            <td style="padding: 5px; height: 25px">{{ item.totalCount }}</td>
            <td style="padding: 5px; height: 25px">{{ item.describes }}</td>
            <td style="padding: 5px; height: 25px">{{
              item.productionPlanCode
            }}</td>
            <td style="padding: 5px; height: 25px">{{ item.batchNo }}</td>
            <td style="padding: 5px; height: 25px">{{ item.code }}</td>
            <td style="padding: 5px; height: 25px">{{ item.name }}</td>
            <td style="padding: 5px; height: 25px">{{ item.specification }}</td>
            <td style="padding: 5px; height: 25px">{{ item.brandNum }}</td>
            <td style="padding: 5px; height: 25px">{{ item.modelType }}</td>
          </tr>
          <tr v-if="!orderList.length">
            <td colspan="11" style="text-align: center; height: 60px"
              >暂无数据</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 QRCode from 'qrcode';
  export default {
    name: 'EntrustPrint',

    data() {
      return {
        QRvisible: false,
        form: {
          qrCodeUrl: '', // 二维码图片
          code: '', // 单号
          pleaseEntrustDeptName: '', // 请托单位
          pleaseEntrustDate: '', // 请托日期
          pleaseEntrustUserName: '', // 请托人
          finishDate: '', // 完成日期
          receiveDeptName: '', // 受托单位
          approvalDate: '', // 审批日期
          approvalUserName: '' // 审批人
        },
        orderList: [],
        qrCodeUrl: ''
      };
    },

    methods: {
      open(item) {
        this.QRvisible = true;

        const obj = { ...item[0] };

        const {
          applyFactoriesName,
          createTime,
          createUserName,
          planDeliveryTime,
          beEntrustedFactoriesName,
          beEntrustedUserName,
          code
        } = obj;

        Object.assign(this.form, {
          pleaseEntrustDeptName: applyFactoriesName,
          pleaseEntrustUserName: createUserName,
          pleaseEntrustDate: createTime.split(' ')[0],
          finishDate: planDeliveryTime.split(' ')[0],
          receiveDeptName: beEntrustedFactoriesName,
          approvalUserName: beEntrustedUserName,
          code
        });

        const newData = {
          ...this.deepCopy(obj)
        };

        this.orderList.push(newData);
        this.qrCodeUrl = `${window.location.origin}/traceability?id=${this.form.code}`;
        this.$nextTick(this.generateQRCodes);
      },

      generateQRCodes() {
        if (this.form.code) {
          QRCode.toDataURL(this.qrCodeUrl, { width: 200, margin: 1 })
            .then((url) => {
              console.log(url, '返回的地址');
              this.form.qrCodeUrl = url;
            })
            .catch(console.error);
        }
      },

      deepCopy(obj, hash = new WeakMap()) {
        if (obj === null) return null;
        if (obj instanceof Date) return new Date(obj);
        if (obj instanceof RegExp) return new RegExp(obj);
        if (typeof obj !== 'object' && typeof obj !== 'function') return obj;
        if (hash.has(obj)) return hash.get(obj);

        const result = Array.isArray(obj) ? [] : {};
        hash.set(obj, result);

        return Object.keys(obj).reduce((acc, key) => {
          acc[key] = this.deepCopy(obj[key], hash);
          return acc;
        }, result);
      },

      close() {
        this.QRvisible = false;
      },

      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 scoped>
  .print-container {
    width: 210mm;
    padding: 10mm 15mm;
    font-family: 'SimSun', 'Microsoft YaHei', sans-serif;
    color: #000;
    box-sizing: border-box;
  }

  .title {
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
    margin-bottom: 10mm;
  }

  .header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8mm;
  }

  .qr-section {
    text-align: center;
    margin-right: 15mm;
  }

  .qr-img {
    width: 30mm;
    height: 30mm;
  }

  .qr-code-text {
    margin-top: 2mm;
    font-size: 10pt;
  }

  .info-section {
    margin-bottom: 10mm;
    font-size: 11pt;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3mm;
  }

  .info-item {
    flex: 1;
    min-width: 45mm;
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
    text-align: center;
  }

  .data-table th {
    background-color: #f8f8f8;
    font-weight: bold;
    padding: 5px;
  }

  .data-table td {
    padding: 5px;
    height: 25px;
  }
</style>
