import React from 'react'
import { Row, Col } from 'antd'
import { FallOutlined, RiseOutlined } from '@ant-design/icons'
import style from './index.less'

interface Props {
    data: any,
    border?: boolean,
    bg?: boolean
}
/**
 * 块级数据展示模块
 * @param props 
 */
function Box(props: Props) {
    return <Row gutter={[16, 16]} className={style.box} >
        {
            props.data.map((item: any) => {
                return <Col key={item.name} className={props.bg ? `${style.box_col} ${style.bg}` : style.box_col} flex={1}>
                    <b>{item.name}</b>
                    <strong>{item.num}</strong>
                    {/* <p className={props.border ? style.border : ''}>比前日<span>{
                        item.num > 0 ? <RiseOutlined style={{color:'green'}}/> : <FallOutlined style={{color:'red'}}/>
                    }</span>{item.rate}</p> */}
                </Col>
            })
        }
    </Row>
}

export default React.memo(Box)