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

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

    return <LeftPanel className="stxfgc-left layout-v" style={{
        flex: 1
    }}>
        <LittleTitle>指标数据</LittleTitle>
        <div className='layout-h center fill h0' style={{
            marginBottom: 24,
            marginTop: 16
        }}>
            <div className='layout-v center'>
                {datas?.map((data, i) => {
                    return <div className='layout-h' key={i} style={{
                        // marginRight: 16
                        alignItems: "flex-end",
                        marginBottom: 16
                    }}>
                        <img alt='' src={toPng('生态修复工程图标')} style={{
                            width: 72,
                            height: 72,
                            paddingBottom: 3
                        }} />
                        <div className='layout-h' style={{
                            background: `url(${toPng('生态修复工程背景')})`,
                            width: 387,
                            height: 70,
                            marginLeft: -45
                        }}>
                            <Space className='layout-h' style={{
                                paddingBottom: 10,
                                paddingLeft: 60
                            }}>
                                <div className='name'>{data.name}</div>
                                <div className='value'>{data.value}</div>
                                <div className='unit'>({data.unit})</div>
                            </Space>
                        </div>
                    </div>
                })}
            </div>
        </div>
        <Mjtj />
        <Tzjetj />
    </LeftPanel>;
}