import { PureComponent } from 'react'
import './index.less'

class NotificationTemplate extends PureComponent {
    state = {
        folding: false,
        showFoldingBtn: false,
        cloak: true
    }

    /**
     * 判断正文高度以显示全文/收起按钮
     */
    componentWillMount() {
        /*const height = document.querySelector('.deptContentHidden')?.offsetHeight
        this.setState({
            showFoldingBtn: height > 1.5 * 16 * 1, // 内容超过1行
            cloak: false
        })*/
    }

    /**
     * 全文/收起
     */
    onFoldBtnClick = () => {
        this.setState((prevState) => ({
            folding: !prevState.folding
        }))
    }

    render() {
        const { message } = this.props
        const { folding, showFoldingBtn } = this.state

        return (
            <div>
                <div className={ folding ? 'deptContent' : 'deptContentHidden' }>
                    {message}
                </div>

                {!folding && <div className={'more-btn'} onClick={this.onFoldBtnClick}>
                    <a>展开更多</a>
                </div>}

                {folding &&<div className={'more-btn'} onClick={this.onFoldBtnClick}>
                    <a>收起</a>
                </div>}
            </div>
        )
    }
}

export default NotificationTemplate
