import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaAlertPage,
	WeaNewScroll,
	WeaRightMenu
} from 'ecCom';
import {
	Row,
	Icon
} from 'antd';
import DataList from './DataList';
import {
	has
} from 'lodash';
import {
	i18n
} from '../../../public/i18n';
import classnames from 'classnames';

@observer
export default class Setting extends Component {
	constructor(props) {
		super(props);
		this.state = {
			icon: <i className="icon-coms-Print-log"/>,
			iconSize: 60,
			paddingTop: '25%'
		}
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	renderList = () => {
		const {
			store
		} = this.props;
		const {
			selectedRow,
			rowDetail
		} = store;
		let arr = [];
		if (has(selectedRow, 'id')) {
			arr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@1khv8a`} className='info'>{selectedRow.field001span}</Row>);
			if (rowDetail == null || rowDetail.length == 0) {
				arr.push(
					(
						<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rumims`} className='content'>
							<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@srjy3l`} {...this.state}>
								<div style = {{color : '#999999'}}>
							        {i18n.label.withScheduling()}
							    </div>
							</WeaAlertPage>
						</Row>
					)
				)
			} else {
				let children = [];
				rowDetail.map(row => {
					children.push(
						<div className='dataRow'>
							<div className='lbl'>{row.id}</div>
							<div className='val' title={row.value} style={{background: row.value === '' ? null : row.background}}>{row.value}</div>
						</div>
					)
				})
				arr.push(<div className='content-table'><WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@khe1dv`} height={'100%'}>{children}</WeaNewScroll></div>)
			}
		} else {
			arr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@l7ox2i`} className='info'>{i18n.label.schedulingDetail()}</Row>);
			arr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@qhrghk`} className='content'>{i18n.label.schedulingDetailTips()}</Row>);
		}
		return arr;
	}

	render() {
		const {
			store,
			rightMenu
		} = this.props;
		const {
			containerInitFinished,
			selectedRow,
			rowDetail
		} = store;
		const className = classnames({
			['rightCom']: true,
			['tabPane']: true,
			['tabPane-include']: containerInitFinished.detachable
		})
		return (
			<div className={className}>
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@lo6d57`} datas={rightMenu}>
					<div className='table'>
						<DataList ecId={`${this && this.props && this.props.ecId || ''}_DataList@c1pp28`} {...this.props}/>
					</div>
					<div className='list'>
						{
							this.renderList()
						}
					</div>
				</WeaRightMenu>
			</div>
		)
	}
}