<template>
    <div class="nus_comcont"
        v-if="nameText">
        <div
            class="nu_comment-cont"
            ref="hook_cont">
            <nu-textt
                class="nu_cont"
                :row="myStatus ? 0 : 3"
                :nameText="nameText">
            </nu-textt>
        </div>
        <div class="nu_toggle"
            @click="_onToggle"
            v-if="isToggle">
            {{ (myStatus && contractTxt) || expandTxt }}
        </div>
    </div>
</template>

<script>
import NuTextt from '../../../../widget/text/textt';
import { getStyle, initEventListener } from 'nimble-lib';
export default {
    components: {
        NuTextt
    },
    props: {
        /**
         * 评论
         */
        nameText: {
            type: String
        },
        /**
         * 扩张的文案
         */
        expandTxt: {
            type: String,
            default: '全文'
        },
        /**
         * 收起的文案
         */
        contractTxt: {
            type: String,
            default: '收起'
        },
        /**
         * 状态
         */
        status: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            myStatus: this.status || false,
            isToggle: true
        };
    },
    mounted () {
        this._initCom();
    },
    watch: {
        /**
         * 监听状态变化
         * @param {Number} nowVal 状态值
         */
        status (nowVal) {
            this.myStatus = nowVal;
        },
        /**
         * 监听内容评论
         */
        nameText () {
            this._checkToggle();
        }
    },
    beforeDestroy () {
        initEventListener(window, ['resize', 'orientationchange'], this._checkToggle, 'remove');
    },
    methods: {
        /**
         * 组件初始化
         */
        _initCom () {
            const _that = this;
            _that._checkToggle();
            initEventListener(window, ['resize', 'orientationchange'], _that._checkToggle, 'add');
        },
        /**
         * 检查是否显示toggle
         */
        _checkToggle () {
            const _that = this;
            _that.$nextTick(() => {
                setTimeout(() => {
                    const _hookCont = _that.$refs.hook_cont;
                    let _lineHeight = getStyle(_hookCont, 'line-height') || '';
                    _lineHeight = parseInt(_lineHeight, 10);
                    const _height = _hookCont && _hookCont.offsetHeight;
                    if (_lineHeight && _height) {
                        const _line = _height / _lineHeight;
                        if (_line) {
                            _that.isToggle = _line > 2;
                        }
                    }
                }, 100);
            });
        },
        /**
         * 切换状态
         */
        _onToggle () {
            const _that = this;
            _that.myStatus = !_that.myStatus;
        }
    }
};
</script>

<style lang="scss">
@import '../../../../../_assets/style/_iconFont.scss';
@import '../../../../../_assets/style/_var.scss';
@import '../../../../../_assets/style/_mixin.scss';
.nus_comcont {
    text-align: left;
    .nu_comment-cont {
        line-height: 20px;
    }
    .nu_cont {
        position: relative;
        font-size: $nucomment-cont-font-size;
        color: $nucomment-cont-color;
    }
    .nu_toggle {
        display: inline-block;
        cursor: pointer;
        margin-top: 4px;
        font-size: $nucomment-toggle-font-size;
        color: $nucomment-toggle-color;
    }
}
</style>
