<template>
  <div>
    <el-select
      :value="value"
      :loading="loading"
      filterable
      remote
      clearable
      :disabled="disabled"
      :placeholder="options.length?'请选择':'暂无数据'"
      @change="change"
      @clear="clear"
    >
      <el-option
        v-for="item in options"
        :key="item.key"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>

export default {
  name: 'StationSelect',
  componentName: '架次关联站位编号',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    form: {
      type: Object,
      default: () => ({ sorties: '' })
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      options: []
    }
  },
  computed: {},
  watch: {
    'form.sorties': {
      immediate: true,
      deep: true,
      handler(val) {
        this.$set(this.form, 'positionNumber', '')
        val && this.getOptions()
      }
    }
  },
  methods: {
    getOptions() {
      const params = {
        pageFrom: 1,
        pageSize: 9999,
        searchItems: {
          items: [
            {
              fieldName: 'defName',
              operator: 'EQ',
              value: this.form.sorties
            }
          ]
        },
        'openProps': [
          {
            'name': 'extPositionSorties',
            'openProps': [
              {
                'name': 'target'
              }
            ]
          }
        ]
      }
      this.options = []
      this.loading = true
      this.$api.searchApi('AircraftSorties', params).then(res => {
        if (res && res.items && res.items.content && res.items.content[0].extPositionSorties) {
          this.options = res.items.content[0].extPositionSorties.map(v => (v.target && {
            key: v.target.id,
            label: v.target.name,
            value: v.target.serialNumber
          }))
        }
      }).finally(() => {
        this.loading = false
      })
    },
    change(val) {
      this.$emit('input', val)
    },
    clear() {
      this.$emit('input')
    }
  }
}
</script>

<style lang="scss">

</style>