<template>
  <el-dialog
    title="送货单"
    :visible.sync="visible"
    center
    append-to-body
    width="70%"
    :close-on-click-modal="false"

>

    <div id="printSection">
      <div style="text-align: center; padding-bottom: 20px;">
        <h3 style="margin: 0; font-size: 18px; font-weight: 800;">{{ groupName }}送货单</h3>
      </div>

      <div style="margin-bottom: 15px; width: 100%;">
        <div style="display: flex; margin-bottom: 8px; width: 100%;">
          <div style="flex: 1; text-align: left;">客户名称：</div>
          <div style="flex: 1; text-align: left;">发货单号：{{ infoData.allotCode || '' }}</div>
        </div>
        <div style="display: flex; margin-bottom: 8px;">
          <div style="flex: 1; text-align: left;">发货日期：{{ infoData.createTime || '' }}</div>
          <div style="flex: 1; text-align: left;">联系人：</div>
        </div>
        <div style="display: flex;">
          <div style="flex: 1; text-align: left;">联系电话：</div>
        </div>
      </div>

      <table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
        <thead>
          <tr>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 40px;">序号</th>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 15%;">型号</th>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 20%;">零件名</th>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 8%;">单位</th>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 8%;">送货数量</th>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 8%;">验收数量</th>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 10%;">备注</th>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 12%;">订单号</th>
            <th style="border: 1px solid #000; padding: 8px; text-align: center; width: 12%;">加工工艺</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in detailList" :key="index">
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ index + 1 }}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ item.categoryModel || '' }}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ item.categoryName || '' }}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ item.measureUnit || '' }}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ item.quantity || '' }}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ item.quantity || '' }}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ item.remark || '' }}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ item.saleOrderNo || '' }}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ item.produceRoutingName || '' }}</td>
          </tr>
          <tr style="height: 40px;">
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
            <td colspan="2" style="border: 1px solid #000; padding: 8px; text-align: center;">合计</td>
            <!-- <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td> -->
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ detailList.reduce((total, item) => total + Number(item.quantity || 0), 0) || ''}}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;">{{ detailList.reduce((total, item) => total + Number(item.quantity || 0), 0) || ''}}</td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
            <td style="border: 1px solid #000; padding: 8px; text-align: center;"></td>
          </tr>
        </tbody>
      </table>

      <div style="display: flex; width: 100%;">
        <div style="flex: 1;">发货人：{{ infoData.allotName || '' }}</div>
        <div style="flex: 1;">送货人：</div>
        <div style="flex: 1;">收货人：</div>
      </div>
    </div>

    <div
      slot="footer"
      style="text-align: right"
    >
      <el-button type="primary" @click="confirm">打印预览</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import storageApi from '@/api/warehouseManagement/index.js';
export default {
  props: {
    groupName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false,
      row: {
        customerName: '',
        contactPerson: '',
        contactPhone: '',
        items: [{
          model: '',
          partName: '',
          unit: '',
          deliveryQuantity: '',
          receivedQuantity: '',
          remark: '',
          orderNumber: '',
          processingTechnology: '',
        }],
        deliverer: '',
        carrier: '',
        receiver: '',
      },
      detailList: [],
      infoData: {},
    }
  },
  computed: {

  },
  methods: {
    async open (row) {
      console.log('row', row)
      this.row = row;
      this.getData();
      this.visible = true;
    },
    async getData() {
      const res = await storageApi.getAllotDetailList({
          applyId: this.row.id
        });
        const data = await storageApi.getAllotDetail(this.row.id);
        this.infoData = data;
        if (this.infoData.type == 1) {
          // 库内调拨
          /* this.infoData.auditStatus = 2; */
          this.infoData.auditStatus = data.status;
        } else {
          // 库外调拨
          this.infoData.auditStatus = data.status;
        }
        this.detailList = res.map((item) => {
          return {
            ...item,
            // categoryCode: this.infoData.categoryCode,
            // categoryName: this.infoData.categoryName,
            // brandNum: this.infoData.brandNum,
            // categoryModel: this.infoData.model,
            // specification: this.infoData.specification
          };
        });
        console.log('infoData', this.infoData)
        console.log('detailList', this.detailList)
    },
    confirm () {
     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();
      };
    },
    cancel () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>