import { useState, useEffect } from 'react'
import LeftPanel from '../../../../common/LeftPanel';
import HomeApi from '../../../../../utils/apis/HomeApi';
import LittleTitle from '../../../../common/LittleTitle';
import { toPng } from '../../../../../utils/helper/helper';
import './index.less';
export default function Left(props) {
    const [datas, setDatas] = useState();
    useEffect(() => {
        HomeApi.item('index').then(resp => {
            setDatas(resp.data);
        })
    }, [])

    return <LeftPanel style={{

    }}>
        <LittleTitle>核心指标</LittleTitle>
        {datas?.map((data, i) => {
            return <div className='layout-h center relative home-core-item' key={i} style={{
                marginBottom: 21,
                width: 368
            }}>
                <div className='relative' style={{
                    marginLeft: 48
                }}>
                    <img alt='' src={toPng(data.name)} />
                    <img alt='' src={toPng('底座')} style={{
                        position: 'absolute',
                        bottom: 4,
                        left: -9
                    }} />
                </div>
                <div className='layout-v center fill'>
                    <div className='value'>{data.value}</div>
                    <div className='unit'>{data.name} ({data.unit})</div>
                </div>
                <img alt='' src={toPng('底')} style={{
                    position: 'absolute',
                    bottom: -15
                }} />
            </div>
        })}
    </LeftPanel>;
}