import {
	inject,
	observer,
} from 'mobx-react'

import React, {
	Component
} from 'react';

import {
	WeaFormItem,
	WeaSearchGroup,
} from 'ecCom'

import {
	Spin,
	Modal
} from 'antd'

import {
	WeaSwitch
} from 'comsMobx'

import {
	i18n
} from '../../public/i18n';

import {
	WeaTableNew
} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
const confirm = Modal.confirm;

import * as mobx from 'mobx'
const toJS = mobx.toJS;

import Add from './Add'

@inject('hrmBirthdayRemindSet')
@observer
export default class AdminRemind extends React.Component {
	constructor(props) {
		super(props);
	}

	getForm() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			tabOne
		} = hrmBirthdayRemindSet, {
			form,
			condition,
			explanation
		} = tabOne, {
			isFormInit
		} = form;

		let arr = [];
		let formParams = form.getFormParams();

		isFormInit && condition.map((c, index) => {
			let _arr = [];
			c.items.map((field, index) => {
				_arr.push({
					com: (
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jj5ju8@${index}`}
	                        label={`${field.label}`}
	                        labelCol={{span: `${field.labelcol}`}}
	                        wrapperCol={{span: (index==1)? 14 : `${field.fieldcol}`}}
	                        error={form.getError(field)}
  							tipPosition="bottom"
	                        style={{width: '76%',marginLeft: '12%'}}
	                    >
	                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@52wv87@${index}`} fieldConfig={field} form={form} formParams={formParams} />
	                    </WeaFormItem>
					),
					colSpan: 1
				})
			})
			_arr.push({
				com: (
					<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@75v11n@${index}`}
	                    label={`${explanation[index].showname}`}
	                    labelCol={{span: 6}}
	                    wrapperCol={{span: 18}}
	                    style={{width: '76%',marginLeft: '12%'}}
	                >
	                    <ul>
	                     	{this.getExplanation(explanation[index].showvalues)}
	                    </ul>      
	                </WeaFormItem>
				),
				colSpan: 1
			});
			arr.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@6q4sz7@${index}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={_arr} col={1} />)
		})

		return arr;
	}

	getExplanation(explanations = []) {
		return explanations.map(item => <li>{item}</li>);
	}

	add() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			setVisible
		} = hrmBirthdayRemindSet;

		setVisible(true);
	}

	del() {
		this.showConfirm();
	}

	showConfirm() {
		let _this = this;
		confirm({
			title: i18n.confirm.defaultTitle(),
			content: i18n.confirm.batchDeleteConfirm(),
			okText: i18n.button.ok(),
			cancelText: i18n.button.cancel(),
			onOk() {
				_this.onOk()
			},
			onCancel() {
				return false
			},
		});
	}

	onOk() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			delRows
		} = hrmBirthdayRemindSet;

		delRows();
	}

	render() {
		const {
			hrmBirthdayRemindSet
		} = this.props, {
			tabOne,
			date
		} = hrmBirthdayRemindSet, {
			loading,
			tableStore,
			auth
		} = tabOne, {
			visible
		} = auth

		if (loading) {
			return (
				<div style={{textAlign:'center',padding: '200px 0'}}>
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@qfwlyc`} spinning={loading} size='large'></Spin>
				</div>
			)
		} else {
			return (
				<div>
					{this.getForm()}
					<div style={{padding: '0 25px',marginTop: 40}}>
	                	<div style={{float: 'left'}}>{i18n.label.adminSet()}</div>
	                	<div style={{float: 'right',marginRight: 15}}>
	                		<i
				                style={{backgroundColor:'#34A2FF',padding:4,color:'#FFFFFF',cursor:'pointer',marginRight: 10}}
				                className="icon-coms-plus"
				                title="添加"
				                onClick={() => this.add()}
	            			/>
				            <i
				                className="icon-coms-Loss"
				                title="批量删除"
				                style={{backgroundColor:(tableStore.selectedRowKeys.length > 0) ? '#34A2FF' : '#D9D9D9', padding: 4, color: '#FFFFFF', cursor: 'pointer'}}
				                disabled={true}
				                onClick={() => (tableStore.selectedRowKeys.length > 0) && this.del()}
				            />
	                	</div>
	                	<div style={{paddingTop: 30}}>
		                	<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@838n1o`} 
				                comsWeaTableStore={tableStore}
				                hasOrder={true}
				                needScroll={true}
				                scroll={{y: 260}}
				                style={{borderTop:'1px solid #E2ECF2'}}
		           	 		/>
		           	 	</div>
                	</div>
                	{visible && <Add ecId={`${this && this.props && this.props.ecId || ''}_Add@7znh7t`} />} 
				</div>

			)
		}

	}
}