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

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

    return <LeftPanel className="yhsw-left layout-v" style={{
        flex: 1
    }}>
        <LittleTitle>指标数据</LittleTitle>
        <div className='layout-h center fill h0' style={{
            marginBottom: 36
        }}>
            <div className='layout-v center'>
                {datas?.map((data, i) => {
                    return <div className='layout-h' key={i} style={{
                        // marginRight: 16
                        alignItems: "flex-end"
                    }}>
                        <div className='layout-v center' style={{
                            background: `url(${toPng('有害生物底座')})`,
                            width: 120,
                            height: 120,
                        }}>
                            <img alt='' src={toPng(data.name)} style={{
                                marginTop: 12
                            }} />
                        </div>
                        <div className='layout-h center j-center' style={{
                            background: `url(${toPng('有害生物背景')})`,
                            width: 307,
                            height: 60,
                            marginLeft: -45
                        }}>
                            <Space size={24} className='layout-h' style={{
                                paddingBottom: 10
                            }}>
                                <div className='name'>{data.name}</div>
                                <div className='value'>{data.value}</div>
                                <div className='unit'>({data.unit})</div>
                            </Space>
                        </div>
                    </div>
                })}
            </div>
        </div>
        <Fsqmjtj />
    </LeftPanel>;
}