import React,{PropTypes} from 'react';  
import cx from 'classnames';
import s from './handsontableGridWrap.scss';

const socialGridHead = [
	{employee_no:'员工编号',employee_name:'姓名',pay_city:'社保缴纳地',pay_type:'社保缴纳类型',insurance_base:'社保基数',insurance_company_sum:'社保公司缴纳',
	insurance_person_sum:'社保个人缴纳',endowment_company_ratio:'养老',endowment_company_amount:'',endowment_person_ratio:'',endowment_person_amount:'',medical_company_ratio:'医疗',medical_company_amount:'',medical_person_ratio:'',medical_person_amount:'',
	unemployment_company_ratio:'失业',unemployment_company_amount:'',unemployment_person_ratio:'',unemployment_person_amount:'',maternity_company_ratio:'生育',maternity_company_amount:'',maternity_person_ratio:'',maternity_person_amount:'',injury_company_ratio:'工伤',injury_company_amount:'',injury_person_ratio:'',injury_person_amount:'',
	housing_fund_company_ratio:'公积金',housing_fund_company_amount:'',housing_fund_person_ratio:'',housing_fund_person_amount:'',supplement_insurance_company_amount:'社保补缴',supplement_insurance_person_amount:'',supplement_housing_fund_company_amount:'公积金补缴',supplement_housing_fund_person_amount:''},
	{employee_no:'',employee_name:'',pay_city:'',pay_type:'',insurance_base:'',insurance_company_sum:'',
	insurance_person_sum:'',endowment_company_ratio:'公司缴纳比例',endowment_company_amount:'公司缴纳',endowment_person_ratio:'个人缴纳比例',endowment_person_amount:'个人缴纳',medical_company_ratio:'公司缴纳比例',medical_company_amount:'公司缴纳',
	medical_person_ratio:'个人缴纳比例',medical_person_amount:'个人缴纳',
	unemployment_company_ratio:'公司缴纳比例',unemployment_company_amount:'公司缴纳',unemployment_person_ratio:'个人缴纳比例',unemployment_person_amount:'个人缴纳',maternity_company_ratio:'公司缴纳比例',maternity_company_amount:'公司缴纳',maternity_person_ratio:'个人缴纳比例',maternity_person_amount:'个人缴纳',
	injury_company_ratio:'公司缴纳比例',injury_company_amount:'公司缴纳',injury_person_ratio:'个人缴纳比例',injury_person_amount:'个人缴纳',housing_fund_company_ratio:'公司缴纳比例',housing_fund_company_amount:'公司缴纳',housing_fund_person_ratio:'个人缴纳比例',housing_fund_person_amount:'个人缴纳',
	supplement_insurance_company_amount:'公司补缴',supplement_insurance_person_amount:'个人补缴',supplement_housing_fund_company_amount:'公司补缴',supplement_housing_fund_person_amount:'个人补缴'}
];

const getColHeaders=(columns)=>{ 
	let colHeaders=[];
	columns.map((col)=>{ 
		colHeaders.push(col.name);
	})   
	return colHeaders;
}
const getColumns=(columns)=>{
	let cols=[];
	columns.map((col)=>{ 
		cols.push({
			editor: false,
			data:col.column_no
		});
	});   
	return cols;
}

const compare = function (obj1, obj2) {
    var val1 = obj1.column_no;
    var val2 = obj2.column_no;
    if (val1 < val2) {
        return -1;
    } else if (val1 > val2) {
        return 1;
    } else {
        return 0;
    }            
} 

