<template>
  <a-modal
    centered
    :footer="null"
    :maskClosable="false"
    title="关联单据"
    v-model="isShow"
    @cancel="handleCommonCancel"
    width="70%">
    <a-spin :spinning="spinning" tip="Loading...">
      <div v-if="detailData">
        <a-descriptions :column="{ xs: 2, sm: 3, md: 2}">
          <a-descriptions-item label="收款单号">{{ detailData&&detailData.bookNo || '--' }}</a-descriptions-item>
          <a-descriptions-item label="申请人">{{ detailData&&detailData.applyPersonName || '--' }}</a-descriptions-item>
          <a-descriptions-item label="收款事由">{{ detailData&&detailData.bookReason || '--' }}</a-descriptions-item>
          <a-descriptions-item label="状态">{{ detailData&&detailData.statusDictValue || '--' }}</a-descriptions-item>
        </a-descriptions>
      </div>
      <s-table
        class="sTable fixPagination"
        ref="table"
        size="small"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :scroll="{ y: 500 }"
        :showPagination="false"
        :defaultLoadData="true"
        bordered>
      </s-table>
      <div class="btn-box" style="text-align:center;padding-top:20px;">
        <a-button @click="handleCommonCancel">关闭</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable } from '@/components'
import { querySettleReceiptFinanceBookList } from '@/api/financeBook.js'
export default {
  name: 'DispatchModal',
  components: { STable },
  mixins: [commonMixin],
  props: {
    openModal: {
      type: Boolean,
      default: false
    },
    itemSn: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      spinning: false,
      isShow: this.openModal,
      detailData: null,
      columns: [
        { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
        { title: '单据类型', dataIndex: 'bizTypeDictValue', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
        { title: '单据号', dataIndex: 'bizNo', align: 'center', width: '12%', customRender: function (text) { return text || '--' } },
        { title: '客户名称', dataIndex: 'buyerName', align: 'center', width: '12%', customRender: function (text) { return text || '--' } },
        { title: '收货客户名称', dataIndex: 'receiverName', align: 'center', width: '12%', customRender: function (text) { return text || '--' } },
        { title: '发货编号', dataIndex: 'sendNo', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
        { title: '产品款数', dataIndex: 'totalCategory', align: 'center', width: '8%', customRender: function (text) { return (text == 0 || text) ? text : '--' } },
        { title: '产品数量', dataIndex: 'totalQty', align: 'center', width: '8%', customRender: function (text) { return (text == 0 || text) ? text : '--' } },
        { title: '总售价', dataIndex: 'totalAmount', align: 'right', width: '8%', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
        { title: '业务状态', dataIndex: 'billStatusDictValue', align: 'center', width: '10%', customRender: function (text) { return text || '--' } },
        { title: '财务状态', dataIndex: 'financialStatusDictValue', align: 'center', width: '8%', customRender: function (text) { return (text == 0 || text) ? text : '--' } }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const params = Object.assign(parameter, { bookSn: this.itemSn })
        return querySettleReceiptFinanceBookList(params).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            for (var i = 0; i < data.length; i++) {
              data[i].no = i + 1
              const cons = data[i].bizType == 'DISPATCH' ? {
                buyerName: data[i].dispatchBill.buyerName,
                receiverName: data[i].dispatchBill.receiverName,
                sendNo: data[i].dispatchBill.sendNo,
                totalCategory: data[i].dispatchBill.totalCategory,
                totalQty: data[i].dispatchBill.totalQty,
                totalAmount: data[i].dispatchBill.totalAmount,
                billStatusDictValue: data[i].dispatchBill.billStatusDictValue,
                financialStatusDictValue: data[i].dispatchBill.financialStatusDictValue,
                dispatchBillSn: data[i].dispatchBill.dispatchBillSn,
                salesBillSn: data[i].dispatchBill.salesBillSn
              } : {
                buyerName: data[i].allocateBill.targetName,
                receiverName: data[i].allocateBill.receiverName,
                sendNo: data[i].allocateBill.sendNo,
                totalCategory: data[i].allocateBill.totalCategory,
                totalQty: data[i].allocateBill.totalQty,
                totalAmount: data[i].allocateBill.totalPrice,
                billStatusDictValue: data[i].allocateBill.stateDictValue,
                allocateNo: data[i].allocateBill.allocateNo,
                allocateSn: data[i].allocateBill.allocateSn
              }
              data[i] = Object.assign(data[i], cons)
            }
          }
          return data
        })
      }
    }
  },
  methods: {
    handleCommonCancel () {
      this.$emit('close')
      this.$refs.table.clearTable()
      this.detailData = null
    },
    setDetail (data) {
      this.detailData = data
    }
  },
  watch: {
    openModal (nVal, oVal) {
      this.isShow = nVal
    },
    isShow (nVal, oVal) {
      if (!nVal) {
        this.handleCommonCancel()
      } else {
        this.$nextTick(() => {
          this.$refs.table.refresh(true)
        })
      }
    }
  }
}
</script>

<style>
</style>
