import LinkCardItem from './LinkCardItem';
import {Card,Icon} from 'antd';
import isEqual from 'lodash/isEqual';
import * as mobx from 'mobx'


class MLinkCard extends React.Component {
	shouldComponentUpdate(nextProps) {
		const _c = !isEqual(mobx.toJS(this.props.types), mobx.toJS(nextProps.types));
        return _c  || this.props.isAbc !== nextProps.isAbc
    }
	render() {
		const {types,isAbc,actions,user} = this.props;
		return (
			<div>
			{
           		types.map((type,i)=>{
           			const {prjbeans,img,color,letter,selected,typeName,prjtmpcount} = type;
					const icontype ="icon-base " +img;
					return (
						<Card ecId={`${this && this.props && this.props.ecId || ''}_Card@awhrvz@${i}`} id={letter} style={selected ? {"border-top-color":color,background:'#fff',boxShadow:'0 1px 6px hsla(0,0%,39%,.2)'} : {"border-top-color":color}}>
				 			<div style={{padding:'5px 0 25px 0',textAlign:'center'}}>
								{isAbc ?
									<span style={{fontSize:26,color:color}}>{letter}</span>
									:
									<div className="wf-card-type-name">
										<span style={{color:color,fontSize:26,marginRight:10}}><i className={icontype}/></span>
										<span style={{height:36,lineHeight:'36px'}}>{typeName}{('(' + (prjtmpcount) + ')')}</span>
									</div>
								}
							</div>
							{
								prjbeans.map((obj,j)=><LinkCardItem ecId={`${this && this.props && this.props.ecId || ''}_LinkCardItem@bzj05e@${j}`} user={user} prjbean={obj}  iscommon={false}  actions={actions} />)
							}
						</Card>
					)
           		})
            }
			</div>
		)
	}
}

export default MLinkCard