import React from 'react'
import { Box, NoData } from '$components';
import { useMockRequest, ApiTable } from '$utils';

function Infrastructure(props) {
    const { data: devices = [] } = useMockRequest({
        url: 'https://superchangnan.anxinyun.cn/api/xiaofang/devices',
        method: 'mockGet',
    });
    const datas = devices?.map(s => {
        if (typeof (s.data) == 'string') s.data = JSON.parse(s.data)
        return s;
    })

    const data = [
        { name: '烟感设备', number: datas?.find(s => s.type == 3)?.data?.length || 0 },
        { name: '消火栓', number: datas?.find(s => s.type == 1)?.data?.length || 0 },
        { name: '配电箱', number: datas?.find(s => s.type == 4)?.data?.length || 0 },
        { name: '水箱', number: datas?.find(s => s.type == 2)?.data?.length || 0 },
    ]
    return <Box title={"基础设施"} >
        {/* <NoData /> */}
        <div className='_basic_device'>
            {
                data.map((s, index) => {
                    return <div className='_device_item'>
                        <div className={'_device_img' + (index + 1)} />
                        <div className='_device_text'>
                            <div>{s.name}</div>
                            <div><span className='_device_number'>{s.number}</span> 个</div>
                        </div>
                    </div>
                })
            }
        </div>
    </Box>
}

export default Infrastructure;