`
<template>
  <a-modal :visible='showModal' title='选择站台' width='400px' @cancel='modalCancel'>
    <p-spin :spinning='spinning'>
      <div class='modal-content' v-if='!noStation'>
        <p-form-model ref='formTarget' :label-col='{ span: 6 }' :model='form' :wrapper-col='{ span: 18 }'
                      class='plg-grid-from'>
          <p-form-model-item label='选择站点'>
            <p-select v-model='form.stationId' :options='stationList' style='width: 100%' />
          </p-form-model-item>
        </p-form-model>
      </div>
      <div class='modal-content' v-if='noStation'>
        站台未配置合托属性,无法发起合托
      </div>
    </p-spin>
    <div slot='footer'>
      <p-button :loading='spinning' @click='modalCancel'>取消</p-button>
      <p-button type='primary' :loading='spinning' class='ml-10' @click='modalOk' v-if='!noStation'>确认合托</p-button>
    </div>
  </a-modal>
</template>

<script>
import { toMerge, getStationList } from '../api'

export default {
  model: {
    prop: 'showModal',
    event: 'change'
  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    type: '',
    editData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      spinning: false,
      recordList: [],
      stationList: [],
      form: {
        stationId: ''
      },
      // 没有站点
      noStation: false
    }
  },
  watch: {
    showModal: {
      handler(nVal) {
        if (nVal) {
          this.recordList = [...this.editData]
          this.getStationList()
        }
      },
      immediate: true
    }
  },
  methods: {
    getStationList() {
      this.spinning = true
      getStationList().then(res => {
        if (res.success) {
          this.stationList = res.data.list.map(item => {
            return { ...item, label: item.stationNo, value: item.id }
          })
          if (this.stationList.length === 0) {
            this.noStation = true
          }
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    },
    modalOk() {
      const stationId = this.form.stationId
      const curStation = this.stationList.find(_ => _.id === stationId) || {}
      const { stationNo, areaNo } = curStation
      const params = this.recordList.map(item => {
        return { ...item, stationId, stationNo, areaNo }
      })
      this.spinning = true
      toMerge(params).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.modalCancel()
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.spinning = false
      })
    },
    modalCancel() {
      this.$emit('change', false)
    }
  }
}
</script>`