import {
	observer
} from 'mobx-react';
import {
	WeaInput,
	WeaTextarea,
	WeaLocaleProvider,
} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ReminderContent extends React.Component {
	render() {
		const {
			store
		} = this.props, {
			emailRemindContent,
			msgRemindContent,
			handleRemindTitleChange,
			handleRemindContentChange,
			handleParamsDoubleClick,
			setTextareaRef,
			searchStore
		} = store,{
			selectedKey
		} = searchStore;

		const rContent = (selectedKey === '0') ? emailRemindContent : msgRemindContent;

		const {
			title,
			content,
			params
		} = rContent;

		return (
			<div className='first-group'>
				<div className='left'>
					{
						(selectedKey === '0') && (
							<div className='title'>
								<span>{`${getLabel(512654,'邮件标题')}: `}</span>
								<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@wc8083`} value={title} onChange={handleRemindTitleChange}/>
							</div>
						)
					}
					<div className={`content ${(selectedKey === '1') && 'only'}`}>
						<span>{(selectedKey === '0') ? `${getLabel(512655,'邮件内容') }: `: `${getLabel(512683,"短信内容")}:`}</span>
						<WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@pox8ie`} 
							value={content} 
							onChange={handleRemindContentChange}
							ref={setTextareaRef}
						/>
					</div>
				</div>
				<div className='right'>
					<span>{`${getLabel(512656,'可用参数')}:`}</span>
					<div className='params' onDoubleClick={handleParamsDoubleClick}>
						{
							params && params.map(param=>{
								return (
									<span>{param}</span>
								)
							})
						}
					</div>
				</div>
			</div>
		);
	}
}