import React from 'react';
import SubTitle from '../../../vm-sub-title';

import PersonNum from '../../imgs/traffic.png';
import OdorValue from '../../imgs/stench.png';
import temperature from '../../imgs/temperature.png';
import humidity from '../../imgs/humidity.png';
import WaterUse from '../../imgs/water.png';
import ElecUse from '../../imgs/electric.png';

interface Props {
    situationRes: Array<any>;
}

function Situation(props: Props) {
    const { situationRes } = props;

    const data = [
        {
            monitorType: 'PersonNum',
            name: '人流量',
            unit: '人次',
            imgSrc: PersonNum,
            value: 0,
        },
        {
            monitorType: 'OdorValue',
            name: '臭气值',
            unit: 'PPm',
            imgSrc: OdorValue,
            value: 0,
        },
        {
            monitorType: 'temperature',
            name: '温度',
            unit: '℃',
            imgSrc: temperature,
            value: 0,
        },
        {
            monitorType: 'humidity',
            name: '湿度',
            unit: '%',
            imgSrc: humidity,
            value: 0,
        },
        {
            monitorType: 'WaterUse',
            name: '用水量',
            unit: '吨',
            imgSrc: WaterUse,
            value: 0,
        },
        {
            monitorType: 'ElecUse',
            name: '用电量',
            unit: '度',
            imgSrc: ElecUse,
            value: 0,
        },
    ];

    return (
        <div className="base-bottom-left">
            <SubTitle title="实时运行情况" />

            <div className="base-bottom-situation">
                {data.map((item: any) => {
                    const { name, unit, imgSrc } = item;
                    return (
                        <div
                            className="base-bottom-situation--item"
                            key={item.monitorType}
                        >
                            <img src={imgSrc} />
                            <div>
                                <div className="base-bottom-situation--item-name">
                                    {name}
                                </div>
                                <div className="base-bottom-situation--item-value">
                                    <span>
                                        {situationRes.find(
                                            (ele: any) =>
                                                ele.monitorType ===
                                                item.monitorType,
                                        )?.value || 0}
                                    </span>
                                    {unit}
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}

export default Situation;
