import React from 'react'
import { Box } from '$components';
import { useFsRequest } from '$utils';
import { mathRound } from './util';
function DataShare(props) {

    const { data: dataTotal = {} } = useFsRequest({
        url: 'homepage/datatotal/top5',
        pollingInterval: 1000 * 60,
        cacheKey: 'datatotal',
    });

    const { data: restfulInfo = {} } = useFsRequest({
        url: 'homepage/restful/info',
        pollingInterval: 1000 * 60,
        cacheKey: 'restfulInfo',
    });

    const renderItem = (s) => {
        return <div className='_item_content'>
            <div className={'_item_icon' + s.key} />
            <div className='_item_text'>
                {s.title}
                <div className='number_container'>
                    <span className='_number'>{s.data}</span>{s.unit}
                </div>
            </div>
        </div>
    }

    const leftData = [
        { key: '1', data: mathRound(dataTotal?.total), unit: '万条', title: '共享库数据总量' },
        { key: '2', data: restfulInfo?.total, unit: '次', title: '访问接口总次数' },
        { key: '3', data: restfulInfo?.totalUser, unit: '个', title: '访问接口用户总数' }]
    const rightData = [
        { key: '2', data: restfulInfo?.todayTotal, unit: '次', title: '接口访问次数' },
        { key: '3', data: restfulInfo?.todayUser, unit: '个', title: '访问接口用户总数' }]

    return <Box title={"数据共享"} >
        <div className='data_share'>
            <div className='_left_content'>
                {leftData.map(s => renderItem(s))}
            </div>
            <div className='_right_content'>
                <div className='_today_text'>今日</div>
                {rightData.map(s => renderItem(s))}
            </div>
        </div>
    </Box>
}

export default DataShare;