<template>
  <!-- 发货打印 -->
  <div style="position:absolute;left:-10000px;top:-10000px;height:0;overflow: hidden;">
    <div id="sendGood-print" v-if="financeBookList&&financeBookList.length">
      <div
        v-for="(fcItem,index) in financeBookList"
        class="sendGood-print-box"
        :key="index+'-fcitem'"
        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>
                  <div>
                    <table border="1" style="width: 564pt;border-collapse: collapse;text-align: center;">
                      <tr>
                        <th style="line-height: 20pt;width: 56pt;background:#f6f6f6;">日期</th>
                        <th style="line-height: 20pt;width: 62pt;background:#f6f6f6;">客户名称</th>
                        <th style="line-height: 20pt;width: 62pt;background:#f6f6f6;">营业执照名称</th>
                        <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">订单金额</th>
                        <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">收款金额</th>
                        <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">使用授信</th>
                        <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">余款抵扣</th>
                        <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">汇入银行</th>
                        <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">足额打款</th>
                        <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">说明</th>
                      </tr>
                      <tr v-for="item in fcItem.subList" :key="item.bookDetailSn">
                        <td style="padding:3pt;width: 50pt;">{{ moment(item.receiptDate).format('YYYY/MM/DD') }}</td>
                        <td style="padding:3pt;width: 56pt;text-align:left;">
                          {{ item.payerName }}
                          <div>
                            {{ item.dealerEntity ? item.dealerEntity.kdMidCustomerFnumber : '' }}
                          </div>
                        </td>
                        <td style="padding:3pt;width: 56pt;text-align:left;">
                          {{ item.payerAccountInfo }}
                        </td>
                        <td style="padding:3pt;width: 48pt;text-align:center;">
                          {{ item.orderAmount?item.orderAmount.toFixed(2):'0.00' }}
                        </td>
                        <td style="padding:3pt;width: 48pt;text-align:center;">
                          {{ item.receiptAmount?item.receiptAmount.toFixed(2):'0.00' }}
                        </td>
                        <td style="padding:3pt;width: 48pt;text-align:center;">
                          {{ getTotal(item.detailItemUseList||[]) }}
                        </td>
                        <td style="padding:3pt;width: 48pt;text-align:center;">
                          {{ item.balanceAmount?item.balanceAmount.toFixed(2):'0.00' }}
                        </td>
                        <td style="padding:3pt;width: 48pt;">
                          {{ item.bankAccount }}<br>
                          {{ item.bankName }}
                        </td>
                        <td style="padding:3pt;width: 48pt;">{{ item.fullPaymentFlagDictValue }}</td>
                        <td style="padding:3pt;width: 54pt;word-break:break-all;">{{ item.remarks }}</td>
                      </tr>
                    </table>
                    <div style="padding:5pt 0;border-bottom: 1px solid #333;">使用授信明细：{{ fcItem.detail||'暂无。' }}</div>
                    <div style="padding:5pt 0;" v-if="fcItem.audit&&fcItem.audit.taskVOList">
                      审批人员：
                      <span v-for="audit in fcItem.audit.taskVOList" :key="audit.processInstanceId" v-if="audit.userType == '审批人'">
                        {{ audit.userName }}({{ audit.state }})；
                      </span>
                    </div>
                    <div style="padding:5pt 0;" v-else>
                      审批人员：
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </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> -->
  </div>
</template>

<script>
import { jGPlPrint } from '@/libs/JGPrint.js'
import moment from 'moment'
export default {
  data () {
    return {
      // spinning: false,
      detail: null,
      financeBookList: [],
      printNums: []
    }
  },
  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.getElementsByClassName('sendGood-print-box')
      const printCons = []
      for (let i = 0; i < html.length; i++) {
        const h = html[i].clientHeight
        printCons.push({
          h: h,
          t: html[i].innerHTML
        })
      }

      // 排序从小到大
      printCons.sort((a, b) => {
        return a['h'] - b['h']
      })

      const htmlStr = []
      for (let i = 0; i < printCons.length; i++) {
        if (printCons[i].h > 560) {
          htmlStr.push('')
        }
        htmlStr.push(printCons[i].t)
      }

      // html, type, callback, printLogParams
      jGPlPrint(htmlStr, 'preview', function (res) {
        _this.handleCommonCancel()
        _this.$emit('printOk')
      }, this.printNums, this.financeBookList)
    },
    getData (data, list) {
      console.log(data)
      this.financeBookList = data
      list.map(item => {
        this.printNums.push({
          billType: 'FINANCE_BOOK_DETAIL',
          billSn: item.bookDetailSn,
          billNo: item.bookNo,
          printType: '收款打印'
        })
      })
      
      // 打印预览
      this.$nextTick(()=>{
        this.handleCommonOk()
      })
    },
    handleCommonCancel () {
      this.$emit('cancel')
      this.clearData()
    },
    clearData () {
      this.detail = null
      this.financeBookList = []
      this.printNums = []
    }
  }
}
</script>

<style>
</style>