class HandsontableGridWrap extends React.Component {
	constructor (props, context) {
	    super(props, context);  
	}
	static propTypes={
		onChange: PropTypes.func,
		choices:PropTypes.array,
		value:PropTypes.oneOfType([
	      PropTypes.string,
	      PropTypes.array
	    ]),
		placeholder:PropTypes.string,
		name:PropTypes.string,
		multi:PropTypes.bool,
		error:PropTypes.bool,
		disabled:PropTypes.bool,
		labelKey:PropTypes.string,
		valueKey:PropTypes.string,
		style:PropTypes.object,
		id:PropTypes.string
	}  
	static defaultProps = { 
		style:{
			width:'100%',
			minHeight: '100px',
			resize:'vertical',
			overflow:'auto'
		},
		id:'custom_grid'
	}
	componentDidMount(){ 
		const self=this; 
		let {costData={},columns=[],id}=self.props;
		let container = document.getElementById(id);   
		let {data=[],hidden_columns=[],hidden_rows=[],merge_cells=[]}=costData; 
		console.log(costData) ;
		if('social_grid'==id){
			data=socialGridHead.concat(data);
			merge_cells= [
		      {row:0, col: 7, rowspan: 1, colspan:4},
		      {row:0, col: 11, rowspan:1, colspan: 4},
		      {row:0, col: 15, rowspan:1, colspan: 4},
		      {row:0, col: 19, rowspan:1, colspan: 4},
		      {row:0, col: 23, rowspan:1, colspan: 4},
		      {row:0, col: 27, rowspan:1, colspan: 4},
		      {row:0, col: 31, rowspan:1, colspan: 2},
		      {row:0, col: 33, rowspan:1, colspan: 2},
		      {row:0, col: 0, rowspan:2, colspan: 1},
		      {row:0, col: 1, rowspan:2, colspan: 1},
		      {row:0, col: 2, rowspan:2, colspan: 1},
		      {row:0, col: 3, rowspan:2, colspan: 1},
		      {row:0, col: 4, rowspan:2, colspan: 1},
		      {row:0, col: 5, rowspan:2, colspan: 1},
		      {row:0, col: 6, rowspan:2, colspan: 1}
		    ];
		}
		let options={
			data:data, 
			stretchH:'all',
			fixedRowsTop: 0,
			manualColumnResize: true,
			manualRowResize: true,
			manualColumnMove: true,  
			columnSorting: true,
			sortIndicator: true,
			manualColumnResize: true,
			fixedColumnsLeft: 0,
			outsideClickDeselects: false, 
			filters: true, 
			mergeCells: merge_cells,
			hiddenColumns: {
			  columns: [],
			  indicators: true
			},
			hiddenRows: {
			  rows: [],
			  indicators: true
			},
			search: true,
			copyPaste:false 
		} 
		if(!columns){

		}else{ 
	 		columns=columns.sort(compare); 
			options['colHeaders']=getColHeaders(columns);
			options['rowHeaders']=true;
			options['columns']=getColumns(columns);       
	    }
	    self.grid = new Handsontable(container,options);  
    }
    componentWillReceiveProps(nextProps){ 
    } 
    componentWillUnmount(){ 
		 this.grid.destroy();
	} 
	render(){
		const {style,id}=this.props;
		return( 
			<div style={style} className={cx(s.handsontable_grid_wrap)}>
				<div id={id} style={{height:'100%',width:'100%'}}></div> 
			</div>
		)
	}
}
 
export class CostGridWrap extends React.Component {
	constructor (props, context) {
	    super(props, context);  
	}
	static propTypes={
		onChange: PropTypes.func,
		choices:PropTypes.array,
		value:PropTypes.oneOfType([
	      PropTypes.string,
	      PropTypes.array
	    ]),
		placeholder:PropTypes.string,
		name:PropTypes.string,
		multi:PropTypes.bool,
		error:PropTypes.bool,
		disabled:PropTypes.bool,
		labelKey:PropTypes.string,
		valueKey:PropTypes.string,
		style:PropTypes.object,
		id:PropTypes.string
	}  
	static defaultProps = { 
		style:{
			width:'100%',
			minHeight: '220px',
			resize:'vertical',
			overflow:'auto'
		},
		id:'custom_grid'
	}
	componentDidMount(){ 
		const self=this; 
		let {costData={},columns=[],id,myData}=self.props;
		let container = document.getElementById(id);  
		if(myData){
			costData=myData;
		} 
		const {data=[],hidden_columns=[],hidden_rows=[],merge_cells=[]}=costData;  
		let options={
			data:data, 
			stretchH:'all',
			fixedRowsTop: 0,
			manualColumnResize: true,
			manualRowResize: true,
			manualColumnMove: true,  
			columnSorting: true,
			sortIndicator: true,
			manualColumnResize: true,
			fixedColumnsLeft: 0,
			outsideClickDeselects: false, 
			filters: true, 
			mergeCells: merge_cells,
			hiddenColumns: {
			  columns: [],
			  indicators: true
			},
			hiddenRows: {
			  rows: [],
			  indicators: true
			},
			search: true,
			copyPaste:false 
		} 
		if(!columns){

		}else{ 
	 		columns=columns.sort(compare); 
			options['colHeaders']=getColHeaders(columns);
			options['rowHeaders']=true;
			options['columns']=getColumns(columns);       
	    }
	    self.grid = new Handsontable(container,options);  
    }
    componentWillReceiveProps(nextProps){ 
    } 
    componentWillUnmount(){ 
		 this.grid.destroy();
	} 
	render(){
		const {style,id}=this.props;
		return( 
			<div style={style} className={cx(s.handsontable_grid_wrap)}>
				<div id={id} style={{height:'100%',width:'100%'}}></div> 
			</div>
		)
	}
}
 

export default HandsontableGridWrap;