<template> 
    <Tooltip transfer  :content="labeltext" :disabled="!showTooltip" :max-width="maxWidth" class="ivu-table-cell-tooltip" >
            <template v-if="textLink">
                <a  href="#"  style="text-decoration:underline" @click.prevent="linkTo"><span ref="content"  class="ivu-table-cell-tooltip-content" v-html="showText" :style="'text-align:'+ contentAlign" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"/> </a>
            </template>
            <template v-else>
                  <span ref="content"  class="ivu-table-cell-tooltip-content" v-html="showText" :style="'text-align:'+ contentAlign" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"/>
            </template>
    </Tooltip>
</template>
<script>
    export default {
        name: 'showText',
        data () {
            return {
                showTooltip:false,
                labeltext: '',
                showIcon:false,
                iconWidth:0,
                textLink:false
            };
        },
        props:{
            label:{
                type: [String,Number],
                default: ''
            },
            maxWidth:{
                type: [String,Number],
                default: 300
            },
            contentAlign: {
                type: String,
                default: 'center'
            },
            resetText: {
                type: Function,
                default: null
            },
            config: {
                type: Object,
                default: () => {},
            },
            rowIndex: {
                type: [String,Number],
                default: ''
            }
        },
        created() {
            if (this.config && this.config.textLink !== undefined) {
                this.textLink = this.config.textLink;
            }
        },
        methods:{
            handleTooltipIn () {
                const $content = this.$refs.content;
                this.showTooltip = $content.scrollWidth > $content.offsetWidth;  
            },
            handleTooltipOut () {
                this.showTooltip = false;  
            },
            doSpecialSymbols(str) {
                if (str) {
                    str = str + '';
                    //替换所有的换行符
                    str = str.replace(/\r\n/g,'<br>');
                    str = str.replace(/\n/g,'<br>');
                    //替换所有的空格（中文空格、英文空格都会被替换）
                    str = str.replace(/\s/g,'&nbsp;');
                }
                return str; 
            },
            linkTo() {
                if (this.config.onLinkTo) {
                    let obj = this.$Method.copy(this.config);
                    obj.rowIndex = this.rowIndex;
                    this.config.onLinkTo(obj);
                }
            }
        },
        watch:{
            label: {
                handler (data) {
                    this.labeltext = data;
                    if (this.resetText) {
                        this.showText = this.resetText(this.doSpecialSymbols(data),data);
                    } else {
                        this.showText = this.doSpecialSymbols(data);
                    }
                },
                immediate: true
            }
        }
    };
</script>