import {
    observer,
} from 'mobx-react';
import {
    WeaSlideModal,
} from 'ecCom';
import BgSet from "./BgSet.js";
import ImgSet from "./ImgSet.js";
import HeadSet from "./HeadSet.js";
import CongratulationSet from "./CongratulationSet.js";
import PersonSet from "./PersonSet.js";
import DateSet from "./DateSet.js";


@observer
export default class Slide extends React.Component {
    getContent = () => {
        const {
            store
        } = this.props, {
            type
        } = store;

        if (type === "bg") {
            return <BgSet ecId={`${this && this.props && this.props.ecId || ''}_BgSet@3rfcvd`} store={store}/>
        }
        if (type === "img") {
            return <ImgSet ecId={`${this && this.props && this.props.ecId || ''}_ImgSet@1v0koa`} store={store}/>
        }
        if (type === "head") {
            return <HeadSet ecId={`${this && this.props && this.props.ecId || ''}_HeadSet@uu4pl7`} store={store}/>
        }
        if (type === "congratulation") {
            return <CongratulationSet ecId={`${this && this.props && this.props.ecId || ''}_CongratulationSet@vkfr79`} store={store}/>
        }
        if (type === "person") {
            return <PersonSet ecId={`${this && this.props && this.props.ecId || ''}_PersonSet@ttat9f`} store={store}/>
        }
        if (type === "date") {
            return <DateSet ecId={`${this && this.props && this.props.ecId || ''}_DateSet@aeq9mi`} store={store}/>
        }
    }

    getBottomBar = () => {
        const { store: { handleBottomBarClick } } = this.props;
        const datas = [{
            icon: "icon-coms-Top-floor",
            title: "置于顶层"
        }, {
            icon: "icon-coms-upper",
            title: "上移一层"
        }, {
            icon: "icon-coms-lower",
            title: "下移一层"
        }, {
            icon: "icon-coms-bottom-floor",
            title: "置于底层"
        }, {
            icon: "icon-coms-Delete",
            title: "删除"
        }];
        return (
            <ul className="birth-slide-bottom-bar">
                { datas.map( (data,index) =><li onClick={() => handleBottomBarClick(index)}><i className={data.icon} title={data.title}/></li>) }
            </ul>
        )
    }

    componentDidUpdate(prevProps, prevState) {
        setTimeout(() => {
            // console.log($('.wea-slide-modal .wea-new-scroll').height())
        })
    }

    render() {
        const {
            store
        } = this.props, {
            visible,
            slide_props,
            setVisible,
            type
        } = store;

        return (
            visible && (
                <WeaSlideModal ecId={`${this && this.props && this.props.ecId || ''}_WeaSlideModal@uvx1zu`} 
                    visible={visible}
                    {...slide_props}
                    content={(<div>
                        { this.getContent() }
                        { false && ( type != "bg" ) && this.getBottomBar() }
                    </div>)}
                    onClose={() => setVisible(false)}
                />
            )
        );
    }
}