<template>
    <div :class="prefixCls"
        @mouseenter="handleMouseEnter" 
        @mouseleave="handleMouseLeave"
        v-click-outside.capture="handleClosePopper"
        v-click-outside:mousedown.capture="handleClosePopper">
        <div :class="`${prefixCls}-rel`"
            @click="handleClick"
            ref="reference">
            <slot></slot>
        </div>
        <transition name="fade">
            <div 
                ref="popper"
                v-show="visible"
                :class="classes"
                :placement="placement"
                @click="handleTransferClick"
                :data-transfer="transfer"
                v-transfer-dom>
                <div :class="prefixCls + '-popper-content'">
                    <span :class="prefixCls + '-arrow'"></span>
                    <slot name="content"></slot>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
    import Popper from '../common/popper'
    import { oneOf } from '../../../utils/assist'
    import TransferDom from '../../../directives/transfer-dom'
    import ClickOutside from '../../../directives/clickoutside'

    const prefixCls = 'yy-tip'
    export default {
        name: 'YYTip',
        mixins: [Popper],
        directives: {
            TransferDom,
            ClickOutside
        },
        props: {
            trigger: {
                validator (value) {
                    return oneOf(value, ['hover', 'click', 'handle'])
                },
                default: 'hover'
            },
            content: {
                type: [String, Number],
                default: ''
            },
            theme: {
                validator: function (value) {
                    return oneOf(value, ['dark', 'light'])
                },
                default: 'dark'
            },
            placement: {
                validator (value) {
                    return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
                },
                default: 'top'
            },
            transfer: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                disableCloseUnderTransfer: false,  // transfer 模式下，点击 slot 也会触发关闭
            }
        },
        computed: {
            classes() {
                return [
                    `${prefixCls}-popper`,
                    `${prefixCls}-popper-${this.theme}`,
                    `${prefixCls}-popper-${this.placement}`
                ]
            }
        },
        methods: {
            handleClick() {
                if(this.trigger === 'click') {
                    this.visible = !this.visible
                }
            },
            handleMouseEnter() {
                if(this.trigger === 'hover') {
                    this.handleShowPopper()
                }
            },
            handleMouseLeave() { 
                if(this.trigger === 'hover') {
                    this.handleClosePopper()
                }
            },
            handleShowPopper() {
                if (this.timeout) clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    this.visible = true
                }, 200)
            },
            handleTransferClick () {
                if (this.transfer) this.disableCloseUnderTransfer = true;
            },
            handleClosePopper() {
                if (this.disableCloseUnderTransfer) {
                    this.disableCloseUnderTransfer = false;
                    return false;
                }
                if (this.timeout) clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    this.visible = false
                }, 200)
            }
        }
    }
</script>
