/**
 * 浏览器本身的支持
 * @author xiufu.wang
 */
import showTooltipMore from './mixins/show-tooltip-more'
export default {
    name: 'native-ellipsis-impl',
    mixins: [showTooltipMore],
    props: {
        text: String,
        maxLines: {
            type: Number,
            default: 1
        },
        useRichText: {
            type: Boolean,
            default: false
        }
    },
    created() { 
        this.native = true
    },
    render() {
        const _datas = {
            on: {
                mouseenter: this.handleMouseenter,
                mouseleave: this.handleMouseleave,
                click: this.handleMouseleave
            },
            style: {
                webkitLineClamp: this.maxLines
            },
            ref: 'contaner'
        } 
        const htmlText = `<div>${this.text}</div>`
        return (
            <div {..._datas}>
                {this.useRichText ? <span {...({ domProps: { innerHTML: htmlText } })} class="vue-ellipsis-native-html" /> : <span class="vue-ellipsis-native-text">{this.text}</span>}
                <span ref="more">.</span>
            </div>
        )
    }
}