import React, { Component } from 'react';
import style from './index.less';
import up from '@common/images/slide-up.png';
import down from '@common/images/slide-down.png';
import $ from 'jquery';
import config from '@config/index';

class GeneralTreat extends Component {
    constructor(props){
        super(props);
        this.state = {
            slideUp: true
        }
        this.$content = React.createRef();
    }

    slideToggle() {
        const { slideUp } = this.state
        $(this.$content.current).slideToggle(config.slideTime);
        this.setState({
            slideUp: !slideUp
        })
    }
    render() {
        const { icon, titleStyle,titleBg, filter, title, generalTreat,hasFold } = this.props
        const { slideUp } = this.state
        return(
           
            generalTreat && generalTreat.content && generalTreat.content.length > 0 && <div className={style['general-wrapper']}>
                <div className={style['general-title-box']} style={titleStyle}></div>
                <div className={`${style['general-title']} ${'clearfix'}`}  onClick={hasFold?this.slideToggle.bind(this):''}>
                    <img className={style['general-icon']} src={icon}/>
                    {title}
                    {hasFold && <img  className={style['slide-toggle']} src={slideUp?up:down} alt="展开/收起"/>}
                </div>
                <div ref={this.$content} className={hasFold?style['general-item-show']:style['general-item-hide']}  dangerouslySetInnerHTML={{__html: generalTreat.content}}>
                </div>

            </div>
        )
    }

}

export default GeneralTreat;