import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaCheckbox
} from 'ecCom';
import {
	Row,
	Col
} from 'antd';
import {
	i18n
} from '../../../public/i18n';
import {
	indexOf,
	has
} from 'lodash';
import classnames from 'classnames';

@observer
export default class DetailSetting extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	selectAll = (val) => {
		const {
			store
		} = this.props;
		const {
			detailFormFields
		} = store;
		detailFormFields.rightitem.map(item => {
			item.checked = val === '1' ? true : false;
		})
	}

	checkLabel = rightitem => rightitem.length === 1 && !has(rightitem[0], 'name');

	renderList = () => {
		const {
			store
		} = this.props;
		const {
			detailFormFields,
			formTarget,
			rightSelectedCount
		} = store;
		const {
			shiftsSettingForm: form
		} = formTarget;
		const formParams = form.getFormParams();

		let arr = [
			<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nnluxo`} className='selectAll'>
				<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x346kc`} span={12}>
					<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@35tcfl`} content={i18n.button.selectAll0()} onChange={(val) => this.selectAll(val)}/>
				</Col>
				<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@g1z3jy`} span={12}>{i18n.label.selectedCount0()}({rightSelectedCount})</Col>
			</Row>
		];

		switch (formParams.field003) {
			case '0':
				detailFormFields.rightitem.map((item, i) => {
					arr.push((
						<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@k6fhfd@${i}`}>
							<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@ijlm5d@${i}`} id={item.value} content={item.title} value={item.checked} onChange={(val) => item.checked = val === '1' ? true : false}/>
						</Row>
					))
				})
				break;
			case '1':
				let children = [];
				detailFormFields.rightitem.map((item, i) => {
					children.push((
						<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vbt8ip@${i}`} span={8}>
							<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@qc3iua@${i}`} id={item.value} content={item.title} value={item.checked} onChange={(val) => item.checked = val === '1' ? true : false}/>
						</Col>
					))
				})
				arr.push(<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@i8oxa8`}>{children}</Row>)
				break;
		}

		return arr;
	}

	renderRight = () => {
		const {
			store
		} = this.props;
		const {
			detailFormFields,
			formTarget
		} = store;
		const {
			shiftsSettingForm: form
		} = formTarget;
		const formParams = form.getFormParams();

		const isLabel = this.checkLabel(detailFormFields.rightitem);
		if (isLabel) {
			return <div>{detailFormFields.rightitem[0].title}</div>
		} else {
			return this.renderList();

		}
	}

	render() {
		const {
			store
		} = this.props;
		const {
			detailFormFields
		} = store;
		const isLabel = this.checkLabel(detailFormFields.rightitem);
		return (
			<div className='sdialog'>
				<div className='detailSetting'>
					<div className='left'>
						<div className='label'>{i18n.label.plsSelectScheduling()}</div>
						<div className='list'>
						{
							detailFormFields.leftitem.map((item, i) => {
								return (
									<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@dzxkok@${i}`}>
										<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@3s37x4@${i}`} id={item.value} content={item.name} value={item.checked} onChange={(val) => item.checked = val === '1' ? true : false}/>
									</Row>
								)
							})
						}
						</div>
					</div>
					<div className='right'>
						<div className='label'>{i18n.label.plsSelectDate()}：</div>
						<div className='list'>
							{
								this.renderRight()
							}
						</div>
					</div>
				</div>
			</div>
		)
	}
}