import React, { useCallback } from 'react'
import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';

import DateSelector from '@/components/V2504/DateSelector';

import styles from './index.less'
import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
import StatisticsCards from './StatisticsCards';
import CaseTrend from './CaseTrend';
import HighFrequencyType from './HighFrequencyType';
import CaseHandlingQuantity from './CaseHandlingQuantity';

interface Props {
    // 数据类型键名，用于获取正确的dataType
    dataTypeKey?: string;
    // 标题
    title?: string;
    // 页面ID，用于区分不同页面的时间设置
    pageId?: string;
}

export default function RightContent({
    dataTypeKey = '市区协同',
    title = '市区协同',
    pageId = INDUSTRY_PAGE_IDS.LAW_ENFORCEMENT_COORDINATION,
}: Props) {

 
    // 处理日期变化
    const handleDateChange = useCallback((params: { type: string; startTime: string; endTime: string }) => {
    console.log('Date changed: RightContent!!', params);        

    }, []);

    return (
        <div className={styles.container}>
            {/* 标题 */}
            <div className={styles.header}>
                <PanelTitle title={title} />
                <DateSelector
                    onChange={handleDateChange}
                    defaultType="lastMonth"
                    panelType="right"
                    pageId={pageId}
                    timeOptions={['lastMonth', 'year', 'range']}
                    // useDefaultTypeFirst={true}
                />
            </div>
            <div className={`${styles.topSection} `}>
                <StatisticsCards 
                dataTypeKey={dataTypeKey}
                pageId={pageId}
                />

            </div>
            <div className={`${styles.middleContent} `}>
                <CaseTrend />
            </div>

            <div className={`${styles.bottomContent} `}>
                <HighFrequencyType />
                <CaseHandlingQuantity />                
            </div>
        </div>
    )
}