import React, { Component } from 'react';
import style from './index.less';
import DiagnosticItem from '@containers/DiagnosticItem'
import showImg from "@common/images/show.png";
import hideImg from "@common/images/close.png";


/***
 * 接收参数：
 * icon: 图标；
 * title: 标题;
 * titleBg:标题背景色；
 * maxShowNum: 最大显示字数，不传则默认全部展示；
 * diagList: 诊断列表；
***/

class PushDiag extends Component {
    constructor(props) {
        super(props)
        this.state = {
            showMore: true,
        }
        this.handleShow = this.handleShow.bind(this)
    }
    componentWillMount() {
        this.setState({
            moreNum: this.props.maxShowNum
        })
    }

    handleShow(ItemNum) {
        this.setState({
            showMore: !this.state.showMore
        },()=>{
            this.setState({
                moreNum: this.state.showMore ?  this.props.maxShowNum : ItemNum
            })
        })
    }

    render() {
        const { icon, title, titleBg,  diagList, maxShowNum } = this.props
        const { showMore,moreNum } = this.state
        let ItemNum = 0;
        return (<div className={style['push-diag-wrapper']}>
            <h1 className={style['push-diag-title']} style={{background:titleBg}}><img className={style['push-diag-icon']} src={icon} />{title}</h1>
            <div className={style['push-diag-box']}>
                {maxShowNum ? diagList.map((item, index) => {
                    ItemNum = ItemNum + item.name.length + 1;
                    if (ItemNum <= moreNum) {
                        return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item}/></div>
                    }
                }) : diagList.map((item, index) => {
                return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item}/></div>
                })}
                {ItemNum > maxShowNum && <div onClick={() => this.handleShow(ItemNum)} className={style['push-diag-more']}>{showMore ? ' 更多': '收起'}<img className={style['push-diag-more-icon']} src={showMore ? showImg : hideImg}/></div>}

            </div>
            
            
        </div>)
    }
} 

export default PushDiag;