<template>
  <DatePicker ref="elDatePicker"
              v-bind="$attrs"
              v-on="listeners"></DatePicker>
</template>

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

export default {
  name: 'XDatePicker',
  inheritAttrs: false,
  inject: ['xForm'],
  components: {
    DatePicker
  },
  computed: {
    listeners() {
      return {
        focus: e => {
          this.$emit('focus', e);
        },
        blur: e => {
          if (this.xForm) {
            this.xForm.proxyFocusNext();
          }
          this.$emit('blur', e);
        },
        ...this.$listeners
      };
    }
  },
  methods: {
    ...proxyMethods(['focus'], 'elDatePicker'),
    beforeFocusNext() {
      return !this.$refs.elDatePicker?.picker.visible;
    }
  }
};
</script>
