import {
    observer,
} from 'mobx-react';
import {
    Button,
    Form,
} from 'antd';
import {
    WeaSearchGroup,
    WeaLocaleProvider
} from "ecCom";
import BgImg from "./BgImg.js";
import Upload from "./Upload.js";
import SetupForm from "../../form/index.js";
import { i18n } from '../../../../../public/i18n.js'
const getLabel = WeaLocaleProvider.getLabel;

//提示语
const Tip = (props) => {
    const { type } = props
    return (
        <div className="bg-set-tip">{i18n.label.cardRecommandSize().replace("{param}", (type == "pc") ? "475*500" : "750*1208")}</div>
    )
}

//按钮组
const Btns = (props) => {
    const {
        handleBgImgBatchDel
    } = props.store;

    return (
        <div className="bg-set-btn">
            <Upload ecId={`${this && this.props && this.props.ecId || ''}_Upload@m46gip`} name={i18n.label.upload()} type="1" store={props.store} />
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bbv699`} type="primary" onClick={handleBgImgBatchDel}>{i18n.label.deleteAll()}</Button>
        </div>
    )
}

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

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

        setForm(form);
        initFormField();
    }

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

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

    render() {
        const {
            form,
            store
        } = this.props, {
            handleBgImgClick,
            bg_datas,
            form_gene_datas,
            staffRemindStore: { cardType }
        } = store;

        return (
            <div className="body-bg-set">
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@gklte0`} showGroup title={i18n.label.chooseBgImg()} customComponent={<Btns ecId={`${this && this.props && this.props.ecId || ''}_Btns@z4zfa3`} store={store} />}>
                    <div class="bg-img-container" onClick={handleBgImgClick}>
                        {bg_datas.imgs.map(data => {
                            return <BgImg ecId={`${this && this.props && this.props.ecId || ''}_BgImg@pfzcog@hrm`} {...data} />
                        })}
                    </div>
                    <Tip ecId={`${this && this.props && this.props.ecId || ''}_Tip@1905bp`} type={cardType} />
                </WeaSearchGroup>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@pdo6ey`} showGroup title={i18n.label.bgSet()} >
                    <SetupForm ecId={`${this && this.props && this.props.ecId || ''}_SetupForm@99ewje`} datas={form_gene_datas} form={form} />
                </WeaSearchGroup>
            </div>
        );
    }
}

export default Form.create()(BgSet);