<template>
  <!-- 发货打印 -->
  <div>
    <a-spin :spinning="spinning" tip="Loading..." style="height: 60vh;overflow: auto;width: 100%;padding:20px 40px;">
      <div id="sendGood-print" v-if="detail" >
        <table ref="printBox" cellspacing="0" cellpadding="0" style="border-collapse: collapse;width: 562pt;margin:0 auto;font-size:14px;">
          <tr>
            <td>
              <div class="print-box" style="width: 562pt;margin:0 auto;">
                <h1 style="text-align:center;margin:0.2cm 0">销 售 收 款 凭 证</h1>
                <div style="display:flex;align-item:center;justify-content: space-between;flex-wrap: wrap;line-height: 18pt;">
                  <div style="width: 50%;">客户名称：{{ detail.settleClientName||'--' }}</div>
                  <div style="width: 50%;">支付方式：{{ detail.settleStyleDictValue||'--' }}</div>
                  <div style="width: 50%;">收货客户名称：{{ detail.receiverName||'--' }}</div>
                  <div style="width: 50%;">发货编号：{{ detail.sendNo||'--' }}</div>
                  <div style="width: 50%;">销售单号：{{ detail.bizNo||'--' }}</div>
                  <div style="width: 50%;">下推单号：{{ detail.dispatchBillNo||'--' }}</div>
                  <div style="width: 50%;">收款类型：{{ detail.keepTypeDictValue||'--' }}</div>
                  <div style="width: 50%;">收款时间：{{ detail.settleTime||'--' }}</div>
                  <div style="width: 50%;">收款人：{{ detail.settlePersonName||'--' }}</div>
                </div>
                <div v-for="(fcItem,index) in financeBookList" :key="fcItem.bookSn">
                  <div style="line-height: 30pt;">共 {{ financeBookList.length }} 个财务收款单，以下是第 {{ index+1 }} 个</div>
                  <div>
                    <table border="1" style="width: 562pt;border-collapse: collapse;text-align: center;">
                      <tr>
                        <th style="line-height: 20pt;width: 30pt;background:#f6f6f6;">序号</th>
                        <th style="line-height: 20pt;width: 50pt;background:#f6f6f6;">日期</th>
                        <th style="line-height: 20pt;width: 120pt;background:#f6f6f6;">客户信息</th>
                        <th style="line-height: 20pt;width: 152pt;background:#f6f6f6;">收款信息</th>
                        <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">汇入银行</th>
                        <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">足额打款</th>
                        <th style="line-height: 20pt;width: 90pt;background:#f6f6f6;">备注</th>
                      </tr>
                      <tr v-for="(item,dindex) in fcItem.financeBookDetailList" :key="item.bookDetailSn">
                        <td style="padding:3pt;width: 24pt;">{{ dindex+1 }}</td>
                        <td style="padding:3pt;width: 44pt;">{{ moment(item.receiptDate).format('M月D日') }}</td>
                        <td style="padding:3pt;width: 114pt;text-align:left;">
                          {{ item.dealerEntity.dealerName }}<br>
                          {{ item.dealerEntity.kdMidCustomerFnumber }}<br>
                          {{ item.dealerEntity.licenseName }}
                        </td>
                        <td style="padding:3pt;width: 146pt;text-align:left;">
                          订单金额：{{ item.orderAmount?item.orderAmount.toFixed(2):'0.00' }}<br>
                          收款金额：{{ item.receiptAmount?item.receiptAmount.toFixed(2):'0.00' }}<br>
                          使用授信：{{ getTotal(item.detailItemUseList||[]) }}<br>
                          授信还款：{{ getTotal(item.detailItemPayList||[]) }}<br>
                          余款抵扣：{{ item.balanceAmount?item.balanceAmount.toFixed(2):'0.00' }}<br>
                          跨月打款：{{ item.nextMonthAmount?item.nextMonthAmount.toFixed(2):'0.00' }}
                        </td>
                        <td style="padding:3pt;width: 54pt;">
                          {{ item.bankAccount }}<br>
                          {{ item.bankName }}<br>
                        </td>
                        <td style="padding:3pt;width: 54pt;">{{ item.fullPaymentFlagDictValue }}</td>
                        <td style="padding:3pt;width: 84pt;word-break:break-all;">{{ item.remarks }}</td>
                      </tr>
                    </table>
                    <div style="line-height: 30pt;">附：钉钉审批明细</div>
                    <table border="1" style="width: 562pt;border-collapse: collapse;text-align: center;">
                      <tr>
                        <th style="line-height: 20pt;width: 110pt;background:#f6f6f6;">人员姓名</th>
                        <th style="line-height: 20pt;width: 110pt;background:#f6f6f6;">人员类型</th>
                        <th style="line-height: 20pt;width: 110pt;background:#f6f6f6;">状态</th>
                        <th style="line-height: 20pt;width: 117pt;background:#f6f6f6;">审批意见</th>
                        <th style="line-height: 20pt;width: 115pt;background:#f6f6f6;">操作时间</th>
                      </tr>
                      <tr v-for="(item,six) in fcItem.processInstanceTaskList" :key="six+'-processInstanceTask'">
                        <td style="padding:3pt;width: 104pt;">{{ item.userName||'--' }}</td>
                        <td style="padding:3pt;width: 104pt;">{{ item.userType||'--' }}</td>
                        <td style="padding:3pt;width: 104pt;">{{ item.state||'--' }}</td>
                        <td style="padding:3pt;width: 111pt;">{{ item.remark||'--' }}</td>
                        <td style="padding:3pt;width: 109pt;">{{ item.date||'--' }}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </a-spin>
    <div class="btn-box" style="display:flex;align-item:center;justify-content: center;" v-if="detail">
      <a-button @click="handleCommonCancel">取消</a-button>
      <a-button :loading="spinning" type="primary" @click="handleCommonOk">立即打印</a-button>
    </div>
  </div>
</template>

<script>
import { jGPrint } from '@/libs/JGPrint.js'
import moment from 'moment'
import { settleReceiptPrintFindBySn } from '@/api/settleReceipt.js'
export default {
  data () {
    return {
      spinning: false,
      detail: null,
      financeBookList: []
    }
  },
  methods: {
    moment,
    getTotal (data) {
      let ret = 0
      data.map(item => {
        ret = ret + item.itemAmount
        delete item.id
      })
      return ret.toFixed(2)
    },
    handleCommonOk () {
      const _this = this
      const html = document.getElementById('sendGood-print').innerHTML
      _this.spinning = true
      // html, type, callback, printLogParams
      jGPrint(html, 'print', function (res) {
        _this.spinning = false
        _this.handleCommonCancel()
        _this.$emit('printOk')
      }, {
        billType: 'SETTLE_RECEIPT',
        billSn: this.detail.accountReceiptSn,
        billNo: this.detail.accountReceiptNo,
        printType: '收款打印'
      })
    },
    getData (data, flag) {
      this.spinning = true
      settleReceiptPrintFindBySn({ sn: data.accountReceiptSn }).then(res => {
        if (res.status == 200) {
          this.detail = res.data || null
          if (res.data && res.data.financeBookList) {
            this.financeBookList = res.data.financeBookList
          }
        } else {
          this.handleCommonCancel()
        }
        this.spinning = false
      })
    },
    handleCommonCancel () {
      this.$emit('cancel')
      this.detail = null
      this.financeBookList = []
    }
  }
}
</script>

<style>
</style>
