<template>
  <a-modal :visible='showModal' title='箱明细' width='960px' @cancel='modalCancel'>
    <p-table :data-source.sync='dataSource'
             :rowSelectType='false'
             :remote-url='listRemoteUrl' :remoteParams='listParams'
             :selectedRowKeys.sync='selectedRowKeys' bordered dragle row-key='containerStoreSubNo'>
      <p-table-column data-index='itemName' title='名称' />
      <p-table-column data-index='qty' title='数量' />
    </p-table>
    <div slot='footer'>
      <p-button type='primary' @click='modalOk'>确认</p-button>
    </div>
  </a-modal>
</template>

<script>
import { detailListRemoteUrl as listRemoteUrl } from '../api'

export default {
  model: {
    prop: 'showModal',
    event: 'change'
  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    type: '',
    editData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      spinning: false,
      form: {},
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: []
    }
  },
  watch: {
    showModal: {
      handler(nVal) {
        if (nVal) {
          this.form = { ...this.editData }
          this.onSubmit()
        }
      },
      immediate: true
    }
  },
  methods: {
    modalOk() {
      this.$emit('change', false)
    },
    modalCancel() {
      this.$emit('change', false)
    },
    onSubmit() {
      this.listParams = { ...this.form }
    }
  }
}
</script>