import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaAlertPage,
	WeaRadioGroup,
	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')) {
			if (selectedRow.stype === '0') {
				arr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@pncic0`} className='info'>{i18n.label.schedulingDetail0()}</Row>);
				arr.push(
					(
						<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@k91vjw`} className='content'>
					        {i18n.message.sechduleInfoNone()}
						</Row>
					)
				);
			} else {
				arr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rdmfhp`} className='info'>{selectedRow.lastname}</Row>);
				let children = [];
				rowDetail.map(row => {
					children.push(
						<div className='dataRow'>
							<div className='lbl' title={`${row.date}${row.weekday}`}>{row.date}{row.weekday}</div>
							<div className='val' title={row.worktime} style={{background: row.worktime === '' ? null : row.background}}>{row.worktime}</div>
							<div className='des' title={row.description} style={{background: row.description === '' ? null : row.background}}>{row.description}</div>
						</div>
					)
				})
				arr.push(<div className='content-table'><WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@m0bvqd`} height={'100%'}>{children}</WeaNewScroll></div>)
			}
		} else {
			arr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@c2u00m`} className='info'>{i18n.label.schedulingDetail0()}</Row>);
			arr.push(
				(
					<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dp3pii`} className='content'>
						<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@1fgm2k`} {...this.state}>
							<div style = {{color : '#999999'}}>
						        {i18n.label.schedulingDetailTips0()}
						    </div>
						</WeaAlertPage>
					</Row>
				)
			);
		}
		return arr;
	}

	render() {
		const {
			store,
			rightMenu
		} = this.props;
		const {
			containerInitFinished,
			selectedRow,
			rowDetail,
			formTarget,
			onRadioGroupChange,
			refreshRadioGroup
		} = store;
		let config = [];
		const {
			conditionForm: form,
			conditionFormFields: fields
		} = formTarget;
		if (form != null) {
			// const formParams = form.getFormParams();
			config = [{
				...form.fieldMap['createdateselect__createdatefrom__createdateto'],
				domkey: [
					'createdateselect'
				],
				options: [{
					key: '1',
					showname: i18n.label.today(),
					// selected: formParams.createdateselect === '1'
				}, {
					key: '2',
					showname: i18n.label.tswk(),
					// selected: formParams.createdateselect === '2'
				}, {
					key: '3',
					showname: i18n.label.tsmth(),
					selected: true
					// selected: formParams.createdateselect === '3'
				}, {
					key: '7',
					showname: i18n.label.preMonth(),
					// selected: formParams.createdateselect === '7'
				}, {
					key: '4',
					showname: i18n.label.tssn(),
					// selected: formParams.createdateselect === '4'
				}, {
					key: '5',
					showname: i18n.label.tsyr(),
					// selected: formParams.createdateselect === '5'
				}, {
					key: '8',
					showname: i18n.label.preYear(),
					// selected: formParams.createdateselect === '8'
				}, {
					key: '6',
					showname: i18n.label.dateRange(),
					// selected: formParams.createdateselect === '6'
				}],
				selectLinkageDatas: {
					6: {
						conditionType: 'RANGEPICKER',
						domkey: ['createdatefrom', 'createdateto'],
					}
				},
				labelcol: 4,
				fieldcol: 20
			}, {
				...form.fieldMap['stype'],
				labelcol: 4,
				fieldcol: 20
			}]
		};

		const className = classnames({
			['rightCom']: true,
			['tabPane']: true,
			['tabPane-include']: containerInitFinished.detachable
		})

		return (
			<div className={className}>
				<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ab1z7h`} datas={rightMenu}>
					<div className='search'>
						<WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@oc836s`} config={config} onChange={onRadioGroupChange}/>
					</div>
					<div className='table'>
						<DataList ecId={`${this && this.props && this.props.ecId || ''}_DataList@ltv57y`} {...this.props}/>
					</div>
					<div className='list'>
						{
							this.renderList()
						}
					</div>
				</WeaRightMenu>
			</div>
		)
	}
}