/**
 * 公厕-监测信息-实时信息
 */
import React from 'react';
import moment from 'moment';
import SubTitle from '../../../vm-sub-title';

import { MoniotrService } from '../../api';

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';
import male from '../../imgs/male.png';
import female from '../../imgs/female.png';

interface MonitorTypeProps {
    id: string;
}

const RealtimeInfo: React.FC<MonitorTypeProps> = props => {
    const { id } = props;

    const { realtimeList } = MoniotrService.useRealtime(id, moment().format('YYYY-MM-DD'));
    window.console.log(realtimeList);

    const getRealtimeItem = (code: string) => {
        let src = '';
        if (code.indexOf('_') < 0) {
            return PersonNum;
        }
        const str = code.split('_')[0];
        switch (str) {
            case 'PersonNum':
                src = PersonNum;
                break;
            case 'OdorValue':
                src = OdorValue;
                break;
            case 'temperature':
                src = temperature;
                break;
            case 'humidity':
                src = humidity;
                break;
            case 'WaterUse':
                src = WaterUse;
                break;
            case 'ElecUse':
                src = ElecUse;
                break;
            case 'SeatNum':
                if (code.indexOf('female') > -1) {
                    src = female;
                } else {
                    src = male;
                }
                break;
            default:
                break;
        }
        return src;
    };

    return (
        <div className="wr-monitor-realtime">
            <div className="realtime-head">
                <div className="realtime-head-title">
                    <SubTitle title="实时信息" />
                    <div className="realtime-head-time">
                        更新时间：{moment().format('YYYY-MM-DD HH:mm:ss')}
                    </div>
                </div>
            </div>

            <div className="realtime-content">
                {realtimeList?.length > 0 ? (
                    realtimeList.map((item: any) => (
                        <div className="realtime-content-item" key={item.code}>
                            <div className="realtime-content-item-icon">
                                <img src={getRealtimeItem(item.code)} />
                                <div className="realtime-content-item-icon-name">{item.title}</div>
                            </div>
                            <div className="realtime-content-item-main">
                                {item.dataList.map(
                                    (subItem: { name: string; value: string }, idx: number) => (
                                        <>
                                            <div
                                                className="realtime-content-item-main-item"
                                                key={idx}
                                            >
                                                <div>{subItem.name}</div>
                                                <div>{subItem.value}</div>
                                            </div>
                                            {idx < item.dataList.length - 1 && (
                                                <div className="realtime-content-item-main-line" />
                                            )}
                                        </>
                                    ),
                                )}
                            </div>
                        </div>
                    ))
                ) : (
                    <div className="realtime-content-item">
                        <div className="realtime-content-item-icon">
                            <img src={PersonNum} />
                            <div className="realtime-content-item-icon-name">
                                今日人流量（人次）
                            </div>
                        </div>
                        <div className="realtime-content-item-main">
                            <div className="realtime-content-item-main-item">
                                <div>全部</div>
                                <div>0</div>
                            </div>
                            <div className="realtime-content-item-main-line" />
                            <div className="realtime-content-item-main-item">
                                <div>男</div>
                                <div>0</div>
                            </div>
                            <div className="realtime-content-item-main-line" />
                            <div className="realtime-content-item-main-item">
                                <div>女</div>
                                <div>0</div>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
};

export default RealtimeInfo;
