import { useRef, useEffect, useState, useMemo } from 'react';
import { history } from 'umi';
import * as echarts from 'echarts';
import { Card, Space, Tag, Image, Flex } from 'antd';
import onlineSrc from '@/assets/image/statistics-online.png';
import growSrc from '@/assets/image/statistics-grow.png';
import performanceSrc from '@/assets/image/statistics-performance.png';
import subjectSrc from '@/assets/image/statistics-subject.png';
import examSrc from '@/assets/image/statistics-exam.png';
import messageSrc from '@/assets/image/statistics-message.png'
import styles from './index.less';

const StatisticsPage = () => {

    const tags = ['前200名', '前400名', '前1000名', '前2300名', '前7000名'];
    const chartRef = useRef(null);
    const [selectedTags, setSelectedTags] = useState(['前200名']);
    const mockChartData = [
        {
            name: "前200名",
            data: [70, 30, 20, 10, 5, 15, 30, 20]
        },
        {
            name: "前400名",
            data: [140, 60, 30, 20, 30, 20, 60, 40]
        },
        {
            name: "前1000名",
            data: [400, 100, 120, 180, 40, 60, 60, 40]
        },
        {
            name: "前2300名",
            data: [1200, 260, 240, 70, 130, 120, 150, 130]
        },
        {
            name: "前7000名",
            data: [600, 200, 800, 1200, 1000, 1200, 1000, 1000]
        },
    ];

    const intersectionData = useMemo(() => {
        return mockChartData?.filter((item) =>
            selectedTags.includes(item.name),
        );
    }, [selectedTags])

    let chartInstance = null;

    const labelOption = {
        show: true,
        position: 'top',
        distance: 24,
        align: 'center',
        verticalAlign: 'middle',
        // formatter: '{c}  {name|{a}}',
        fontSize: 12,
        rich: {
            name: {}
        }
    };


    const commonSeries = {
        type: 'bar',
        barGap: 0,
        label: labelOption,
        emphasis: {
            focus: 'series'
        },
    };



    const handleTagClick = (tag) => {

        if (selectedTags.includes(tag)) {
            // 如果 Tag 已经选中，则移除
            setSelectedTags((prev)=>{
                if(prev.length === 1){
                    return prev;
                }
                return selectedTags.filter((item) => item !== tag)
            });

        } else {
            // 如果 Tag 未选中，则添加
            setSelectedTags([...selectedTags, tag]);
        }

    }
    useEffect(() => {
        if (chartRef.current) {
            // 初始化图表
            chartInstance = echarts.init(chartRef.current);

            // 设置配置项
            const option = {
                xAxis: {
                    name: '地区',
                    type: 'category',
                    axisTick: { show: false },
                    data: ['市直属', '青田县', '龙泉市', '缙云县', '松阳县', '青云县', '遂昌县', '云和县']
                },
                yAxis: {
                    name: "名"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: tags,
                    selectedMode: false
                },
                series: intersectionData.map((item) => ({
                    ...commonSeries,
                    name: item.name,
                    data: item.data,
                }))
            };

            chartInstance.setOption(option);

            // 响应式调整
            const resizeHandler = () => chartInstance?.resize();
            window.addEventListener('resize', resizeHandler);

            // 清理函数
            return () => {
                window.removeEventListener('resize', resizeHandler);
                chartInstance?.dispose();
            };
        }
    }, [selectedTags]);
    const mockNoticeData = [
        {
            id: 1,
            text: "高一入学考试成绩已导入",
            date: '2025-02-13'
        },
        {
            id: 2,
            text: "高三入学第一次模拟考试成绩已导入",
            date: '2025-02-13'
        },
        {
            id: 3,
            text: "高一入学考试成绩已导入",
            date: '2025-02-13'
        },
        {
            id: 4,
            text: "高三入学第一次模拟考试成绩已导入",
            date: '2025-02-13'
        },
        {
            id: 5,
            text: "高一入学考试成绩已导入",
            date: '2025-02-13'
        },

    ];


    const handleNavigate = (path) => {
        history.push(path);
    };

    return (
        <div className={styles.statistics}>
                    <section className={styles.statistics_container}>
                        <header className={styles.statistics_header}>

                            <Card hoverable className={styles.statistics_header_card} onClick={()=>handleNavigate('/home/report/online')}>
                                <Flex vertical justify='center' align='center' >
                                    <Image src={onlineSrc} preview={false} width={60} height={60} />
                                    <span className={styles.statistics_header_card_text} >上线情况分析</span>
                                </Flex>
                            </Card>
                            <Card hoverable className={styles.statistics_header_card} onClick={()=>handleNavigate('/home/report/school')}>
                                <Flex vertical justify='center' align='center' >
                                    <Image src={growSrc} preview={false} width={60} height={60} />
                                    <span className={styles.statistics_header_card_text} >学校对比分析</span>
                                </Flex>
                            </Card>
                            <Card hoverable className={styles.statistics_header_card} onClick={()=>handleNavigate('/home/report/teacher')}>
                                <Flex vertical justify='center' align='center' >
                                    <Image src={performanceSrc} preview={false} width={60} height={60} />
                                    <span className={styles.statistics_header_card_text} >教师群体分析</span>
                                </Flex>
                            </Card>
                            <Card hoverable className={styles.statistics_header_card} onClick={()=>handleNavigate('/home/report/student')}>
                                <Flex vertical justify='center' align='center' >
                                    <Image src={subjectSrc} preview={false} width={60} height={60} />
                                    <span className={styles.statistics_header_card_text} >学生群体分析</span>
                                </Flex>
                            </Card>
                            {/* <Card hoverable className={styles.statistics_header_card}>
                                <Flex vertical justify='center' align='center' >
                                    <Image src={examSrc} preview={false} width={60} height={60} />
                                    <span className={styles.statistics_header_card_text} >考试知识点</span>
                                </Flex>
                            </Card > */}
                        </header>
                        <section className={styles.statistics_charts}>
                            <Card hoverable style={{ height: "100%", borderRadius: 8 }} title='2025年高三第一次模拟考'>
                                <section className={styles.statistics_charts_nav}>
                                    <span className={styles.statistics_charts_nav_title}>
                                        各区县排名分析
                                    </span>
                                    <Space>
                                        {tags.length > 0 ? (
                                            tags.map((item, index) => {
                                                const isSelected = selectedTags.includes(item);
                                                return (
                                                    <Tag
                                                        onClick={() => handleTagClick(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                </section>
                                <div className={styles.statistics_charts_container}>
                                    <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
                                </div>
                            </Card>
                        </section>
                    </section>
                    <Card className={styles.statistics_card}>
                        <header className={styles.statistics_notice}>
                            <section className={styles.statistics_notice_title}>平台公告</section>
                            <section className={styles.statistics_notice_content}>
                                {mockNoticeData.length ? (
                                    mockNoticeData.map(item => {
                                        return (
                                            <section className={styles.statistics_notice_content_item} key={item.id}>
                                                <section className={styles.statistics_notice_content_item_text}><Image src={messageSrc} width={14} height={12} />&nbsp;&nbsp;{item.text}</section>
                                                <span className={styles.statistics_notice_content_item_date}>{item.date}</span>
                                            </section>
                                        )
                                    })
                                ) : null}
                            </section>
                        </header>
                    </Card>
        </div>
    )
};

export default StatisticsPage;