import { useRef, useEffect, useState, useMemo } from 'react';
import * as echarts from 'echarts';
import { Space, Tag, Button, Image, Modal, Table, Spin, Select, InputNumber, message } from 'antd';
import Flex from "@/components/Flex";
import StudentGroup from '@/components/StudentGroup';
import ScreenPage from "@/components/ScreenPage";
import SchoolChoice from '@/components/SchoolChoice';
import { getOnlineRankingAnalysis } from '@/apis/exam';
import { getSubjectList } from '@/apis/subject';
import { getExam } from '@/apis/common';
import { getScoreLineList } from '@/apis/data'
import upSrc from "@/assets/image/up.png";
import downSrc from "@/assets/image/down.png";
import styles from './index.less';
import { downloadTableData } from '@/apis/download';
import { downloadExcelFile } from '@/utils/file';


const RankingComparisonPage = () => {

    const [isShow1, setIsShow1] = useState(false);
    const [isShow2, setIsShow2] = useState(false);
    const [expandedRowKeys, setExpandedRowKeys] = useState([]);

    const handleExpand = (expanded, record) => {
        if (expanded) {
            setExpandedRowKeys([...expandedRowKeys, record.id]);
        } else {
            setExpandedRowKeys(expandedRowKeys.filter((k) => k !== record.id));
        }
    };

    let chartInstance = null;
    const [tags, setTags] = useState([]);
    const chartRef = useRef(null);
    const [echartImg, setEchartImg] = useState();
    const [selectedTags, setSelectedTags] = useState([]);


    const [echartXData, setEchartXData] = useState([]);
    const [mockChartData, setMockChartData] = useState([
        {
            name: "人数",
            data: [500]
        },
        {
            name: "增长人数",
            data: [30]
        },
        {
            name: "增幅",
            data: [6]
        },
    ]);

    const [typeList, setTypeList] = useState([]);
    const [selectType, setSelectType] = useState('');

    const [allEchartData, setAllEchartData] = useState({});

    const [subtitle, setSubtitle] = useState('');
    const [params, setParams] = useState({});
    const [dataSource, setDataSource] = useState([]);
    const [columns, setColumns] = useState([]);
    const [loading, setLoading] = useState(false);
    const [examList, setExamList] = useState([]);

    const [rankingList, setRankingList] = useState([]);
    const [selectRaking, setSelectRaking] = useState();


    const studentGroupRef = useRef();
    const [studentGroupParams, setStudentGroupParams] = useState({});
    const [title, setTitle] = useState('');

    const [responseData, setResponseData] = useState({})

    const [schoolIds, setSchoolIds] = useState([]);


    const [selectValues, setSelectValues] = useState([]);
    const [subjectIds, setSubjectIds] = useState([]);

    const [subjectOptions, setSubjectOptions] = useState([]);
    const [scoreLine, setScoreLine] = useState({});

    const [score, setScore] = useState(null);


    const [scoreLineList, setScoreLineList] = useState([]);

    useEffect(() => {
        getSubjectSelectOptions();
    }, []);

    useEffect(() => {
        if (params?.examId) {
            getSortInit();
        }
    }, [params?.examId]);


    useEffect(()=>{
        if(!scoreLineList?.length){
            setScoreLine({});
        }
        

    },[scoreLineList])


    useEffect(() => {
        if (selectType) {
            setSelectType(selectType);
            if (selectType === '上线人数') {
                setMockChartData(() => {
                    return allEchartData.num?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
            if (selectType === '上线人数增长') {
                setMockChartData(() => {
                    return allEchartData?.incr?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
            if (selectType === '上线率') {
                setMockChartData(() => {
                    return allEchartData?.rate?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
            if (selectType === '上线率增长') {
                setMockChartData(() => {
                    return allEchartData?.rateRatio?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
            if (selectType === '增幅') {
                setMockChartData(() => {
                    return allEchartData?.zf?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                return;
            }
        }

    }, [selectType]);


    useEffect(() => {
        if (!params?.examId) {
            return;
        }
        init();

    }, [params?.examId, schoolIds, examList, selectRaking, scoreLine]);


    const init = async () => {
        setLoading(true);
        try {
            const res = await getOnlineRankingAnalysis({
                ...params,
                examIds: examList.map(item => item.id),
                lineId: selectRaking,
                schools: schoolIds,
                // subjectId:subjectIds,
                scoreLine,
            });
            if (res.code === 200) {
                setLoading(false);
                setResponseData(res);
                setDataSource(res?.data || []);
                setExpandedRowKeys([res?.data?.[0]?.id, res?.data?.[0]?.children?.[0]?.id]);
                setTags(res?.columnDiagramResult?.num?.map(item => item?.lineName) || []);
                setSelectedTags([res?.columnDiagramResult?.num?.[0]?.lineName || '']);

                setTypeList(['上线人数', '上线人数增长', '上线率', '上线率增长', '增幅']);
                setSelectType('上线人数');
                setEchartXData(res?.columnDiagramResult?.num?.[0]?.xdata || []);
                setAllEchartData(res?.columnDiagramResult);


                setMockChartData(() => {
                    return res?.columnDiagramResult?.num?.map(item => {
                        return {
                            name: item?.lineName || '',
                            data: item?.data || [],
                        }
                    })
                });
                setColumns(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: ['区县', '考试人数']?.includes(item?.label) ? 200 : 480,
                            children: item?.children?.map(element => {
                                if (element?.label=== '上线人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        width: 120,
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                const examId = text?.examId;
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId,
                                                    students: text?.data
                                                });

                                            }}>{text?.value}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    width: 120,
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

                        }
                    })
                })
                return;
            }
            setLoading(false);

        } catch (error) {
            setLoading(false);
            console.log(error, 'exam-ranking-error');

        }
    };

    const getSortInit = async () => {
        try {
            const res = await getScoreLineList({ stage: 3, examId: params?.examId });
            if (res?.code === 200) {
                setSelectRaking(res?.data?.[0]?.id || '');
                setRankingList(() => {
                    return res?.data?.map(item => ({
                        value: item?.id,
                        label: item?.name
                    }))
                });
            }

        } catch (error) {
            console.log(error, 'get-sort-init-error');

        }
    };

    const getSubjectSelectOptions = async () => {
        try {
            const res = await getSubjectList({ stages: 3, contain256: false, level: 1, single: true, showFlag: true });
            if (res?.code === 200) {

                setSelectValues(() => {
                    return res?.data?.map(item => {
                        return {
                            label: item?.cname,
                            value: item?.id
                        }
                    })
                })
            }
        } catch (error) {
            console.log(error, 'getSubjectSelectOptions-error');

        }
    };


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

    const labelOption = {
        show: true,
        position: 'top',
        distance: 24,
        align: 'center',
        verticalAlign: 'middle',
        formatter: (params) => {
            if (['增幅','上线率','上线率增长'].includes(selectType)) {
                return `${params.value}%`;
            }
            return `${params.value}人`
        },
        fontSize: 12,
        rich: {
            name: {}
        }
    };


    const commonSeries = {
        type: 'line',
        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]);
        }

    };

    const handleRakingClick = (item) => {
        setSelectRaking(item?.value);

    };

    const handleDownload = async () => {
        try {
            const res = await downloadTableData(responseData);
            if (res?.status === 200) {
                downloadExcelFile(res, `${subtitle}*${scoreLineList?.length > 0 ? scoreLine?.name : rankingList?.find(item=>item?.value === selectRaking)?.label}*对比考试上线情况分析`);
            }

        } catch (error) {
            console.log(error, 'download-error');

        }
    };

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

            // 设置配置项
            const option = {
                // dataZoom: [
                //     {
                //         type: 'slider', // 滑动条型数据区域缩放组件
                //         show:true,
                //         start: 0, // 初始起点
                //         end: 30, // 初始终点
                //         handleSize: 8,
                //         xAxisIndex: [0]
                //     },
                // ],
                axisLabel: {
                    rotate: 35,
                    interval: 0,
                    fontSize: 9,
                    autoSkip: true,
                },
                title: {
                    // 添加标题配置
                    text: `${subtitle}*${scoreLineList?.length > 0 ? scoreLine?.name : rankingList?.find(item=>item?.value === selectRaking)?.label}*对比考试上线情况分析`,
                    left: 'center',
                    top: 0,
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold',
                    },
                },
                barGap: '10%',
                barWidth: "10%",
                xAxis: {
                    name: '考试',
                    type: 'category',
                    axisTick: { show: false },
                    data: echartXData,
                    axisLabel: {
                        rotate: echartXData.length > 6 ? 45 : 0,
                        interval: 0,
                        textStyle: {
                            fontSize: 10,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 16,
                    }

                },
                grid: {
                    containLabel: true,
                    top: '20%',
                },
                yAxis: {
                    name: "",
                    axisLabel: {
                        textStyle: {
                            fontSize: 10,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 16,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    type: "scroll",
                    data: tags,
                    selectedMode: false,
                    right: 10, // 设置右侧边距
                    top: 24, // 设置顶部边距
                    textStyle: {
                        fontSize: 12
                    }
                },
                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, echartXData, mockChartData]);


    // 导出图片
    const exportChart = () => {
        const chartInstance = echarts.getInstanceByDom(chartRef.current);
        if (chartInstance) {
            const base64 = chartInstance.getDataURL({
                type: "png",
                pixelRatio: 2, // 导出的图片分辨率比例
                backgroundColor: "#fff", // 导出图片的背景色
            });

            setEchartImg(base64);
        }
    };

    //下载图片
    const downloadImg = () => {
        const link = document.createElement("a");
        link.download = `图表_${new Date().getTime()}.png`;
        link.href = echartImg;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        setEchartImg("");
    };

    return (
        <div className={styles.ranking}>


            <div style={{ display: (isShow1 && !isShow2) ? 'block' : 'none' }}>
                <ScreenPage
                    isShow={isShow1}
                    isSingle={true}
                    isShowSubject={false}
                    isShowSchool={false}
                    // isShowSort={true}
                    // onSendSortList={(list = []) => {
                    //     setSelectRaking(list?.[0]?.value || 200);
                    //     setLimit(list?.[0]?.value || 200);
                    //     setRankingList(list || []);

                    // }}
                    onChange={(e) => {
                        setSubtitle([e?.currentSchool?.[0]?.districtName || e?.currentSchool?.[0]?.cname, e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name].filter(item => !!item).join("*"));
                        setParams({
                            examId: e?.examId,
                            schools: e?.currentSchool?.[0]?.schoolList?.map(item => item?.id) || e?.currentSchool?.map(item => item?.id),
                            subjectId: e?.currentDiscipline?.[0]?.id || '',
                        });
                    }}
                    saveshow={(e) => {
                        setIsShow1(e);
                    }}
                />
            </div>

            <div style={{ display: (isShow2 && !isShow1) ? 'block' : 'none' }}>
                <ScreenPage
                    isShow={isShow2}
                    isSingle={false}
                    isShowSubject={false}
                    isShowSchool={false}
                    // isShowSort={true}
                    // onSendSortList={(list = []) => {
                    //     setSelectRaking(list?.[0]?.value || 200);
                    //     setLimit(list?.[0]?.value || 200);
                    //     setRankingList(list || []);
                    // }}
                    onChange={(e) => {
                        const term = e?.currentGrade?.map(item => item?.name);
                        const semester = e?.currentSemester?.map(item => item?.name);
                        const examName = e?.currentExamination?.map(item => item?.name);
                        getExam({
                            term,
                            semester,
                            examName,
                        }).then(res => {
                            if (res.code === 200) {
                                setExamList(res.data || []);
                            }

                        }).catch(error => {
                            console.log(error, 'get-exam-error');

                        })
                    }}
                    saveshow={(e) => {
                        setIsShow2(e);
                    }}
                />
            </div>
            {/* <ScreenPage
                isShow={open == 2 ? isShow1 : isShow2}
                isSingle={isDx}
                isShowSubject={true}
                isShowSort={true}
                onSendSortList={(list = []) => {
                    setSelectRaking(list?.[0]?.value || 200);
                    setLimit(list?.[0]?.value || 200);
                    setRankingList(list || []);

                }}
                onChange={(e) => {
                    setParams({
                        examId: e?.examId,
                        schools: e?.currentSchool?.[0]?.schoolList?.map(item => item?.id) || e?.currentSchool?.map(item=>item?.id),
                        subjectId: e?.currentDiscipline?.[0]?.id || '',
                    });
                    // setLimit(e?.currentSort[0]?.value);

                    if (open === 1 || open === 2) {
                        setSubtitle([e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name].filter(item => !!item).join("*"));

                        return;
                    }

                    if (open === 3) {
                        const term = e?.currentGrade?.map(item => item?.name);
                        const semester = e?.currentSemester?.map(item => item?.name);
                        const examName = e?.currentExamination?.map(item => item?.name);
                        getExam({
                            term,
                            semester,
                            examName,
                        }).then(res => {
                            if (res.code === 200) {
                                setExamList(res.data || []);
                            }

                        }).catch(error => {
                            console.log(error, 'get-exam-error');

                        })
                    }
                }}
                saveshow={(e) => {
                    setisDx(true);
                    open == 2 ? setIsShow1(e) : setIsShow2(e);
                }}
            /> */}
            <section className={styles.ranking_table}>
                <span style={{ fontSize: 16, fontWeight: "bold" }}>对比考试上线情况分析</span>
                <Flex
                    style={{
                        display: "flex",
                        alignItems: "center",
                        margin: "5px 0",
                        gap: 12,
                    }}
                    // justify="space-betweens"
                    alignItems="center"
                >
                    <Flex alignItems="center">
                        <Flex
                            style={{
                                display: "flex",
                                alignItems: "center",
                                color: "#8a8a8a",
                            }}
                        >
                            {" "}
                            当前考试 : &nbsp;
                            <h3
                                style={{
                                    color: "black",
                                }}
                            >
                                {subtitle}
                            </h3>
                        </Flex>
                    </Flex>

                    <Flex
                        style={{
                            padding: "4px 8px",
                            border: "1px solid #666",
                            borderRadius: 5,
                            cursor: "pointer",
                            marginLeft: 10,
                        }}
                        alignItems="center"
                        onClick={() => {
                            setIsShow1(!isShow1);
                            setIsShow2(false);
                        }}
                    >
                        选择考试
                        <img
                            src={isShow1 ? upSrc : downSrc}
                            width={14}
                            height={12}
                            style={{ marginLeft: 5 }}
                        />
                    </Flex>
                </Flex>
                <section className={styles.select}>
                    <div className={styles.select_title}>对比考试: &nbsp;</div>
                    <section className={styles.select_content}>
                        {examList?.filter(item => item?.id !== params?.examId)?.map((item) => {
                            return (
                                <Tag
                                    key={item.id}
                                    // onClose={(e) => {
                                    //     e.preventDefault();
                                    //     setExamList((prev) => {
                                    //         return prev.filter((i) => i?.id !== item?.id)
                                    //     });
                                    // }}
                                    // closeIcon
                                    style={{
                                        color: "black",
                                        fontWeight: "bold",
                                        fontSize: 14,
                                        marginTop: 4,
                                        height: 24
                                    }}
                                >
                                    {`${item?.term}*${item?.semester}*${item?.examName}`}
                                </Tag>
                            );
                        })}
                        <div
                            className={styles.select_action}
                            style={{ width: 100 }}
                            onClick={() => {
                                setIsShow2(!isShow2);
                                setIsShow1(false);
                            }}
                        >
                            选择考试
                            <img
                                src={isShow2 ? upSrc : downSrc}
                                width={14}
                                height={12}
                                style={{ marginLeft: 5 }}
                            />

                        </div>
                    </section>
                </section>
                <section style={{ display: "flex", alignItems: "center" }}>
                    <span style={{ color: " #8a8a8a" }}>学校选择：</span>
                    <SchoolChoice onChange={(value) => {
                        setSchoolIds(value);
                    }} />
                </section>
                <section style={{ display: "flex", alignItems: "center" }}>
                    <span style={{ color: " #8a8a8a" }}>设置选科范围：</span>
                    <Select style={{ width: 260 }} maxTagCount={2} placeholder='请选择学科' value={subjectIds} mode='multiple' allowClear options={selectValues} onChange={(value, options) => {
                        if (!value.length) {
                            setSubjectIds([]);
                            setSubjectOptions([]);
                            return;
                        }
                        setSubjectIds(value);
                        setSubjectOptions(options);

                    }} />
                </section>
                <section style={{ display: "flex", alignItems: "center", marginTop: 16 }}>
                    <span style={{ color: " #8a8a8a" }}>设置分数线：</span>
                    <InputNumber
                        min={1}
                        value={score}
                        onChange={(value) => setScore(value)}
                        style={{ width: 120 }}
                    />
                    &nbsp;&nbsp;分以上&nbsp;&nbsp;
                    <Button onClick={() => {
                        if (typeof score !== 'number') {
                            message.error('请输入数字');
                            return;
                        }

                        const item = {
                            score,
                            name: !!subjectOptions?.length ?`总分${score}以上，选${subjectOptions?.map(item => item?.label).join('，')}` : `总分${score}以上`,
                            combIds: subjectIds?.join(',')
                        };
                        if(scoreLineList?.map(item=>item?.name).includes(item.name)){
                            message.error('该分数线已存在，勿重新添加');
                            return;
                        }
                        setScoreLine(item);
                        setScoreLineList((prev) => {
                            return [...prev, item];
                        })
                        setScore(null);
                    }}>
                        确定
                    </Button>
                </section>
                <section style={{ marginTop: 16 }}>
                    {scoreLineList?.length ? (
                        <Space>
                            {scoreLineList?.map((item, index) => {
                                const isSelected = scoreLine?.name === item?.name;
                                return (<Tag
                                    key={index}
                                    color={isSelected ? "green" : "default"}
                                    closable
                                    style={{cursor:'pointer'}}
                                    onClick={()=>{
                                        setScoreLine(item);
                                        
                                    }}
                                    onClose={() => {
                                        setScoreLineList(scoreLineList?.filter(i => i?.name !== item?.name))
                                    }}
                                >
                                    {item?.name}
                                </Tag>);
                            })}
                        </Space>

                    ) : null}
                </section>
                {!scoreLineList?.length ? (<Space style={{ marginTop: 16 }}>
                    {rankingList.length > 0 ? (
                        rankingList.map((item, index) => {
                            const isSelected = selectRaking === item?.value;
                            return (
                                <Tag
                                    onClick={() => handleRakingClick(item)}
                                    color={isSelected ? 'green' : 'default'}
                                    key={index}
                                    style={{
                                        cursor: 'pointer',
                                    }}
                                >
                                    {item?.label}
                                </Tag>
                            );
                        })
                    ) : null}
                </Space>) : null}
                <section style={{ marginTop: 16 }}>
                    <Table
                        bordered={true}
                        dataSource={dataSource}
                        columns={columns}
                        locale={{ emptyText: loading ? "计算中，请稍后" : "暂无数据" }}
                        loading={{ spinning: loading, tip: "计算中，请稍后" }}
                        scroll={{ x: 1400, y: 340 }}
                        style={{ maxHeight: 520 }}
                        pagination={false}
                        sticky={true}
                        rowKey="id"
                        expandable={{
                            expandedRowKeys,
                            onExpand: handleExpand,
                        }}
                    >

                    </Table>
                </section>
                <Button
                    type="primary"
                    style={{ marginTop: 8 }}
                    disabled={!dataSource?.length}
                    onClick={handleDownload}
                >
                    导出表格
                </Button>
                {/* </Card> */}
            </section>
            <section className={styles.ranking_charts}>
                {/* <Card hoverable style={{ borderRadius: 8 }}> */}
                <section style={{ marginTop: 16 }}>
                    {scoreLineList?.length ? (
                        <Space>
                            {scoreLineList?.map((item, index) => {
                                const isSelected = scoreLine?.name === item?.name;
                                return (<Tag
                                    key={index}
                                    color={isSelected ? "green" : "default"}
                                    closable
                                    style={{cursor:'pointer'}}
                                    onClick={()=>{
                                        setScoreLine(item);
                                        
                                    }}
                                    onClose={() => {
                                        setScoreLineList(scoreLineList.filter(i => i?.name !== item?.name))
                                    }}
                                >
                                    {item?.name}
                                </Tag>);
                            })}
                        </Space>

                    ) : null}
                </section>
                {!scoreLineList?.length ? (<Space style={{ marginTop: 16 }}>
                    {rankingList.length > 0 ? (
                        rankingList.map((item, index) => {
                            const isSelected = selectRaking === item?.value;
                            return (
                                <Tag
                                    onClick={() => handleRakingClick(item)}
                                    color={isSelected ? 'green' : 'default'}
                                    key={index}
                                    style={{
                                        cursor: 'pointer',
                                    }}
                                >
                                    {item?.label}
                                </Tag>
                            );
                        })
                    ) : null}
                </Space>) : null}
                <section className={styles.ranking_charts_nav}>
                    <Space>
                        {typeList.length > 0 ? (
                            typeList.map((item, index) => {
                                const isSelected = selectType === item;
                                return (
                                    <Tag
                                        onClick={() => setSelectType(item)}
                                        color={isSelected ? 'green' : 'default'}
                                        key={index}
                                        style={{
                                            cursor: 'pointer',
                                        }}
                                    >
                                        {item}
                                    </Tag>
                                );
                            })
                        ) : null}
                    </Space>
                    <Space style={{ marginTop: 8 }}>
                        {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.ranking_charts_container}>
                    <Spin spinning={loading} tip='计算中，请稍后'>
                        <div ref={chartRef} style={{ width: '100%', height: '460px' }}></div>
                    </Spin>
                </div>
                {/* </Card> */}
                <div className={styles.ranking_charts_action}>
                    <Button
                        type="primary"
                        style={{ marginRight: 20 }}
                        onClick={exportChart}
                        disabled={!mockChartData?.length}
                    >
                        导出图表
                    </Button>
                </div>
            </section>


            {echartImg && (
                <Modal
                    title="导出图表"
                    width={'80vw'}
                    className="custom-modal"
                    open={true}
                    okText="下载"
                    onCancel={() => {
                        setEchartImg("");
                    }}
                    onOk={downloadImg}
                >
                    <Flex style={{ height: "100%" }} alignItems="center" justify="center">
                        <Image src={echartImg} width={"100%"} />
                    </Flex>
                </Modal>
            )}
            <StudentGroup
                ref={studentGroupRef}
                params={studentGroupParams}
                title={title}
            />
        </div>
    )
};

export default RankingComparisonPage;