import {Table, Icon, Button, Spin, Row, Col,Menu, Dropdown,} from 'antd';
import { WeaTools,WeaInput,WeaTextarea,WeaSelect,WeaBrowser,WeaDatePicker,WeaTimePicker,WeaCheckbox,WeaLocaleProvider} from "ecCom"
const getLabel = WeaLocaleProvider.getLabel;
import classNames from 'classnames'
import isEqual from 'lodash/isEqual';
import './index.less'

//国际化 zxt- 20170419
const defaultLocale = {
	total: getLabel(18609,"共"),
	totalUnit: getLabel(18256,"条"),
};


class Main extends React.Component {
	//国际化 zxt- 20170419
	static contextTypes = {
		antLocale: React.PropTypes.object,
	}
	getLocale() {
		let locale = {};
		if(this.context.antLocale && this.context.antLocale.Table) {
			locale = this.context.antLocale.WeaTableEdit;
		}
		return {
			...defaultLocale,
			...locale,
			...this.props.locale
		};
	}
	constructor(props) {
		super(props);
		this.state = {
			columns: [],
			datas: [],
			selectedRowKeys: [],
			current: 1
		}
		this.onEdit = this.onEdit.bind(this);
	}
	componentDidMount() {
		const { datas = [], columns = [] } = this.props;
		columns.length > 0 && this.setState(datas.length > 0 ? {datas: this.addKeytoDatas(datas),columns} : {columns})
	}
	componentWillReceiveProps(nextProps) {
		const { columns = [], datas = [], selectedRowKeys = [] } = this.props;
		const _columns = nextProps.columns || [];
		const _datas = nextProps.datas || [];
		const _selectedRowKeys = nextProps.selectedRowKeys || [];
		!isEqual(columns,_columns) && this.setState({columns: _columns});
		!isEqual(datas,_datas) && this.setState({datas: this.addKeytoDatas(_datas)});
		!isEqual(selectedRowKeys,_selectedRowKeys) && this.setState({selectedRowKeys: _selectedRowKeys});
	}
	componentDidUpdate() {

	}
	addKeytoDatas(datas){
		let _datas = datas.map((data, i) => {
			let _data = {...data};
			_data.key = i
			return _data
		})
		return _datas
	}
	render() {
		const { datas } = this.state;
        const {tableProps} = this.props;
		return(
			<div className="wea-table-edit" >
                <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@qvz5qv`}
                	columns={this.getColumns()}
                	dataSource={datas}
                	pagination={this.getPagination()}
                    {...tableProps}
                />
            </div>
		)
	}
	getColumns(){
		const { columns } = this.state;
		let _columns = [].concat(columns);
		_columns = _columns.map(col => {
			let _col = { ...col };
			_col.render || (_col.render = ( text, record, index ) => {
				return this.getColRender( _col, text, record, index );
			})
			return _col
		});
		return _columns
	}
	getColRender( _col, text, record, index ){
		const { com } = _col;
		let _com = [];
		const {onCreatReq, onCreatDoc} = this.props;
		com.map((c,i) => {
			if(typeof c.props === 'object'){
				_com.push(c);
			}else{
				const { key, label = '', type = 'INPUT', options = [], browserConditionParam = {}, innerStyle = {width: "100%"},
                 viewAttr = 2 ,showTime = false ,format = "yyyy-MM-dd",otherParams } = c;
				const _type = type.toUpperCase();
                let style = _type === 'BROWSER' ? {...innerStyle}:{...innerStyle, display: 'inline-block'}
				_com.push(
					<span >
						{label && <span style={{marginLeft: 5}}>{label}</span>}
						{ _type === 'INPUT' &&
							<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@buaw2o@${i}`}
                                {...otherParams}
								defaultValue={record[key]}
								value={record[key]}
								style={style}
								viewAttr={ viewAttr }
								onBlur={value => this.onEdit(record, index, key, value)} />
						}
						{ _type === 'TEXTAREA' &&
							<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@71ebix@${i}`}
                                 {...otherParams}
								defaultValue={record[key]}
								value={record[key]}
								style={style}
								viewAttr={ viewAttr }
								onBlur={value => this.onEdit(record, index, key, value)} />
						}
						{ _type === 'DATEPICKER' &&
							<WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@eaacfu@${i}`}
                                 {...otherParams}
								showTime = {showTime}
								format = {format}
								defaultValue={record[key]}
								value={record[key]}
								style={style}
								viewAttr={ viewAttr }
								onChange={value => this.onEdit(record, index, key, value)} />
						}
						{ _type === 'TIMEPICKER' &&
							<WeaTimePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaTimePicker@rm310j@${i}`}
                                 {...otherParams}
								defaultValue={record[key]}
								value={record[key]}
								style={style}
								viewAttr={ viewAttr }
								onChange={value => this.onEdit(record, index, key, value)} />
						}
						{ _type === 'SELECT' &&
							<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@qdxe5o@${i}`}
                                {...otherParams}
								defaultValue={record[key]}
								value={record[key]}
								options={options}
								style={style}
								viewAttr={ viewAttr }
								onChange={value => this.onEdit(record, index, key, value)} />
						}
						{ _type === 'BROWSER' &&
							<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@w306tg@${i}`}
                                 {...otherParams}
								replaceDatas={this.getBrowerDatas(record, key)}
								{...browserConditionParam}
								inputStyle={style}
								viewAttr={ viewAttr }
								onChange={(ids, names, bDatas) => this.onEdit(record, index, key, ids, names, bDatas)} />
						}
						{ _type === 'CHECKBOX' &&
							<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@79kacl@${i}`}
                                {...otherParams}
                                style={style}
                                value={record[key]}
                                viewAttr={ viewAttr }
                                onChange={(value) => this.onEdit(record, index, key, value)}
                            />
						}
						{
                            _type == "LINK_WF" &&
							<span className="prj-link-a">
								<a onClick={()=>onCreatReq(record.wfid,record.taskId)}>{record[key]}</a>({record.requiredWFCount})
								<span className="prj-content-must" style={{display:(Number(record.requiredWFCount)<=0 &&record.isNecessary=="1" ) ?"inline-block":"none"}}>!</span>
							</span>
						}
						{
                            _type == "LINK_DOC" &&
							<span className="prj-link-a">
								<a onClick={()=>onCreatDoc && onCreatDoc(record.reqDocSecCategory,record.taskId)}>{record[key]}</a>({record.requiredDocCount})
								<span className="prj-content-must" style={{display:(Number(record.requiredDocCount)<=0 &&record.isNecessary=="1" ) ?"inline-block":"none"}}>!</span>
							</span>
                        }
                        {
                            _type == "OPERATE" &&
                            <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@a7zea6@${i}`} overlay={this.getMenu(record,options,record["ismanager"])} >
                                <a className="ant-dropdown-link">
                                {getLabel(104,"操作")} <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@lkr5wm@${i}`} type="caret-down" />
                                </a>
                            </Dropdown> 
                        }
					</span>
				)
			}
		});
		return (
			<div>
				{_com}
			</div>
		)
	}
	getBrowerDatas(record, key){
		let replaceDatas = [];
		if(record[key + 'span'] !== undefined) {
			let keys = record[key].split(',');
			let values = record[key + 'span'].split(',');
			if(keys.length === values.length){
				keys.map((k, i) => {
					if (k != '' && values[i] != '') replaceDatas.push({id: k, name: values[i]});
				});
			}else{
				
			}
		}
		return replaceDatas
	}
	getPagination() {
		const { pageSize = 0, paginationSize = ''} = this.props;
		if( !pageSize ) return false;
		const { current } = this.state;
		const locale = this.getLocale();
		let obj = {
			size: paginationSize,
			current,
			pageSize,
		};
		return obj
	}
	onEdit(record, index, key, value, names, bDatas){
		const { pageSize = 0 } = this.props;
		const { datas, current } = this.state;
		let _datas = [].concat(datas);
		_datas[pageSize * (current - 1) + index][key] = value;
		if(names) _datas[pageSize * (current - 1) + index][key + 'span'] = names;
		this.setState({datas: _datas});
		this.onChange(_datas,index);
	}
	onChange(datas,index){
		const { columns } = this.state;
		let _datas = datas.map((data, i) => {
			let _data = {...data}
			delete _data.key
			return _data
		})
		typeof this.props.onChange === 'function' && this.props.onChange(_datas[index], columns);
    }
    getMenu(record,options,bool){
		let menu = [];
        if(options && bool){
            options.map(item=>{
                menu.push(
                    <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@uvdjgu@${item.key}`}>
                    <a  href="javascript:void(0)" key={item.key}>{item.showname}</a>
                    </Menu.Item>
                )
            })
            return <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@l8nazv`} onClick={()=>this.onMenuClick(record,options)}>
                {menu}
            </Menu>
        }
        return menu
    }
    onMenuClick=(record,options)=>{
		typeof this.props.operate == "function" && this.props.operate(record);
    }
}

export default Main;