import React,{PropTypes} from 'react';  
import {Table,Checkbox} from 'react-bootstrap';  
import cx from 'classnames';
import s from './SimpleTable.scss';
import moment from 'moment';
import {OSSURL} from '../../redux/constants/Constants'

const getRoleName=(role)=>{
	if(role){  
		switch(role) {
		    case 'hr_officer':    
		        return  '人事专员'; 
		    case 'manager':
		        return '经理';
		    case 'member':    
		        return  '普通员工'; 
		    case 'admin':
		        return '系统管理员';
		    case 'attendance_officer':    
		        return  '考勤专员'; 
		    case 'payroll_officer':    
		        return  '薪酬专员'; 
		    default:
		        return '';
    	}
	}else {
		return '';
	}
}

// const allRolesx=[
//     {
//         "uuid": "1d726648-ffc2-4d02-9d0d-6284ef4e6e4b",
//         "created_at": "2016-03-31T14:54:28+08:00",
//         "updated_at": "2016-03-31T14:54:28+08:00",
//         "deleted_at": "0001-01-01T00:00:00Z",
//         "is_deleted": false,
//         "name": "hr_officer",
//         "tenant_id": "f569190c-c3d4-4f45-8a43-bc7ee23bcd74",
//         "description": "manager",
//         "status": "active",
//         "is_system": "1"
//     },
//     {
//         "uuid": "205157e2-07c5-4f70-9849-a8f1581d4e06",
//         "created_at": "2016-03-31T14:54:38+08:00",
//         "updated_at": "2016-03-31T14:54:38+08:00",
//         "deleted_at": "0001-01-01T00:00:00Z",
//         "is_deleted": false,
//         "name": "attendance_officer",
//         "tenant_id": "f569190c-c3d4-4f45-8a43-bc7ee23bcd74",
//         "description": "manager",
//         "status": "active",
//         "is_system": "1"
//     },
//     {
//         "uuid": "411ec652-1215-4cb2-9728-d4facb0e718f",
//         "created_at": "2016-03-31T14:56:35+08:00",
//         "updated_at": "2016-03-31T14:56:35+08:00",
//         "deleted_at": "0001-01-01T00:00:00Z",
//         "is_deleted": false,
//         "name": "member",
//         "tenant_id": "f569190c-c3d4-4f45-8a43-bc7ee23bcd74",
//         "description": "member",
//         "status": "active",
//         "is_system": "1"
//     },
//     {
//         "uuid": "70ab0324-94c5-408b-ad76-c05481b65866",
//         "created_at": "2016-03-31T14:54:49+08:00",
//         "updated_at": "2016-03-31T14:54:49+08:00",
//         "deleted_at": "0001-01-01T00:00:00Z",
//         "is_deleted": false,
//         "name": "admin",
//         "tenant_id": "f569190c-c3d4-4f45-8a43-bc7ee23bcd74",
//         "description": "manager",
//         "status": "active",
//         "is_system": "1"
//     },
//     {
//         "uuid": "e6d435c6-74b9-4c10-a5c8-2c0bff9b9f37",
//         "created_at": "2016-03-31T14:53:40+08:00",
//         "updated_at": "2016-03-31T14:53:40+08:00",
//         "deleted_at": "0001-01-01T00:00:00Z",
//         "is_deleted": false,
//         "name": "manager",
//         "tenant_id": "f569190c-c3d4-4f45-8a43-bc7ee23bcd74",
//         "description": "manager",
//         "status": "active",
//         "is_system": "1"
//     }
// ]

class SimpleRoleTable extends React.Component {
	constructor (props) {
	    super(props);   
	    this.hideEditRole=this.hideEditRole.bind(this);
	    this.state={
	    	editRole:null
	    }
	} 
	static propTypes = {   
    	rowClick:PropTypes.func,
    	rowsData:PropTypes.array,
    	headTitle:PropTypes.array,
    	allRoles:PropTypes.array,
    	updateRole:PropTypes.func
	}  
	static defaultProps={ 
		allRoles:[]
	}
	clickRow(row,e){
		this.props.rowClick(row);
	}
	hideEditRole(){
		this.setState({
			editRole:null
		})
	}
	showEditRole(row){
		const {editRole}=this.state;
		this.setState({
			editRole:row
		})
		// if(!editRole){
		// 	this.setState({
		// 		editRole:row
		// 	})
		// }else{
		// 	return ;
		// }
	}
	editRole(row){
		const {editRole}=this.state;
		const {updateRole}=this.props;
		const roles=[]
		editRole.roles.map((role,i)=>{  
			roles.push(role.id||role.uuid)
		})
		updateRole({
			'roles':{roles},
			user_id:editRole.uuid
		});
	}
	changeRole(row,role,e){
		const {editRole}=this.state;
		const temp=[];
		let tempRole=editRole.roles.concat();
		if(e.target.checked){
			temp.push(role);
		}else{ 
			tempRole.map((r,i)=>{
				if(r.name==role.name)
					delete tempRole[i];
			}) 
		} 
		editRole.roles=temp.concat(tempRole);
		this.setState({
			editRole
		});
	}
	renderTitle(){ 
		const {headTitle}=this.props;
		return headTitle.map((title,i)=>{
			let rowStyle={}
			if(title['minWidth']){
  				rowStyle.width=`${title['minWidth']}px`;
  			} 	
  			return (
  				<th key={i}>
  					<div style={rowStyle}>{title.displayName}</div>
  				</th>
  			);
		})
	}

