<template>
  <a-modal
    centered
    class="chooseImport-modal"
    :footer="null"
    :maskClosable="false"
    title="结算明细"
    v-model="isShow"
    @cancle="isShow=false"
    width="70%">
    <a-spin :spinning="spinning" tip="Loading...">
      <div class="chooseImport-con">
        <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: 200 }"
          bordered>
        </s-table>
      </div>
    </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: 'salePrice', 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: 'saleAmount', align: 'right', customRender: function (text) { return toThousands(text, 2) || '--' } }
      ],
      loadData: parameter => {
        this.spinning = true
        const paramsPage = Object.assign(parameter)
        paramsPage.settleBillSn = this.settleData ? 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')
      }
    },
    settleData (newValue, oldValue) {
      if (this.isShow && newValue) {
        if (this.settleData && this.settleData.settleBillSn) {
          this.$refs.table.refresh(true)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .chooseImport-modal{
    .chooseImport-con{
      .red{
        color: #f30;
      }
      .btn-con{
        text-align: center;
        margin: 30px 0 20px;
        .button-cancel,.button-error{
          font-size: 12px;
        }
      }
    }
  }
</style>
