import {
	observer,
} from 'mobx-react';
import {
	WeaUpload,
	WeaFormItem,
	WeaLocaleProvider,
} from 'ecCom';
import {Icon} from 'antd'
import {addContentPath} from '../../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class DispatchImg extends React.Component {
	render() {
		const {
			store
		} = this.props, {
			uploadDispatchImg,
			handleDispatchImgChange,
			closeDispatchImg,
		} = store;

		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@hk3vmm`}
				label={getLabel(512425,'选择推送图片')}
				labelCol={{span:6}}
				wrapperCol={{span:18}}
			>	
				{
					!uploadDispatchImg ? (
						<div className='uploadImg'>
							<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@v0uxl9`} 
								category={"string"}
								uploadUrl={"/api/doc/upload/uploadFile"}
								limitType={"jpg,gif,png"}
								listType={'img'}
								maxFilesNumber={1}
								maxUploadSize={5}
								onChange={handleDispatchImgChange}
							>
								<i className='icon-coms-AddTo'/>
							</WeaUpload>
							<span className='recommand'>{getLabel(512502,'建议尺寸：1068*455')}</span>
						</div>
					) : (
						<div className='uploadDispatchImg'>
							<img src={addContentPath(uploadDispatchImg)} />
							<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@mj7kyx`} type="cross-circle-o" title={getLabel('16075',"删除图片")} onClick={closeDispatchImg}/>
						</div>
					)
				}
			</WeaFormItem>
		);
	}
}