	componentWillUnmount(){ 
		console.log('table will remove!');
	}

	formatValue(value, dataType){
		if (dataType&&value&&value.length>0){
			switch(dataType){
				case 'date':
					value = moment(value).format('YYYY-MM-DD');
					break;
				case 'timeList':
					let values = value.split(',');
					for(let i=0;i<values.length;i++){
						let v=values[i];
						if(v&&v.length>0)
							values[i]=moment(v).format('HH:mm');
						else 
							values[i]='';
						value = values.join(',');
					}
					break;
				default:
					break;
			}
		}
		return value;
	}
	renderRoles(roles,row){ 
		const {editRole}=this.state; 
		const {allRoles}=this.props;
		if(editRole&&editRole.uuid==row.uuid)
			return <div className={cx(s.roles_wrap)}> 
				{allRoles.map((role,i)=>{ 
					let check=false;
					editRole.roles.map((r,i)=>{
						if(r.name==role.name){
							check=true
							return;
						}
					})
					return (
						<div key={i} className={cx(s.role_edit_wrap)}>
							<input type="checkbox" value={role.name} onChange={this.changeRole.bind(this,row,role)} checked={check} disabled={role.name=='member'} />
							<div className={cx(s.role_wrap)}>
							{getRoleName(role.name)}
							</div>
					</div> );
				}) }
			</div>
		else
			return <div className={cx(s.roles_wrap)}> 
				{roles.map((role,i)=>{ 
					return <div key={i} className={cx(s.role_wrap)} >{getRoleName(role.name)}</div> ;
				}) }
			</div>
	}
	renderColumn(row){  
		const {headTitle, resource} = this.props,self=this;
		const {editRole}=this.state; 
		return headTitle.map((title,i)=>{
			let key = title.key;
			let isTabular = title.isTabular;
			let isSubFields = title.isSubFields;
			let dataType = title.dataType;
			let value = ''; 
			value = row[key]; 
			let rowStyle={position:'relative'}
			if(title['minWidth']){
  				rowStyle.width=`${title['minWidth']}px`;
  			}
			let user_image = row.image; 
			if( value  instanceof Array){ 
				let flag=false;
				if(editRole&&editRole.uuid==row.uuid){
					flag=true;
				}
				return (
					<td key={i}>
	  					<div style={rowStyle}>
		  					{self.renderRoles(value,row)} 
		  					{!flag&&<i onClick={this.showEditRole.bind(this,row)} className={cx('kr_icon',s.edit_role)}>&#xe66e;</i>}
		  					{flag&&<div onClick={this.editRole.bind(this,row)} className={cx(s.success_btn,s.edit_btn)}>确认</div>}
	  					</div> 
  					</td>
				)
			}else{
				return (
	  				<td key={i}>
	  					<div style={rowStyle}>
		  					{user_image&&key=='name'&&<img src={OSSURL+user_image} style={{borderRadius:'3px',marginRight:'5px',width:'25px',height:'25px'}}/>}
		  					{value}
	  					</div>
	  				</td>
	  			)
			} 
  		})
	}
	renderDatas(){
		const {rowsData}=this.props,self=this; 
		if(rowsData==null){
			return null;
		}
		return rowsData.map((row,i)=>{
			return (<tr className={cx(s.table_tr)} onClick={self.clickRow.bind(self,row)} key={i}>{self.renderColumn(row)}</tr>);
		})
	}
	render(){  
 
		return( 
			<div className={cx(s.simple_table_wrap)} >
				<table className={cx('table')}> 
				    <thead>
				      <tr> 
				      	{this.renderTitle()}
				      </tr>
				    </thead>
				    <tbody>
				    	{this.renderDatas()} 
				    </tbody> 
				</table>
			</div>
		)
	}
}
 


export default SimpleRoleTable;