import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaDialog, WeaLocaleProvider, WeaRightMenu, WeaFormItem, WeaSelect, WeaHelpfulTip, WeaTable } from 'ecCom';
import { Spin } from 'antd';
import { WeaSwitch } from 'comsMobx';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
const store = ['todoClientStore'];

@inject(...store)
@observer
export default class WorkflowdataDialog extends React.Component {
	onCancelHandle = () => {
		const { status } = this.props.todoClientStore;
		status.WorkflowdataDialogVisible = !(status.WorkflowdataDialogVisible);
	}

	getSearchs = () => {

		const { workflowdataFrom, condtionField } = this.props.todoClientStore;
		const { isFormInit } = workflowdataFrom;
		let items = [];
		let dataProps = { unMsgTypeId: '' }
		isFormInit &&
			toJS(condtionField).map((c) => {
				c && c.items && c.items.map((field) => {

					let dataParam1 = workflowdataFrom.getFormParams().todoData != '' ? workflowdataFrom.getFormParams().todoData + ',' : '';
					let dataParam2 = workflowdataFrom.getFormParams().doneData != '' ? workflowdataFrom.getFormParams().doneData + ',' : '';
					let dataParam3 = workflowdataFrom.getFormParams().overData != '' ? workflowdataFrom.getFormParams().overData + ',' : '';
					let dataParam4 = workflowdataFrom.getFormParams().deleteData != '' ? workflowdataFrom.getFormParams().deleteData : '';
					let dataParams = ''
					if (field.domkey[0] == 'todoData') {
						dataParams = dataParam2 + dataParam3 + dataParam4
					}
					if (field.domkey[0] == 'doneData') {
						dataParams = dataParam1 + dataParam3 + dataParam4
					}
					if (field.domkey[0] == 'overData') {
						dataParams = dataParam1 + dataParam2 + dataParam4
					}
					if (field.domkey[0] == 'deleteData') {
						dataParams = dataParam1 + dataParam2 + dataParam3
					}
					dataProps.unMsgTypeId = dataParams
					field.browserConditionParam.dataParams = {
						...field.browserConditionParam.dataParams,
						...dataProps,
						moduleid: 2,
						isShow: 'n'
					}
					field.browserConditionParam.completeParams = {
						...dataProps,
					}
					items.push(
						<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@kh4osd@${field.domkey[0]}`}
							label={`${field.label}`}
							labelCol={{ span: `${field.labelcol}` }}
							tipPosition="bottom"
							wrapperCol={{ span: `${field.fieldcol}` }}
							style={{ marginTop: '20px' }}
						>
							<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@qrq775@${field.domkey[0]}`}
								fieldConfig={field}
								form={workflowdataFrom}
								onBeforeFocusCheck={(success, fail) => {
 success(console.log('chufa')) 
}}
							/>
						</WeaFormItem>,
					);
				});
			});
		return items;
	}


	render () {
		const { todoClientStore: store } = this.props;
		const { onChangeHandle, selectstatus, status, columns, datas, buttons, moreBtn, rightButton, savedata } = store;
		const { wfdataDiaSpinflag, content } = status;
		const columnsData = columns.slice();
		const datasData = datas.slice();


		return (<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@hwbqif`}
			title={getLabel('524721', '流程数据分类控制')}
			visible={status.WorkflowdataDialogVisible}
			style={{ width: 900, height: 400 }}
			moduleName="integration"
			buttons={buttons}
			moreBtn={moreBtn}
			onCancel={this.onCancelHandle}
		>

			<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@l6e3h0`} spinning={wfdataDiaSpinflag}>
				{wfdataDiaSpinflag == false ?
					<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@10yzry`} datas={rightButton} >

						<div style={{ width: '700px', margin: '50px auto' }}>
							{/* 这段代码写的很让人头大，为什么单选代码不放在这里直接渲染，却要拿到store中再用content返回，是因为，当初设计的时候出了问题，content内容不走接口，所以每次加载都会和下面表单不同步（表单走接口），
							所以只能在store中接口请求数据回来后进行返回，以后编写代码注意同步问题，能让后端返回的数据就都让后端返回，使得页面统一展现 */}
							{content}
							{status.selectedindex == 1 ?
								<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ug7j68`}
									columns={columnsData}
									dataSource={datasData}
									pagination={false}
								/> :
								<div style={{ width: 400, margin: '30px auto 0 155px' }} >
									{this.getSearchs()}
								</div>
							}
						</div>

					</WeaRightMenu> : <div style={{ height: '400px' }}></div>
				}

			</Spin>
		</WeaDialog>);
	}
}
