content: import React from 'react'
  import Search from './Search'
  import EmptyBlock from './emptyBlock'
  import { mockData } from './mockData'
  
  var ContactItem=React.createClass({
  	render:function(){
  		return(
  			<div className="contactItem">
  				<span><img src={this.props.headImage} width="35"/></span>		
  				<span>{this.props.nickName}</span>
  			</div>
  			);
  		
  	}
  });
  
  var ContactGroup=React.createClass({
  	
  	render:function(){
  		var that=this;
  		return(
  			<div className="contactGroup"  id={that.props.keyword} name={that.props.keyword}>
  				<label  className="groupName" >{that.props.keyword}</label>
  				<div className="group">
  				{
  					that.props.list.map(function(item){						
  						return <ContactItem
  								 key={item.contactId}
  								 nickName={item.nickName}
  								 headImage={item.headImage} />
  						
  					})
  				}
  				</div>
  			</div>
  		)
  	}
  });
  
  var ContactList=React.createClass({
  	getInitialState:function(){
  		return {
  			data:[]
  		}
  	},
  	componentDidMount:function(){
  		this.setState({
  			data:mockData.ContactListData
  		});
  	},
  	render:function(){
  		var that=this;
  		return(
  			<div id="ContactList" className="contactList">
  				{				
  					that.state.data.map(function(groups){
  						return (
  							<ContactGroup 
  							key={groups.groupId}
  							keyword={groups.keyword}
  							list={groups.contacts}/>
  						)
  					})
  			
  				}
  			</div>
  		);
  	}
  });
  
  var QuickBar=React.createClass({
  	getInitialState:function(){
  		return{
  			data:[]
  		};
  	},
  	componentDidMount:function(){
  		const navList=[];
  		mockData.ContactListData.map(function(item) {
  			navList.push(item.keyword);
  		})	
  			
  
  		this.setState({
  			data:navList
  		})
  	},
  	render:function(){
  		var that=this;
  		console.log(that.state.data);
  		return(
  				<ul className="quickBar" id="">
  				{
  					that.state.data.map(function(item){
  						return(
  							<li className="quickItem">
  								<a href={"#"+item}>{item}</a>
  							</li>
  						)
  					})
  				}
  				</ul>
  		);
  	}
  });
  
  const Contacts=React.createClass({
  	render:function(){
  		return(
  			<div id="Contacts" className="contacts">
  				<Search/>
  				<QuickBar/>
  				<ContactList/>
  				<EmptyBlock/>
  			</div>
  		);
  	}
  });
  
  
  export default Contacts;