import React from 'react';
import VmSubTitle from '../../../vm-sub-title';
import { overViewService } from '../../api';
interface OverViewManageProps {
    classPrefix?: string;
    id: string;
}

interface SummaryItemProps {
    icon: string;
    name: string;
    unit: string;
    num: number;
}

interface TopItemProps {
    name: string;
    icon: string;
    content: Array<{ text: string; value: string }>;
    textStyleType: 1 | 2;
}

export const SummaryItem = ({ icon, name, unit, num }: SummaryItemProps) => {
    return (
        <div className="summary-item">
            <img src={icon} />
            <div className="summary-item-text">
                <p>{name}</p>
                <p>
                    <span>{num}</span>
                    {unit}
                </p>
            </div>
        </div>
    );
};

const TopItem = ({ name, content, icon, textStyleType }: TopItemProps) => {
    return (
        <div className="top-item">
            <div className="img">
                <p className={`name--${textStyleType}`}>{name}</p>
                <img src={icon} />
            </div>
            <div className="statistic">
                {content.map(item => {
                    return (
                        <div key={item.text}>
                            <span>{item.text}</span>
                            <span className={`statistic-value--${textStyleType}`}>
                                {item.value}
                            </span>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};
const Manage: React.FC<OverViewManageProps> = ({ classPrefix, id }) => {
    const data = overViewService.managementData({
        housingEstateId: id,
    });
    const cleanGroundDuration = data?.dirtyGroundDuration
        ? (12 - (data?.dirtyGroundDuration / 60)).toFixed(1)
        : 0;
    const noOverflowDuration = data?.overflowDuration
        ? (12 - (data?.overflowDuration / 60)).toFixed(1)
        : 0;

    return (
        <div className={`${classPrefix}-manage`}>
            <VmSubTitle title="运营管理" />
            <div className={`${classPrefix}-manage-top`}>
                <TopItem
                    name="环境管理成效"
                    icon={require('../../imgs/manage-hjgl.png')}
                    textStyleType={1}
                    content={[
                        {
                            text: '今日地面干净时长占比',
                            value: `${cleanGroundDuration}h/12h`,
                        },
                        {
                            text: '今日无爆桶状态时长占比',
                            value: `${noOverflowDuration}h/12h`,
                        },
                    ]}
                />
                <TopItem
                    name="公众宣教成效"
                    icon={require('../../imgs/manage-gzcx.png')}
                    textStyleType={2}
                    content={[
                        { text: '厨余准确率', value: `${data?.chuyuAccuracy || 0}%` },
                        { text: '居民参与率', value: `${data?.personParticipationRate || 0}%` },
                    ]}
                />
            </div>
            <div className={`${classPrefix}-manage-bottom`}>
                <SummaryItem
                    icon={require('../../imgs/manage-yyxj.png')}
                    name="语音宣教"
                    unit="次"
                    num={data?.voiceEducateTimes || 0}
                />
                <SummaryItem
                    icon={require('../../imgs/manage-wgmsr.png')}
                    name="违规陌生人"
                    unit="人"
                    num={data?.strangerNum || 0}
                />
                <SummaryItem
                    icon={require('../../imgs/manage-hmd.png')}
                    name="灰名单"
                    unit="人"
                    num={data?.badLabelPersonNum || 0}
                />
            </div>
        </div>
    );
};

export default Manage;
