<template>
  <a-modal :visible='showModal' title='任务明细' width='960px' @cancel='modalCancel'>
    <div>订单框号:{{ editData.containerNo }}</div>
    <p-table :data-source.sync='dataSource'
             :rowSelectType='false'
             :remoteUrl='listRemoteUrl' :remoteParams='listParams'
             :selectedRowKeys.sync='selectedRowKeys' bordered dragle row-key='lineNo'>
      <p-table-column data-index='orderNo' title='订单号' />
      <p-table-column data-index='productId' title='产成品编码' />
      <p-table-column data-index='process' title='工序' />
      <p-table-column data-index='char1' title='工序描述' />
      <p-table-column data-index='itemCode' title='物料编码' />
      <p-table-column data-index='itemName' title='物料名称' />
      <p-table-column data-index='quantity' 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,
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: []
    }
  },
  watch: {
    showModal: {
      handler(nVal) {
        if (nVal) {
          this.onSubmit()
        } else {
          this.dataSource = []
        }
      },
      immediate: true
    }
  },
  methods: {
    modalOk() {
      this.$emit('change', false)
    },
    modalCancel() {
      this.$emit('change', false)
    },
    onSubmit() {
      this.listParams = { ...this.editData }
    }
  }
}
</script>