<template>
    <Popover
        :tag="tag"
        :popover-class="[popoverClass, bem()]"
        :placement="placement"
        :delayOnMouseOut="delayOnMouseOut"
        :delayOnMouseOver="delayOnMouseOver"
        :theme="theme"
        :animation="animation"
        :defaultVisible="defaultVisible"
        :visible="visible"
        @update:visible="v => $emit('update:visible', v)"
        :trigger="trigger"
        :modifiers="modifiers"
    >
        <!-- 要对进行提示的元素 -->
        <slot/>
        <template slot="content">
            <div :class="bem('content')" @click="onClick">
                <!-- 支持复杂的content -->
                <slot name="content">{{content}}</slot>
            </div>
        </template>
    </Popover>
</template>

<script>
import { createComponentName, componentMixin } from '../_utils/component';
import Popover from '../Popover';

export default {
    name: createComponentName('tooltip'),
    components: { Popover },
    mixins: [componentMixin],
    props: {
        /**
         * 距离目标的偏移量 详情见 [popper.js](https://popper.js.org/popper-documentation.html#modifiers..offset)
         */
        offset: {
            type: [String, Number],
            default: 0,
        },
        tag: {
            type: [String, Object],
            default: 'span',
        },
        // 动画效果
        animation: {
            type: [Object, String],
            default: 'gd-fade'
        },

        // 默认是否显隐
        defaultVisible: {
            type: Boolean,
            default: false,
        },
        // 延迟多久展示
        delayOnMouseOut: {
            type: Number,
            default: 50,
        },
        delayOnMouseOver: {
            type: Number,
            default: 50,
        },
        // 提示内容, 复杂结构考虑使用 slot
        content: {
            type: String,
        },
        // 用于手动控制浮层显隐, 可用通过 visible.sync 和 trigger 一起生效
        visible: {
            type: Boolean,
            // -
            default: undefined,
        },
        // 激活 tooltip 方式, 如果设置为 null 表示完全由 visible 控制
        trigger: {
            // 'hover', 'click', null
            type: String,
            default: 'hover',
            validator: value => ['click', 'hover'].indexOf(value) > -1,
        },

        /**
         * 提示方向
         */
        placement: {
            // 'top-start' 'top' 'top-end' 'left-start' 'left' 'left-end' 'bottom-start' 'bottom' 'bottom-end'
            type: String,
            default: 'bottom',
        },
        // 主题色
        theme: {
            // 'dark' / ‘light’
            type: String,
            default: 'dark',
        },
        // 浮层自定义clas
        popoverClass: {
            type: String,
        },
        // 提示元素参考的边界元素，详情见 [popper.js](https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement)，默认是父级第一个可滚动元素
        boundariesElement: {
            type: [String, Object],
            default: 'scrollParent',
        }
    },

    computed: {
        modifiers() {
            return {
                offset: { offset: this.offset },
                preventOverflow: {
                    boundariesElement: this.boundariesElement,
                    padding: 0,
                }
            };
        }
    },

    methods: {
        onClick(e) {
            /**
             * 浮层点击事件
             */
            this.$emit('click', e);
        }
    }
};
</script>

<style lang="less">
@import '../_styles/base.less';

@bg: #4C4E4F;

.@{tooltip} {
    font-size: 12px;
    margin: 6px;
    position: relative;

    &__content {
        padding: 6px 8px;
        min-height: 24px;
    }
}

</style>
