<template>
  <TimePicker ref="elTimePicker"
              v-bind="$attrs"
              v-on="listeners"></TimePicker>
</template>

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

export default {
  name: 'XTimePicker',
  inheritAttrs: false,
  inject: ['xForm'],
  components: {
    TimePicker
  },
  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'], 'elTimePicker'),
    beforeFocusNext() {
      return !this.$refs.elTimePicker?.picker.visible;
    }
  }
};
</script>
