'use strict'

import React from 'react'
import './index.less'
class Box extends React.Component {
    render() {
        const { title, height = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow, subtitle } = this.props

        const headerbg = {
            background: 'url(/assets/images/homePage/bigscreen/headertitlebg.png) no-repeat',
            backgroundSize: '100% 100%',
        }
        return (
            <div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}>
                <div style={{
                    height: height, listStyle: 'none', overflow: overflow || 'hidden',

                }}>
                    <div style={{ height: 42, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg, }}>
                        <span className='card-title'>{title}</span>

                        {subtitle && <div className='subtitle_'>
                            <div className='_item_select'>本周</div>
                            <div className='_item'>本月</div>
                            <div className='_item'>本年</div>
                        </div>}
                    </div>
                    <div style={{
                        height: 'calc(100% - 42px)',
                        backgroundImage: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)',
                    }}>
                        {children}
                    </div>

                </div>
            </div>
        )
    }
}
export default Box