<template>
  <a-modal :visible='showModal' title='订单明细' width='960px' @cancel='modalCancel'>
    <div class='billInfo'>
      <span class='label'>订单号:</span>
      <span>{{ editData.orderCode }}</span>
    </div>
    <p-table :data-source.sync='dataSource'
             :remote-url='listRemoteUrl' :remoteParams='listParams'
             :scroll='{x:true}'
             bordered dragle row-key='id'>
      <p-table-column :width='140' data-index='materialCode' title='物料编号' />
      <p-table-column :width='140' data-index='materialName' title='物料名称' />
      <p-table-column :width='140' data-index='unit' title='单位' />
      <p-table-column :width='140' data-index='qty' title='数量' />
      <p-table-column :width='140' data-index='station' title='工序' />
      <p-table-column :width='140' data-index='stationTxt' title='工序描述' />
      <p-table-column :width='140' data-index='relatedBillNo' title='关联订单号' />
      <p-table-column :width='140' data-index='relatedLine' title='关联订单行号' />
    </p-table>
  </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: () => ({})
    }
  },
  watch: {
    showModal: {
      handler(nVal) {
        if (nVal) {
          this.onSubmit()
        } else {
          this.dataSource = []
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      spinning: false,
      // 列表参数
      listRemoteUrl,
      listParams: {},
      dataSource: [],
      selectedRowKeys: []
    }
  },
  methods: {
    onSubmit() {
      const { id: outboundTaskId } = this.editData
      this.listParams = { ...this.editData, outboundTaskId }
    },
    modalOk() {
      this.$emit('change', false)
    },
    modalCancel() {
      this.$emit('change', false)
    }
  }
}
</script>
<style scoped lang='less'>
.billInfo {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;

  .label {
    color: #666
  }
}
</style>