<template>
  <ElSelect ref="elSelect"
            v-bind="$attrs"
            v-on="listeners">
    <slot slot="prefix" name="prefix"></slot>
    <slot slot="empty" name="empty"></slot>
    <ElOption v-for="(item,index) in options"
              :key="`options_${index}`"
              v-bind="item">
      <slot :item="item" :index="index"></slot>
    </ElOption>
  </ElSelect>
</template>

<script>
import {
  Select as ElSelect,
  Option as ElOption
} from 'element-ui';
import { proxyMethods } from '../../../utils';

export default {
  name: 'XSelect',
  inheritAttrs: false,
  inject: ['xForm'],
  components: {
    ElSelect,
    ElOption
  },
  props: {
    options: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    listeners() {
      return {
        focus: e => {
          this.$emit('focus', e);
        },
        blur: e => {
          this.$emit('blur', e);
        },
        ...this.$listeners
      };
    }
  },
  methods: {
    ...proxyMethods(['focus', 'blur'], 'elSelect'),
    beforeFocusNext() {
      return !this.$refs.elSelect.visible;
    }
  }
};
</script>
