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 { Space } from 'antd';
import CdthApi from '../../../../../utils/apis/CdthApi';
export default function CdthLeft(props) {

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

    return <LeftPanel className="cdth-left layout-v" style={{
        flex: 1
    }}>
        <LittleTitle>指标数据</LittleTitle>
        <div className='layout-h center'>
            <Space size={[48, 16]} wrap style={{
                // marginBottom: 36
            }}>
                {datas?.map((data, i) => {
                    return <div className='layout-v center' key={i} style={{
                        // marginRight: 16
                    }}>
                        <div className='layout-v center' style={{
                            background: `url(${toPng('草地退化底座')})`,
                            width: 148,
                            height: 148
                        }}>
                            <div className='value'>{data.value}</div>
                            <div className='unit'>({data.unit})</div>
                        </div>
                        <div className='name layout-h center j-center' style={{
                            background: `url(${toPng('文字背景')})`,
                            width: 109,
                            height: 34
                        }}>{data.name}</div>
                    </div>
                })}
            </Space>
        </div>
    </LeftPanel>;
}