import {
    observer,
} from 'mobx-react';
import {
    Form,
    Button,
} from 'antd';
import Upload from "./Upload.js";
import SetupForm from "../../form/index.js"
import { i18n } from '../../../../../public/i18n.js';

@observer
class ImgSet extends React.Component {
    componentDidMount() {
        this.init();
    }

    init = () => {
        const {
            store,
            form
        } = this.props, {
            setForm,
            initFormField
        } = store;

        setForm(form);
        initFormField();
    }

    handleClick = (e) => {
        const { store: { recoveOriginImg } } = this.props;
        if (e.target.id == "origin") {
        	recoveOriginImg();
        }
    }

    componentDidUpdate(prevProps, prevState) {
        const {
            store,
            form
        } = this.props;

        store.setImgFormParams(form.getFieldsValue());
    }

    render() {
        const {
            form,
            store
        } = this.props, {
            form_gene_datas,
            img_preview_style,
            img_datas,
            setImgId,
        } = store;

        return (
            <div className="body-img-set" onClick={this.handleClick}>
				<div className="preview">
					<div style={img_preview_style} className="img-upload"/>
				</div>
                <div className="btns">
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gfvbxl`} type='primary' disabled={!img_datas.id} onClick={()=>setImgId('')}>{i18n.button.delete()}</Button>
    				<Upload ecId={`${this && this.props && this.props.ecId || ''}_Upload@7nwgxo`} name={i18n.label.updateImg()} type="2" store={store}/>
                </div>
				<SetupForm ecId={`${this && this.props && this.props.ecId || ''}_SetupForm@6r2buw`} datas={form_gene_datas} form={form}/>
			</div>
        );
    }
}

export default Form.create()(ImgSet);