import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';

@Component
export default class EflyMoreOperate extends Vue {
    @Prop({default: () => 'hover'}) private trigger!: any;
    @Prop({default: () => ''}) private type!: any;
    @Prop({default: () => ''}) private left!: any;
    @Prop({default: () => ''}) private top!: any;
    @Prop({default: () => false}) private disabled!: any;

    private status: any = {
        group: false,
        disabled: false,
    };

    private timer: any = "";

    @Watch('disabled', {immediate: true})
    private watchDisabled(value: any) {
        if (this.disabled === '') {
            this.status.disabled = true;
        } else if (this.disabled) {
            this.status.disabled = this.disabled;
        } else {
            this.status.disabled = false;
        }
    }

    /**
     * 触发hover事件显示
     */
    private hover() {
        if (this.trigger === 'hover' && !this.status.disabled) {
            this.status.group = true;
            clearTimeout(this.timer)
        }
    }


    /**
     * 触发hover事件隐藏
     */
    private leave() {
        if (this.trigger === 'hover' && !this.status.disabled) {
            this.timer = setTimeout(() => {
                this.status.group = false;
            }, 500)
        }
    }

    /**
     * 触发点击事件显示隐藏
     */
    private click() {
        if (this.trigger === 'click' && this.$slots.group && !this.status.disabled) {
            this.status.group = !this.status.group;
        }
    }

    private select(operate: any) {
        this.$emit('select', operate);
        this.status.group = false;
    }
}