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

@Component
export default class EflyPopover extends Vue {
    @Prop({default: () => 'hover'}) private trigger!: any;
    @Prop({default: () => 0}) private left!: any;
    @Prop({default: () => 0}) private top!: any;
    @Prop({default: () => 'false'}) private show!: any;
    @Emit('change') change(status: any) {};
    private status: any = {
        show: false,
    }

    @Watch('trigger', {deep: true})
    private watchTrigger(value: any) {
    }

    @Watch('show', {deep: true})
    private watchShow(value: any) {
        this.status.show = value
    }

    private create(){
        this.status.show = this.show
    }


    private hover() {
        if (this.trigger === 'hover') {
            this.status.show = true;
            this.change(this.status);
        }
    }

    private cancelHover() {
        if (this.trigger === 'hover') {
            this.status.show = false;
            this.change(this.status);
        }
    }

    private click($event: any){
        if (this.trigger === 'click') {
            this.status.show = !this.status.show;
            this.change(this.status);
        }
    }
}