import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx'
import {
	WeaTableEditable,
	WeaHelpfulTip,
	WeaLocaleProvider,
} from 'ecCom'
import {
	Modal
} from 'antd';
const getLabel = WeaLocaleProvider.getLabel

@inject('intelogin')
@observer
export default class TableEdit extends React.Component {
	constructor(props) {
		super(props);
		this.columns = [{
			title: (<span>
				<span>{getLabel(20968, '参数名')}</span>
				<span style={{ marginLeft: 10 }}>
					<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@s0cowl@integrationLoginTableEditparamnames`}
						width={150}
						title={getLabel('528746', "参数名必填且不能重复！")}
					/>
				</span>
			</span>),
			dataIndex: 'paramnames',
			width: '15%',
			com: [{
				type: 'INPUT',
				key: 'paramnames',
				viewAttr: 3,
			}]
		}, {
			title: <span>{getLabel(176, '标签')}</span>,
			dataIndex: 'labelnames',
			width: '15%',
			com: [{
				type: 'INPUT',
				key: 'labelnames',
			}]
		}, {
			title: <span>{getLabel(20969, '参数值')}</span>,
			dataIndex: 'cascader',
			width: '65%',
			com: [{
				type: 'CASCADER',
				key: 'cascader',
				compDef: {
					type: 'select',
					options: [{
						key: '0',
						selected: true,
						showname: getLabel(453, '固定值'),
					}, {
						key: '1',
						selected: false,
						showname: getLabel(20976, '用户录入'),
					}, {
						key: '2',
						selected: false,
						showname: getLabel(141, '分部'),
					}, {
						key: '3',
						selected: false,
						showname: getLabel(18939, '部门'),
					}, {
						key: '4',
						selected: false,
						showname: getLabel(15636, '表达式'),
					}, {
						key: '5',
						selected: false,
						showname: getLabel(125424, '表达式参数'),
					}],
					style: {
						width: 100
					},
					subChildren: (value) => {
						if (value == '0') {
							return {
								type: 'input',
								style: {
									width: 120
								}
							}
						} else if (value == '4') {
							return [(<a onClick={() => this.setExpression()}>{getLabel(19653, "设置")}</a>), {
								type: 'input',
								disabled: true,
								hasBorder: true,
								style: {
									width: 120,
									marginLeft: 11
								}
							}]
						} else if (value == '5') {
							return [{
								type: 'input',
								style: {
									width: 120
								}
							}, {
								type: WeaHelpfulTip,
								title: getLabel(129313, '表达式参数特殊值设置：当前日期，值设置为$date$；当前时间，值设置为$time$；当前日期和时间，值设置为$dateandtime$；1970年1月1日起至当前时间的毫秒数，值设置为$ts$；1970年1月1日起至当前时间的秒数，值设置为$ts_l$。'),
							}]
						} else {
							return null
						}

					}
				}
			}]
		}, {
			title: <span></span>,
			dataIndex: 'input5',
			width: '15%',
			com: [{
				type: 'INPUT',
				key: 'input5',
				viewAttr: 1,
			}]
		}, {
			title: <span></span>,
			dataIndex: 'input6',
			width: '15%',
			com: [{
				type: 'INPUT',
				key: 'input6',
				viewAttr: 1,
			}]
		}, {
			title: <span></span>,
			dataIndex: 'input7',
			width: '15%',
			com: [{
				type: 'INPUT',
				key: 'input7',
				viewAttr: 1,
			}]
		}];

		this.switch = {
			title: <span>{getLabel(28640, '是否加密')}</span>,
			dataIndex: 'paraencrypts',
			width: '10%',
			com: [{
				type: 'SWITCH',
				key: 'paraencrypts',
			}]
		};

		this.encryptionKey = {
			title: <span>{getLabel(32348, '加密密钥')}</span>,
			dataIndex: 'encryptcodes',
			width: '15%',
			com: [{
				type: 'INPUT',
				key: 'encryptcodes',
				otherParams: {
					type: 'password'
				}
			}]
		};

		this.encryptionVector = {
			title: <span>{getLabel(129315, '加密向量')}</span>,
			dataIndex: 'encryptivs',
			width: '15%',
			com: [{
				type: 'INPUT',
				key: 'encryptivs',
				otherParams: {
					type: 'password'
				}
			}]
		}
	}

	componentWillUnmount () {
		this.props.intelogin.resetTableEdit();
	}

	getcol = () => {
		const {
			intelogin
		} = this.props, {
			loginForm,
			tableEdit,
		} = intelogin, {
			encrypttype,
			isneedpwd,
			isneediv,
		} = loginForm, {
			datas
		} = tableEdit;

		const c = [...this.columns];

		if (encrypttype == '0') {
			return c;
		} else {
			c[3] = this.switch;
			if (isneedpwd == '1' && isneediv == '0') {
				if (this.isopen(datas)) c[4] = this.encryptionKey;
			}
			if (isneedpwd == '0' && isneediv == '1') {
				if (this.isopen(datas)) c[4] = this.encryptionVector;
			}
			if (isneedpwd == '1' && isneediv == '1') {
				if (this.isopen(datas)) {
					c[4] = this.encryptionKey;
					c[5] = this.encryptionVector;
				}
			}
		}

		return c;
	}

	isopen = (datas) => {
		return datas.some(data => data.paraencrypts && data.paraencrypts == '1')
	}

	setExpression = () => {
		const {
			intelogin
		} = this.props, {
			openDialog,
			mainTable,
			Id
		} = intelogin, {
			id
		} = mainTable;

		openDialog({
			type: 'expression',
			id,
			Id
		});
	}

	willDelete = (datas, keys) => new Promise((resolve, reject) => {
		Modal.confirm({
			content: `${getLabel(385625, '确定要删除选择的记录吗？')}`,
			onOk: () => resolve(true),
			onCancel: () => resolve(false)
		})
	})

	render () {
		const {
			intelogin
		} = this.props, {
			tableEdit,
			exportTableEditDatas,
			locateRowIndex,
			setRef,
			willEdit,
			willAdd,
			verifyOtherParam,
		} = intelogin, {
			datas,
			cells,
		} = tableEdit;

		return (
			<div style={{ padding: '0 25px' }}>
				<WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@xn7enj`}
					ref={ref => setRef(ref)}
					columns={this.getcol()}
					title={getLabel(20967, '其他参数')}
					showCollapse
					datas={toJS(datas)}
					cells={toJS(cells)}
					showCopy={false}
					tableProps={{
						onRowClick: (record, index) => locateRowIndex(index),
						showEmptyText: false,
					}}
					validator={{
						rules: { paramnames: 'required|only' },
						errorMessage: {
							required: getLabel(385869, '此项必填'),
						},
						customRegister: [{
							name: 'only',
							rules: (value, requirement, attribute) => {
								return verifyOtherParam(value.trim())
							},
							errorMessage: getLabel('388334', "参数名重复"),
						}]
					}}
					willAdd={(datas, addData) => willAdd(datas, addData)}
					willDelete={this.willDelete}
					willEdit={(datas, result) => willEdit(datas, result)}
					onChange={datas => exportTableEditDatas(datas)}
				/>
			</div>
		)

	}
}