/**
 * 多行文本显示控制
 * 参考https://github.com/ruofee/vue-ellipsis-component
 * @author xiufu.wang
 */
import jsImpl from "./js-impl"
import nativeImpl from "./native-impl"
import cssImpl from './css-impl'
import omit from 'mars-pro/src/pro/omit'

import { isSupportNativeEllipsis } from './util'
export default {
    name: 'ProEllipsisText',
    componentName: 'ProEllipsisText',
    inheritAttrs: false,
    components: {
        jsImpl,
        nativeImpl,
        cssImpl
    },
    props: {
        /**
         * 内容:可以是富文本(仅当useRichText才有效)、普通文本
         */
        text: String,
        // 当true时,则代表text为富文本
        useRichText: {
            type: Boolean,
            default: false
        },
        // 最大行数
        maxLines: {
            type: Number,
            default: 1
        },
        //可以精确指定高度
        maxHeight: Number
    },
    computed: {
        // 是否允许本地浏览器默认实现
        useCssEllipsis() {
            return (
                isSupportNativeEllipsis &&
                this.maxHeight === undefined &&
                this.maxLines === 1 &&
                this.useRichText === false &&
                this.$listeners.reflow === undefined &&
                this.$listeners.ellipsisClick === undefined &&
                !this.$slots.ellipsisNode
            )
        },
        useNativeEllipsis() {
            return (
                isSupportNativeEllipsis &&
                this.maxHeight === undefined &&
                this.$listeners.reflow === undefined &&
                this.$listeners.ellipsisClick === undefined &&
                !this.$slots.ellipsisNode
            )
        }
    },
    methods: {
        renderSlots() {
            const slots = omit(this.$slots || {}, ['default'])
            return Object.keys(slots).map(item => (
                <template slot={item}>{slots[item]}</template>
            ))
        }
    },
    render() {
        const _datas = {
            props: {
                maxLines: this.maxLines,
                text: this.text,
                maxHeight: this.maxHeight,
                useRichText: this.useRichText
            },
            attrs: this.$attrs,
            on: this.$listeners,
            'class': {
                'pro-ellipsis-text': true,
                ...(this.useCssEllipsis ? { 'css-impl': true } : {}),
                ...(this.useNativeEllipsis && !this.useCssEllipsis ? { 'native-impl': true } : {}),
                ...(!this.useNativeEllipsis && !this.useCssEllipsis ? { 'js-impl': true } : {})
            },
            ref: 'impl'
        }
        if (this.useCssEllipsis) {
            return (
                <cssImpl {..._datas}></cssImpl>
            )
        }
        if (this.useNativeEllipsis) {
            return (
                <nativeImpl {..._datas}></nativeImpl>
            )
        }
        return (
            <jsImpl  {..._datas}>
                {this.renderSlots()}
            </jsImpl>
        )
    }
}