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


@Component
export default class EflyTooltip extends Vue {
    @Prop({default: () => ''}) private content!: any;
    @Prop({default: () => 'auto'}) private top!: any;
    @Prop({default: () => 'auto'}) private left!: any;
    @Prop({default: () => 'auto'}) private right!: any;
    @Prop({default: () => 'auto'}) private align!: any;
    @Prop({default: () => 'auto'}) private placement!: any;
    @Prop({default: () => 'auto'}) private width!: any;
    @Prop({default: () => 'primary'}) private type!: any;
    @Prop({default: () => 'hover'}) private trigger!: any;
    @Prop({default: () => 'absolute'}) private position!: any;
    @Prop({default: () => 'auto'}) private lineHeight!: any;

    private location: any = {
        left: 'auto',
    }

    private status: any = {
        show: false,                // 是否显示
        content: true,              // 是否有内容
        opacity: 1,
    }

    private created() {
        this.location.left = this.left;
        if (this.trigger === 'show') {
            this.status.show = true;
            this.show();
        }
        this.checkContent();
    }

    private mounted() {
    }

    @Watch('trigger', {immediate: true})
    private changeTrigger(value: any) {
        if (this.trigger === 'show') {
            this.status.show = value ? true : false;
        } else if (this.trigger === 'hide') {
            this.status.show = false
        }
    }


    @Watch('content', {immediate: true})
    private watchTrigger(value: any) {
        if (this.trigger === 'show') {
            this.status.show = value ? true : false;
        }
    }


    /**
     * 检查是否具有content
     */
    private checkContent() {
        if (!this.$slots.content && !this.content) {
            this.status.content = false;
        } else {
            this.status.content = true;
        }
    }

    /**
     * 触发hover事件显示
     */
    private hover() {
        this.checkContent();
        if (this.trigger === 'hover' && this.status.content) {
            this.status.show = true;
            this.show();
        }
        this.$emit('mouseenter')
    }

    private show(){
        this.status.opacity = 0;
        let delay = setTimeout(()=>{
            if (this.align === 'center') {
                let content: any = this.$el.getElementsByClassName('efly-tooltip-content')[0];
                this.location.left = -content.clientWidth / 2 + this.$el.clientWidth / 2 + 'px';
            }
            this.status.opacity = 1
            clearTimeout(delay)
        }, 1)
    }

    /**
     * 触发hover事件隐藏
     */
    private leave() {
        this.checkContent();
        if (this.trigger === 'hover' && this.status.content) {
            this.status.show = false;
        }
        this.$emit('mouseleave')
    }

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

}