<template>
  <Cascader ref="elCascader"
            v-bind="$attrs"
            v-on="listeners">
    <slot slot="empty" name="empty"></slot>
    <slot slot-scope="scope" v-bind="scope"></slot>
  </Cascader>
</template>

<script>
import { Cascader } from 'element-ui';
import { proxyMethods } from '../../../utils';

export default {
  name: 'XCascader',
  inheritAttrs: false,
  inject: ['xForm'],
  components: {
    Cascader
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        focus: e => {
          this.$emit('focus', e);
        },
        blur: e => {
          this.$emit('blur', e);
        },
        'visible-change': e => {
          this.focus();
        }
      };
    }
  },
  methods: {
    ...proxyMethods(['getCheckedNodes'], 'elCascader'),
    focus() {
      this.$refs.elCascader.$refs.input.focus();
    },
    beforeFocusNext() {
      return !this.$refs.elCascader?.dropDownVisible;
    }
  }
};
</script>
