/**
 * @format
 * 服务概况  时间切换的包裹器
 *  */

import * as React from 'react';
import {Divider, Row, Col} from 'antd';
import {TymeType, TimeTypeMap} from '../../../const/status';
import styles from './styles/overviewItem.module.scss';
interface onChange {
    (timeType: number): void;
}
export interface OverviewItemProps {
    name: string;
    renderRight?: React.ReactNode;
    onChange?: onChange;
    select?: number;
}

const overviewItem: React.FC<OverviewItemProps> = props => {
    const {name, renderRight, children, onChange} = props;
    const handleCLick = (value: number) => {
        setState(preState => ({...preState, select: value}));
        return onChange && onChange(value);
    };
    const [state, setState] = React.useState({
        select: 0,
    });

    const {select} = state;

    return (
        <div className={styles.overviewItem}>
            <Row gutter={24} type='flex' justify='space-between' align='middle'>
                <Col span={4}>
                    <h3 style={{fontWeight: 'bold'}}>{name}</h3>
                </Col>
                <Col span={16} style={{textAlign: 'right'}}>
                    {renderRight !== undefined ? (
                        renderRight
                    ) : (
                        <>
                            {TimeTypeMap.map((element, index) => {
                                return (
                                    <React.Fragment key={element}>
                                        <span
                                            onClick={() => handleCLick(element)}
                                            style={{color: select === element ? 'red' : 'black', cursor: 'pointer'}}
                                        >
                                            {TymeType[element]}
                                        </span>
                                        {index + 1 !== TimeTypeMap.length && <Divider type='vertical' />}
                                    </React.Fragment>
                                );
                            })}
                        </>
                    )}
                </Col>
            </Row>

            <div className={styles.itemContnt}>{children}</div>
        </div>
    );
};
export default overviewItem;
