import { useState, useEffect } from 'react'
import LeftPanel from '../../../../common/LeftPanel';
import LittleTitle from '../../../../common/LittleTitle';
import HomeApi from '../../../../../utils/apis/HomeApi';
import { toPng } from '../../../../../utils/helper/helper';
import './index.less';
export default function WlwsbLeft(props) {

    const [datas, setDatas] = useState();
    useEffect(() => {
        HomeApi.item('wlw').then(resp => {
            setDatas(resp.data);
        })
    }, [])

    return <LeftPanel className="wlwsb-left layout-v" style={{
        flex: 1
    }}>
        <LittleTitle>指标数据</LittleTitle>
        <div className='layout-h center' style={{
            marginBottom: 36
        }}>
            {datas?.map((data, i) => {
                return <div className='layout-v center' key={i} style={{
                    marginRight: 16
                }}>
                    <div className='layout-h center j-center' style={{
                        background: `url(${toPng('物联网底座')})`,
                        width: 100,
                        height: 100
                    }}>
                        <div className='layout-h center j-center' style={{
                            background: `url(${toPng(data.name)})`,
                            width: 58,
                            height: 58,
                            paddingBottom: 10
                        }}>
                        </div>
                    </div>
                    <div className='name'>{data.name}</div>
                    <div className='layout-h center'>
                        <div className='value'>{data.value}</div>
                        <div className='unit'>&nbsp;&nbsp;({data.unit})</div>
                    </div>
                </div>
            })}
        </div>
    </LeftPanel>;
}