<template>
  <div class="goods-select">
    <RemoteSelect
      ref="remoteSelect"
      v-model="currentValue"
      select-type="consumer"
      option-func-name="options"
      :remote="true"
      :filterable="true"
      :config="config"
      :placeholder="placeholder"
      remote-search-key="realName"
      @input="handleInput"
    />
  </div>
</template>

<script>
import RemoteSelect from '@/views/components/RemoteSelect'

export default {
  components: {
    RemoteSelect
  },
  props: {
    value: {
      type: [String, Number],
      default: () => null
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    config: {
      type: Object,
      default: () => {
        return {
          key: 'userid',
          label: 'realname',
          value: 'realname'
        }
      }
    }
  },
  data() {
    return {
      currentValue: null
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.currentValue = val
        this.handleInput()
      }
    }
  },
  methods: {
    handleInput() {
      this.$emit('input', this.currentValue)
    }
  }
}
</script>

<style scoped lang="scss">
.goods-select {
  display: flex;

  .add-button {
    margin-left: 10px;
  }
}
</style>
