<template>
  <div class="form-group">
    <label v-if="label" class="form-label" :for="id">{{ label }}:</label>
    <!-- <select
      :id="id"
      ref="input"
      v-model="selected"
      v-bind="$attrs"
      class="form-select form-control text-capitalize"
      :class="{ error: hasError }"
    >
      <slot/>
    </select>-->

    <v-select
      v-bind="$attrs"
      v-on="$listeners"
      :id="id"
      ref="select"
      :class="{ 'is-invalid': hasError }"
      class="form-select text-capitalize"
      :options="options"
    >
      <!-- <slot></slot> -->
    </v-select>

    <div v-if="hasError" class="invalid-feedback d-block">
      <slot name="invalid-feedback">{{ getError }}</slot>
    </div>
  </div>
</template>

<script>
import ErrorMixin from '../../../mixins/error-mixin';
import vSelect from 'vue-select';

export default {
  name: 'EbSelectInput',

  inheritAttrs: false,

  components: {
    vSelect
  },

  mixins: [ErrorMixin],

  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },
  props: {
    id: {
      type: String,
      default() {
        return `select-input-${this._uid}`;
      }
    },
    options: {
      type: Array,
      required: true
    },
    label: String
  },
  // data() {
  //   return {
  //     selected: this.value
  //   };
  // },
  // watch: {
  //   selected(selected) {
  //     this.$emit('input', selected);
  //   }
  // },
  methods: {
    focus() {
      this.$refs.select.focus();
    },
    select() {
      this.$refs.select.select();
    }
  }
};
</script>

<style lang="scss">
@import 'vue-select/src/scss/vue-select.scss';
.form-select {
  background: #fff;
  ::selection {
    color: #fff;
    background-color: #5192df;
  }
  ::placeholder {
    color: #adb5bd;
    opacity: 1;
  }
}
</style>
