<template>
    <div id="TooltipOver">
        <div v-if="isHtml" class="ps-r">
            <el-tooltip class="item" effect="dark" placement="top" :content="content" :disabled="isShowTooltip">
                <div :ref="`${refName}Specail`" class="over-flow full-content" :class="className" @click="tooltipClick" @mouseover="onMouseOver(refName)" v-html="xssContent" />
                <div :ref="refName" slot="content" class="over-flow full-width">{{ content || "" }}</div>
            </el-tooltip>
            <p class="over-flow full-content specail-content">
                <span :ref="`${refName}SpecailContent`" class="over-flow full-width">
                    {{ content || "" }}
                </span>
            </p>
        </div>
        <el-tooltip v-else class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
            <p class="over-flow full-content" :class="className" @click="tooltipClick" @mouseover="onMouseOver(refName)">
                <span :ref="refName" class="over-flow full-width">
                    {{ content || "" }}
                </span>
            </p>
        </el-tooltip>
    </div>
</template>

<script>
import { notEmpty } from '../../tool/func';

export default {
    Name: 'TooltipOver',
    props: {
        content: {
            // 显示文字内容
            type: String,
            default: ''
        },
        className: {
            // 外层 的样式，在传入这个类名中设置文字显示到 宽度
            type: String,
            default: ''
        },
        xssContent: {
            // 显示文字内容
            type: String,
            default: ''
        },
        refName: {
            // 为页面文字标识（如在同一页面张红调用多次组件，此参数不可重复）
            type: String,
            default: ''
        },
        isHtml: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isShowTooltip: true
        };
    },
    methods: {
        onMouseOver(str) {
            this.$nextTick(() => {
                if (notEmpty(this.$refs)) {
                    if (this.isHtml) {
                        const contDomRect = this.$refs[`${str}SpecailContent`] ? this.$refs[`${str}SpecailContent`].getClientRects() : [];
                        const contentWidth = contDomRect[0] ? (contDomRect[0].width || 0) : 0;
                        const hoverDomRect = this.$refs[`${str}Specail`] ? this.$refs[`${str}Specail`].getClientRects() : [];
                        const hoverWidth = hoverDomRect[0] ? (hoverDomRect[0].width || 0) : 0;
                        this.isShowTooltip = contentWidth <= hoverWidth;
                    } else {
                        if (notEmpty(this.$refs[str])) {
                            const parentNode = this.$refs[str].parentNode;
                            const parentDomRect = parentNode ? parentNode.getClientRects() : [];
                            const parentWidth = parentDomRect[0] ? (parentDomRect[0].width || 0) : 0;
                            const contNode = this.$refs[str];
                            const contDomRect = contNode ? contNode.getClientRects() : [];
                            const contentWidth = contDomRect[0] ? (contDomRect[0].width || 0) : 0;
                            // 判断是否开启Tooltip功能
                            this.isShowTooltip = contentWidth <= parentWidth;
                        }
                    }
                }
            });
        },
        tooltipClick() {
            this.$emit('tooltipclick');
        }
    }
};
</script>
<style lang="less" scoped>
.specail-content {
    z-index: -1;
    position: absolute;
}
</style>

