<template>
  <div>
    <a-spin :spinning="spinning" tip="Loading..." style="width: 100%;padding:20px 40px;">
      <div style="height: 60vh;overflow: auto;">
      <div id="sendGood-print" v-if="detailData">
        <div class="sendGood-print-box" style="width:564pt;margin:0 auto;">
          <table ref="printBox" cellspacing="0" cellpadding="0" style="border-collapse: collapse;width: 564pt;font-size:14px;">
            <tr>
              <td>
                <div class="print-box" style="width: 564pt;margin-left:1.5pt;">
                  <div style="text-align:center;margin:15pt 0 5pt;font-size:22px;font-weight: bold;">箭冠退货单</div>
                  <div style="display:flex;align-item:center;justify-content: space-between;flex-wrap: wrap;line-height: 20pt;margin:15pt 0;">
                    <div style="width: 100%;">客户名称：{{ detailData.buyerName||'--' }}</div>
                    <div style="width: 50%;">退货单号：{{ detailData.salesReturnBillNo||'--' }}</div>
                    <div style="width: 50%;">退货日期：{{ detailData.auditTime||'--' }}</div>
                  </div>
                  <div>
                    <div>
                      <table border="1" style="width: 564pt;border-collapse: collapse;text-align: center;">
                        <tr>
                          <th style="line-height: 20pt;width: 40pt;background:#f6f6f6;">序号</th>
                          <th style="line-height: 20pt;width: 65pt;background:#f6f6f6;">产品编码</th>
                          <th style="line-height: 20pt;width: 80pt;background:#f6f6f6;">产品名称</th>
                          <th style="line-height: 20pt;width: 40pt;background:#f6f6f6;">单位</th>
                          <th style="line-height: 20pt;width: 58pt;background:#f6f6f6;">退货数量</th>
                          <th style="line-height: 20pt;width: 58pt;background:#f6f6f6;">实收数量</th>
                          <th style="line-height: 20pt;width: 66pt;background:#f6f6f6;">退货原因</th>
                          <th style="line-height: 20pt;width: 80pt;background:#f6f6f6;">实际原因</th>
                          <th style="line-height: 20pt;width: 78pt;background:#f6f6f6;">备注</th>
                        </tr>
                        <tr v-for="(item,index) in list" :key="item.id">
                          <td style="padding:3pt;width: 34pt;">{{index+1}}</td>
                          <td style="padding:3pt;width: 59pt;text-align:center;">{{ item.productEntity.code }}</td>
                          <td style="padding:3pt;width: 74pt;text-align:center;word-break:break-all;">{{ item.productEntity.name }}</td>
                          <td style="padding:3pt;width: 34pt;text-align:center;">{{ item.productEntity.unit }}</td>
                          <td style="padding:3pt;width: 52pt;text-align:center;">{{ item.initialQty }}</td>
                          <td style="padding:3pt;width: 52pt;text-align:center;"></td>
                          <td style="padding:3pt;width: 60pt;text-align:center;word-break:break-all;">{{ item.returnReason }}</td>
                          <td style="padding:3pt;width: 74pt;text-align:center;word-break:break-all;"></td>
                          <td style="padding:3pt;width: 72pt;word-break:break-all;"></td>
                        </tr>
                        </table>
                        <table border="0" style="width: 564pt;border-collapse: collapse;text-align: center;margin-top:5pt;">
                        <tr>
                          <td style="padding:3pt;width: 34pt;border:0;">&nbsp;</td>
                          <td style="padding:3pt;width: 59pt;border:0;">&nbsp;</td>
                          <td style="padding:3pt;width: 74pt;border:0;">&nbsp;</td>
                          <td style="padding:3pt;width: 34pt;text-align:center;border:0;">合计:</td>
                          <td style="padding:3pt;width: 52pt;text-align:center;border:0;">{{ totalNums }}</td>
                          <td style="padding:3pt;width: 52pt;border:0;">&nbsp;</td>
                          <td style="padding:3pt;width: 60pt;border:0;">&nbsp;</td>
                          <td style="padding:3pt;width: 74pt;border:0;">&nbsp;</td>
                          <td style="padding:3pt;width: 72pt;border:0;">&nbsp;</td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      </div>
      <div class="btn-box" style="display:flex;align-item:center;justify-content: center;">
        <a-button @click="handleCommonCancel">取消</a-button>
        <a-button :loading="spinning" type="primary" @click="handleCommonOk">立即打印</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { jGPrint } from '@/libs/JGPrint.js';
import { salesReturnDetail } from '@/api/salesReturn'
import { salesReturnDetailList } from '@/api/salesReturnDetail'
export default {
  data() {
    return {
      spinning: false,
      detailData: null,
      list: [],
      printNums: []
    };
  },
  computed: {
    totalNums() {
      let ret = 0
      this.list.map(item => {
        ret = ret + item.initialQty
      })
      return ret
    }
  },
  methods: {
    //  详情
    getDetail () {
      this.spinning = true
      salesReturnDetail({ sn: this.salesReturnBillSn }).then(res => {
        if (res.status == 200) {
          this.detailData = res.data
        } else {
          this.detailData = null
        }
        this.spinning = false
      })
    },
    // 明细列表
    getDetailList(){
      salesReturnDetailList({
        pageNo:1,
        pageSize: 999999,
        salesReturnBillSn: this.salesReturnBillSn
      }).then(res => {
        if (res.status == 200) {
          this.list = res.data.list
        } else {
          this.list = null
        }
      })
    },
    handleCommonOk() {
      const _this = this;
      const html = document.getElementById('sendGood-print').innerHTML;
      _this.spinning = true
      jGPrint(
        html,
        'print',
        function(res) {
          _this.spinning = false
          _this.$emit('printOk');
        },
      );
    },
    getData(data) {
       this.salesReturnBillSn = data.salesReturnBillSn
       this.getDetail()
       this.getDetailList()
    },
    handleCommonCancel() {
      this.$emit('cancel');
      this.clearData();
    },
    clearData() {
      this.detailData = null;
      this.list = [];
    }
  }
};
</script>

<style></style>
