import { Fragment } from 'react';
import { observer } from 'mobx-react';
import { WeaUpload } from 'ecCom';
import { Badge } from 'antd';
import { Dialog } from '../../public/valhalla/components/index.js';
import {i18n } from '../../public/i18n.js'
import {addContentPath} from '../../util/index.js'

@observer
export default class DispatchImgDialog extends React.Component {
    render() {
        const { store: { dispatchImgDialogStore, dispatchImg, handleUploadChange, setUploadStatus, delDispatchImg } } = this.props;
        return (
            <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@n267w2`} store={dispatchImgDialogStore}>
				<div className="birth-dispatch-img">
					<span>{`${i18n.label.selectDispatchImg()}: `}</span>
					{
						dispatchImg ? (
							<Badge ecId={`${this && this.props && this.props.ecId || ''}_Badge@y48w3x`} count={"x"} onClick={delDispatchImg} title={i18n.button.deleteImg()}>
								<img src={addContentPath(dispatchImg)} />
							</Badge>
						) : (
							<Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@orsq3a`}>
								<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@98zxvj`}
						          datas={dispatchImg}
						          uploadUrl="/api/doc/upload/uploadFile"
						          category="string"
						          onChange={(ids, list) =>handleUploadChange(ids, list)}
						          onUploading={setUploadStatus}
						        >
									<i className="icon-coms-AddTo" />
								</WeaUpload>
								<span>{`${i18n.label.recommandSize()}: 1068*455`}</span>
							</Fragment>
						)
					}
				</div>
			</Dialog>
        );
    }
}