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';
import Cdmjfb from './Cdmjfb';
export default function CdzyLeft(props) {

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

    return <LeftPanel className="cdzy-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: 122,
                        height: 94
                    }}>
                        <div className='value'>{data.value}</div>
                    </div>
                    <div className='name'>{data.name}</div>
                    <div className='unit'>({data.unit})</div>
                </div>
            })}
        </div>
        <Cdmjfb />
    </LeftPanel>;
}