//主要框架 大背景标题 全屏
import React from 'react';
import styles from './index.css';
import FullScreen from '../../components/FullScreen/index.jsx';
export const MainFrame = props => {
    let {
        children,
        className,
        title = '',
        ...othProps
    } = props,
    SubCenter = '',Footer = '',SubRight = "",SubLeft = "";
    children = React.Children.map(children, child=>{
        if(!child)return child;
        const {slot = '',className,...oth} = child.props;
        switch(slot){
            case "SubCenter":
                SubCenter = React.cloneElement(child,{
                    ...oth,
                    className:`${styles.subCenter} ${className}`
                });
                return '';
            case "Foot":
                Footer = child;
                return '';
            case "SubRight":
                SubRight = child;
                return;
            case "SubLeft":
                SubLeft = child;
                return;
            default:
                return child
        }
    })
    return (
        <div {...othProps} className={`${styles.MainBg} ${className}`}>
            <FullScreen className={styles.FullScreen}/>
            <div className={styles.Title}>{title}</div>
            <div className={styles.subTitle}>
                <div className={styles.subLeft}>
                    {SubLeft}
                </div>
                    {SubCenter}
                <div className={styles.subRight}>
                    {SubRight}
                </div>
            </div>
            <div className={styles.content}>
                {children}
            </div>
            <div className={styles.foot}>
                {Footer}
            </div>
        </div>
    );
}
export default MainFrame;