import React from 'react';
import VmMap from '../../../vm-map';
import VmInfoCollection from '../../../vm-info-collection';
import { OverViewLeftFields } from '../../config';
import { overViewService } from '../../api';

interface OverViewLeftProps {
    classPrefix?: string;
    id: string;
    throwPoints?: any[]
}

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

// 统计
const SummaryItem = ({ name, icon, unit, num, top = 0, color }: SummaryItemProps) => {
    return (
        <div className="vm-estate-summary" style={{ top, color }}>
            <div className="vm-estate-summary-img">
                <img src={icon} />
                <span>{name}</span>
            </div>
            <div className="vm-estate-summary-text">
                <span>{num}</span>
                <span>{unit}</span>
            </div>
        </div>
    );
};

const Left: React.FC<OverViewLeftProps> = ({ classPrefix, id,throwPoints = [] }) => {
    const data = overViewService.estateStatistics({
        housingEstateId: id,
    });

    const fieldsData = OverViewLeftFields.map(item => ({
        ...item,
        value: data?.[item.key],
    }));

    // 户/点
    const num1 =
        data?.householdNum && data?.throwPointNum
            ? Math.ceil(data?.householdNum / data?.throwPointNum)
            : 0;
    // 点/人
    const num2 =
        data?.throwPointNum && data?.supervisorNum
            ? Math.ceil(data?.throwPointNum / data?.supervisorNum)
            : 0;

    const points = throwPoints
        ?.filter((item: any) => item.longitude && item.latitude)
        .map((item: any) => ({
            id: item.id,
            name: item.pointName,
            lng: item.longitude,
            lat: item.lattitude,
            url: require('../../imgs/tfd.png'),
        }));

    return (
        <div className={`${classPrefix}-left`}>
            <div className={`${classPrefix}-left-map`}>
                <VmMap mapPoints={points} />
            </div>
            <div className={`${classPrefix}-left-info`}>
                <SummaryItem
                    top={16}
                    icon={require('../../imgs/left-tfdmd.png')}
                    unit="户/点"
                    num={num1}
                    name="投放点密度"
                    color="#88FFD4"
                />
                <SummaryItem
                    top={250}
                    icon={require('../../imgs/left-ddypz.png')}
                    unit="点/人"
                    num={num2}
                    name="督导员配置"
                    color="#29EFFF"
                />
                <VmInfoCollection data={fieldsData} gap={16} />
            </div>
        </div>
    );
};

export default Left;
