import React from 'react';
import groupBy from 'lodash/groupBy';
import VmSubTitle from '../../../vm-sub-title';
import { Line1 } from '../../../vm-charts';
import type { Line1Props } from '../../../vm-charts'
import { overViewService } from '../../api';
import { ThrowSumByDayAndPointResp } from '../../types';
interface OverViewTrendProps {
    classPrefix?: string;
    id: string;
}

export function transferLineData(data: ThrowSumByDayAndPointResp[] = []): Line1Props {
    const groupByThrowPoint = groupBy(data || [], 'throwPointId');
    const groupByDay = groupBy(data || [], 'day');
    const lineData = [];
    for (const key in groupByThrowPoint) {
        const item = (groupByThrowPoint[key] as ThrowSumByDayAndPointResp[]);
        lineData.push({
            name: item[0].throwPointName || '',
            data: item.map(item => item.throwCount || 0),
        });
    }
    // 去除日期中的年
    const xAxis = Object.keys(groupByDay).map(item => item.substring(5))
    return { xAxis, data: lineData };
}

const Trend: React.FC<OverViewTrendProps> = ({ classPrefix, id }) => {
    const sumByPoint = overViewService.throwSumByDayAndPoint({
        housingEstateId: id,
    });
    return (
        <div className={`${classPrefix}-trend`}>
            <VmSubTitle title="近一周趋势" />
            <div className={`${classPrefix}-trend-chart`}>
                <Line1 {...transferLineData(sumByPoint)} />
            </div>
        </div>
    );
};

export default Trend;
