<template>
  <a-modal
    centered
    :footer="null"
    :maskClosable="false"
    title="结算明细"
    v-model="isShow"
    @cancel="isShow=false"
    width="70%">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-descriptions :column="3">
        <a-descriptions-item label="结算时间">
          {{ this.settleData &&this.settleData.payDate?this.settleData.payDate:'--' }}
        </a-descriptions-item>
        <a-descriptions-item label="结算金额">
          {{ this.settleData &&this.settleData.settleAmount?toThousands(this.settleData.settleAmount,2):'--' }}
        </a-descriptions-item>
        <a-descriptions-item label="支付方式">
          {{ this.settleData&&this.settleData.payWayDictValue?this.settleData.payWayDictValue:'--' }}
        </a-descriptions-item>
      </a-descriptions>
      <!-- 可导入数据 -->
      <s-table
        class="sTable"
        ref="table"
        size="small"
        :rowKey="(record) => record.allocateSn"
        :columns="nowColumns"
        :data="loadData"
        :loading="loading"
        :defaultLoadData="true"
        :scroll="{ y: 600 }"
        bordered>
      </s-table>
    </a-spin >
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { queryOrderBillDetailPage } from '@/api/merchant'
import { toThousands } from '@/libs/tools.js'
export default {
  components: { STable },
  name: 'ChooseImportModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    settleData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      toThousands,
      spinning: false,
      isShow: this.openModal, //  是否打开弹框
      nowColumns: [
        { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
        { title: '取货时间', dataIndex: 'outDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '订单编号', dataIndex: 'orderBillNo', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '货位号', dataIndex: 'shelfPlaceCode', width: '7%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '产品编码', width: '15%', dataIndex: 'productCode', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品名称', width: '20%', dataIndex: 'productName', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '结算价', width: '10%', dataIndex: 'settlePrice', align: 'right', customRender: function (text) { return toThousands(text, 2) || '--' } },
        { title: '下单数量', width: '8%', dataIndex: 'totalQty', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '合计金额', width: '10%', dataIndex: 'settleAmount', align: 'right', customRender: function (text) { return toThousands(text, 2) || '--' } }
      ],
      loadData: parameter => {
        this.spinning = true
        const paramsPage = Object.assign(parameter, { settleBillSn: this.settleData && this.settleData.settleBillSn ? this.settleData.settleBillSn : '' })
        return queryOrderBillDetailPage(paramsPage).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            const no = (data.pageNo - 1) * data.pageSize
            for (let i = 0; i < data.list.length; i++) {
              const _item = data.list[i]
              _item.no = no + i + 1
            }
          }
          this.spinning = false
          return data
        })
      },
      loading: false
    }
  },
  methods: {
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        this.$nextTick(() => {
          this.$refs.table.refresh(true)
        })
      }
    },
    settleData (newValue, oldValue) {
      if (this.isShow && newValue) {
      }
    }
  }
}
</script>

<style lang="less">
</style>
