import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaInput,
	WeaNewScroll,
	WeaHelpfulTip,
	WeaLocaleProvider,
} from 'ecCom'
const getLabel = WeaLocaleProvider.getLabel

import TextArea from './TextArea';

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

	componentDidMount() {
		this.props.intelogin.getAllParams();
	}

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


	render() {
		const {
			intelogin
		} = this.props, {
			expression,
			exportDelimiter,
			insertDelimiter,
			insertParams,
		} = intelogin, {
			allParams,
			value,
		} = expression;

		const regExp = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;

		return (
			<div>
	        	<div style={{height: 275}}>
	        		<div className='integrated-expression-left'>
	        			<div style={{height: '14.5%',padding: 11}}>
	        				<span><i className='icon-coms-List-display' /></span>
	        				<span style={{marginLeft: 10}}>{getLabel(1361, '基本信息')}</span>
	        			</div>
	        			<div style={{height: '85.5%'}}>
	        				<div className='integrated-expression-left-l'>{getLabel(15636,'表达式')}</div>
	        				<div style={{float: 'left',width: '71%',height: '100%'}} className='integrated-login-textarea'>
	        					<TextArea ecId={`${this && this.props && this.props.ecId || ''}_TextArea@8rkwj8`} />
	        				</div>
	        			</div>
	        		</div>
	        		<div className='integrated-expression-right'>
	        			<div className='integrated-expression-right-lv1'>
	        				<span><i className='icon-coms-List-display' /></span>
	        				<span style={{marginLeft: 10}}>{getLabel(125411,'插入分隔符')}</span>
	        			</div>
	        			<div className='integrated-expression-right-lv2'>
	        				<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@3vjc3d`} 
	        					style={{width: '60%'}} 
	        					value={value}
	        					regExp={regExp} 
	        					length={1} 
	        					onChange={val => exportDelimiter(val)}
	        				/>
							<div style={{height: 30, lineHeight: '30px', verticalAlign: 'middle', display: 'inline-block'}}>
	        					<a style={{margin: '0 9px'}} onClick={() => insertDelimiter()}>{getLabel(30615,'插入')}</a>
								<WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@3kqvn0`} title={getLabel(387204,'插入的分隔符只能为特殊符号！')} width={150}/>
							</div>
	        			</div>
	        			<div className='integrated-expression-right-lv3'>
	        				<span><i className='icon-coms-List-display' /></span>
	        				<span style={{marginLeft: 10}}>{getLabel(125412,'插入参数')}</span>
	        			</div>
	        			<div style={{height: '58%'}}>
	        				<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@d58z8j`}
	        					height={159.5}
	        				>
	        					{
	        						allParams.map(param => {
	        							return <a style={{display:'block'}} className='wea-f14' onClick={() => insertParams({param})}>{param}</a>
	        						})
	        					}
	        				</WeaNewScroll>
	        			</div>
	        		</div>
	        	</div>
	        	<div className='integrated-expression-bottom'>
	        		<div className='integrated-expression-bottom-title'>
	        			<span><i className='icon-coms-List-display' /></span>
	        			<span style={{marginLeft: 10}}>{getLabel(25734, "说明")}</span>
	        		</div>
	        		<div style={{height: '76.5%', padding:'0 45px' }}>
	        			<p style={{padding:'5px 0'}}>{`${getLabel(125413,'表达式语法，即使用java字符串拼接语法')}:`}</p>
	        			<p>{`1、${getLabel(125414,'变量: 用户参数名、密码参数名、其他参数名')}`}</p>
	        			<p>{`2、${getLabel(125415,'字符串拼接采用加号')}`}</p>
	        			<p>{`3、${getLabel(125416,'常量: 双引号包含的字符串')}`}</p>
	        			<p>{`4、${getLabel(82159,'示例')}: loginid+"|"+userpassword(loginid${getLabel(125417,'代表之前定义的用户参数名')},userpassword${getLabel(125418,'代表之前定义的密码参数名')},"|"${getLabel(125419,'代表字符串常量')}`}</p>
	        		</div>
	        	</div>
	        </div>
		)

	}
}