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";
import $ from 'jquery'

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

class PushDiag extends Component {
    constructor(props) {
        super(props)
        this.state = {
            domH:'',
            showSlide:true
        }
        this.$ide = React.createRef()
        this.handleShow = this.handleShow.bind(this)
    }
    componentWillMount() {
        this.setState({
            moreNum: this.props.maxShowNum
        })
    }
    componentDidMount(){
        let domH = this.$ide.current.offsetHeight
        this.setState({
            domH:domH
        })
    }
    handleShow() {
        this.setState({
            showSlide:!this.state.showSlide
        })
    }

    render() {
        const { icon, title, titleBg,  diagList } = this.props
        const { domH,showSlide } = 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']} ${domH>55&&showSlide?style['push-diag-more-slide-d']:style['push-diag-more-slide-u']}`} ref={this.$ide}>
                {
                    diagList.map((item, index) => {
                        ItemNum = ItemNum + item.name.length + 1;
                        return <div key={item.id} className={style['push-diag-item']}><DiagnosticItem item={item} type='disSelect'/></div>
                    })
                }
                {domH>55&&<div onClick={() => this.handleShow()} className={`${style['push-diag-more']} ${showSlide?style['push-diag-more-d']:style['push-diag-more-u']}`}>{showSlide ? ' 更多': '收起'}<img className={style['push-diag-more-icon']} src={showSlide ? showImg : hideImg}/></div>}

            </div>
        </div>)
    }
} 

export default PushDiag;