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 WorkStar from './WorkStar';
import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
import HighFrequencyPeriod from './HighFrequencyPeriod';
import AreaPatrol from './AreaPatrol';
import HighFrequencyType from './HighFrequencyType';
import SquadPatrol from './SquadPatrol';
import IssueTrend from './IssueTrend';

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

export default function RightContent({
    dataTypeKey = '日常巡查',
    title = '日常巡查',
    pageId = INDUSTRY_PAGE_IDS.LAW_ENFORCEMENT_PATROL,
}: 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="yesterday"
                    panelType="right"
                    pageId={pageId}
                    timeOptions={['yesterday', 'month', 'year', 'range']}
                    useDefaultTypeFirst={false}
                />
            </div>
            <div className={`${styles.topSection} `}>
                <HighFrequencyPeriod />
                <WorkStar />
            </div>
            <div className={`${styles.middleContent}`}>
                <HighFrequencyType />
                <IssueTrend />
            </div>

            <div className={`${styles.bottomContent} `}>
                <SquadPatrol />
                <AreaPatrol />
            </div>
        </div>
    )
}