import { useState, useEffect, useRef, useMemo } from 'react';
import { Row, Col, Button, Table, InputNumber, Timeline, Popconfirm, Radio, Flex as AntDFlex, Empty, Spin, Form, Tag, Space, Modal, Image, Input, Tooltip, Select, List, message } from 'antd';
import { QuestionCircleOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { useInViewport, useScroll } from 'ahooks';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import Echarts from "@/components/Echarts";
import Echarts2 from '@/pages/report/components/Echarts';
import StudentGroup from '@/components/StudentGroup';
import StudentModal from '@/components/StudentModal';
import ScreenPage from "@/components/ScreenPage";
import Flex from "@/components/Flex";
import Common from "@/utils/Common";
import { getSchoolAnalysis, getSchoolPercentAnalysis, getTeacherAnalysis, getTopStudentAnalysis, getCriticalStudentAnalysis, getBadSubjectStudentAnalysis, getRashStudentAnalysis } from '@/apis/leader';
import { getExamRanking, getPercentageRanking, getPercentageRankingView, getParamsRanking } from '@/apis/exam';
import { getPersonalReport, saveTemplateComponent, getSystemComponentList, copyTemplate, deleteComponent, getTemplateComponentList, getTemplateDetail } from '@/apis/report';
import { getExam, getPercent, getParamsType } from '@/apis/common';
import { buildEchartData, removeEmptyChildren, buildBarAndPieOption } from '@/utils/table';
import useCurrentExam from '@/stores/useCurrentExam';
import useUserStore from '@/stores/useUserStore';
import upSrc from "@/assets/image/up.png";
import downSrc from "@/assets/image/down.png";
import editSrc from '@/assets/icon/edit.png';
import downloadSrc from '@/assets/icon/download.png';
import navIconSrc from '@/assets/icon/analysis-navigation-icon.png';
import sectionSrc1 from '@/assets/icon/analysis-catalogue-1.png';
import sectionSrc2 from '@/assets/icon/analysis-catalogue-2.png';
import sectionSrc3 from '@/assets/icon/analysis-catalogue-3.png';
import sectionSrc4 from '@/assets/icon/analysis-catalogue-4.png';
import memoir1Src from '@/assets/image/memoir1.png';
import memoir2Src from '@/assets/image/memoir2.png';
import memoir3Src from '@/assets/image/memoir3.png';
import styles from './index.less'


const { TextArea } = Input;
const AnalysisPage = () => {


    const { setExamName } = useCurrentExam();
    const { user } = useUserStore();

    const [isShow, setIsShow] = useState(false);
    const [params, setParams] = useState({});
    const [subtitle, setSubtitle] = useState('');


    const [expandedKeys, setExpandedKeys] = useState([]);

    const [dataSource, setDataSource] = useState([]);
    const [columns, setColumns] = useState([]);
    const [loading, setLoading] = useState(false);
    const [echartData, setEchartData] = useState({});
    const [lengButton, setLengButton] = useState([]);


    const [expandedKeys1, setExpandedKeys1] = useState([]);

    const [dataSource1, setDataSource1] = useState([]);
    const [columns1, setColumns1] = useState([]);
    const [loading1, setLoading1] = useState(false);
    const [echartData1, setEchartData1] = useState({});
    const [lengButton1, setLengButton1] = useState([]);


    const [dataSource2, setDataSource2] = useState([]);
    const [columns2, setColumns2] = useState([]);
    const [loading2, setLoading2] = useState(false);


    const [dataSource3, setDataSource3] = useState([]);
    const [columns3, setColumns3] = useState([]);
    const [loading3, setLoading3] = useState(false);
    const [echartData3, setEchartData3] = useState({});
    const [lengButton3, setLengButton3] = useState([]);

    const selectButton = ["临界生", "优生劣科", "冒进生"];
    const [activeButtons, setActiveButtons] = useState(selectButton[0]);
    const [selected, setSelected] = useState('critical');

    const [dataSource4, setDataSource4] = useState([]);
    const [columns4, setColumns4] = useState([]);
    const [loading4, setLoading4] = useState(false);
    const [echartData4, setEchartData4] = useState({});
    const [lengButton4, setLengButton4] = useState([]);

    const examRef = useRef(null);
    const examPercentRef = useRef(null);
    const teacherRef = useRef(null);
    const topStudentRef = useRef(null);
    const otherStudentRef = useRef(null);
    const contentRef = useRef(null);
    const comparisonRef = useRef(null);
    const [examInViewport] = useInViewport(examRef);
    const [examPercentInViewport] = useInViewport(examPercentRef);
    const [teacherInViewport] = useInViewport(teacherRef);
    const [topStudentInViewport] = useInViewport(topStudentRef);

    const [otherStudentInViewport] = useInViewport(otherStudentRef);

    const [comparisonInViewport] = useInViewport(comparisonRef);

    useScroll(contentRef);



    const [isShowExamComparison, setIsShowExamComparison] = useState(false);

    let chartInstance = null;
    const [isShowExamRanking, setIsShowExamRanking] = useState(false);
    const [examList, setExamList] = useState([]);
    const [dataSource5, setDataSource5] = useState([]);
    const [columns5, setColumns5] = useState([]);
    const [loading5, setLoading5] = useState(false);
    const [expandedRowKeys5, setExpandedRowKeys5] = useState([]);
    const [limit, setLimit] = useState(200);
    const chartRef = useRef(null);



    const [tags, setTags] = useState([]);
    const [selectedTags, setSelectedTags] = useState([]);
    const [echartXData, setEchartXData] = useState([]);

    const [mockChartData, setMockChartData] = useState([]);



    let chartInstance2 = null;
    const [expandedRowKeys6, setExpandedRowKeys6] = useState([]);
    const [selectedNavTag, setSelectedNavTag] = useState('');

    const [tags2, setTags2] = useState([]);
    const chartRef2 = useRef(null);
    const [selectedTags2, setSelectedTags2] = useState([]);
    const [echartXData2, setEchartXData2] = useState([]);
    const [mockChartData2, setMockChartData2] = useState([]);

    const [dataSource6, setDataSource6] = useState([]);
    const [columns6, setColumns6] = useState([]);
    const [loading6, setLoading6] = useState(false);

    const [rateList, setRateList] = useState([]);
    const [rate, setRate] = useState();
    const [spin, setSpin] = useState(false);

    let chartInstance3 = null;
    const [tags3, setTags3] = useState([]);
    const chartRef3 = useRef(null);
    const [selectedTags3, setSelectedTags3] = useState('');
    const [echartXData3, setEchartXData3] = useState([]);
    const [mockChartData3, setMockChartData3] = useState([]);

    const [chartTagList, setChartTagList] = useState([]);
    const [chartTag, setChartTag] = useState('');
    const [type, setType] = useState();
    const [spin2, setSpin2] = useState(false);

    const [paramsTypeList, setParamsTypeList] = useState([]);
    const [paramsType, setParamsType] = useState();

    const [rateList2, setRateList2] = useState([]);
    const [rate2, setRate2] = useState();

    const [expandedRowKeys7, setExpandedRowKeys7] = useState([]);

    const [selectedNavTag2, setSelectedNavTag2] = useState('');
    const [selectedNavTag3, setSelectedNavTag3] = useState('');

    const [dataSource7, setDataSource7] = useState([]);
    const [columns7, setColumns7] = useState([]);
    const [loading7, setLoading7] = useState(false);



    const studentGroupRef = useRef();


    const [title, setTitle] = useState('');

    const [studentGroupParams, setStudentGroupParams] = useState({});



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


    const [limit2, setLimit2] = useState(200);
    const [rateOn, setRateOn] = useState(35);
    const [rateUnder, setRateUnder] = useState(65);


    const [subjectName, setSubjectName] = useState('');

    const echartRef1 = useRef();
    const echartRef2 = useRef();
    const echartRef3 = useRef();
    const echartRef4 = useRef();

    const [echartImg, setEchartImg] = useState();


    const studentRef = useRef();
    const [studentParams, setStudentParams] = useState({});

    const mockDataSource = [
        {
            id: 1,
            name: "王斌",
            area: "丽水中学",
            avg: 86.5,
            ranking: 1
        },
        {
            id: 2,
            name: "李倩",
            area: "青田中学",
            avg: 85,
            ranking: 2
        }
    ];

    const mockColumns = [
        {
            title: "教师姓名",
            dataIndex: 'name',
            key: 'name',
            align: "center",
            render(value, record) {
                return (<Button type='link' style={{ color: "#4ABB6A" }} onClick={() => {
                    setOpen(true);
                    setRecord(record);

                }}>{value}</Button>)
            }
        },
        {
            title: "所属学校",
            dataIndex: 'area',
            key: 'area',
            align: "center",
        },
        {
            title: "所属学生均分",
            dataIndex: 'avg',
            key: 'avg',
            align: "center",
        },
        {
            title: "所属学生均分排名",
            dataIndex: 'ranking',
            key: 'ranking',
            align: "center",
        }
    ];


    const [open, setOpen] = useState(false);


    const [record, setRecord] = useState({});


    const [memoirList, setMemoirList] = useState([
        {
            id: 1,
            text: '高一上*语文*沁园春 长沙',
            url: memoir1Src,
        },
        {
            id: 2,
            text: '高一上*语文*鸿门宴',
            url: memoir2Src,
        },
        {
            id: 3,
            text: '高一下*语文*赤壁赋',
            url: memoir3Src,
        }
    ]);

    const [selectMemoirId, setSelectMemoirId] = useState(1);

    const timer = useRef(null);


    const [open2, setOpen2] = useState(false);

    const [reportList, setReportList] = useState([]);


    const [selectValue, setSelectValue] = useState('');

    const [form] = Form.useForm();


    const [isEdit, setIsEdit] = useState(false);


    const [componentList, setComponentList] = useState([]);

    const [open3, setOpen3] = useState(false);

    const [form2] = Form.useForm();
    const [confirmLoading, setConfirmLoading] = useState(false);


    const [originData, setOriginData] = useState({});

    const [componentId, setComponentId] = useState('');

    const [open4, setOpen4] = useState(false);

    const [form3] = Form.useForm();


    const [systemComponentList, setSystemComponentList] = useState([]);


    const [showChart, setShowChart] = useState(false);
    const [showTable, setShowTable] = useState(false);
    const [isRequest, setIsRequest] = useState(false);

    const [showPageList, setShowPageList] = useState([]);

    const showId1 = 0; // 首页
    const showId2 = 1; //说明页面
    const showId3 = 2; //目录
    const showId4 = 3; // 上线排名分析
    const showId5 = 4; //学校对比分析-当前考试排名情况分析-排名
    const showId6 = 5;// 学校对比分析-当前考试排名情况分析-百分比
    const showId7 = 12; // 教师群体分析-教师群体分析
    const showId8 = 7; // 学生群体分信息-尖子生
    const showId9 = 13; // 学生群体分信息-临界生,优生劣科,冒进生
    const showId10 = 39; // 对比考试排名情况分析
    const showId11 = 40; // 对比考试百分比情况分析
    const showId12 = 42; // 对比考试参数分析



    const matchingTemplate = (id, list = []) => {
        console.log(list, 'list');


        return list?.find(item => item?.reportItemModel?.id === id);

    };


    console.log(matchingTemplate(showId5, showPageList), '西湖');



    const selectMemoir = useMemo(() => {
        return memoirList.find(item => item.id === selectMemoirId);
    }, [selectMemoirId])

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


    const intersectionData2 = useMemo(() => {
        return mockChartData2?.filter((item) =>
            selectedTags2.includes(item.name),
        );
    }, [selectedTags2, mockChartData2]);

    const intersectionData3 = useMemo(() => {
        return mockChartData3?.filter((item) =>
            selectedTags3.includes(item.name),
        );
    }, [selectedTags3, mockChartData3]);

    const labelOption = {
        show: true,
        position: 'top',
        distance: 24,
        align: 'center',
        verticalAlign: 'middle',
        formatter: (params) => {
            if (params.seriesName === '增幅') {
                return `${params.value}%`;
            }
            return `${params.value}人`
        },
        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]);
        }

    };


    const handleNavTagClick = (tag) => {
        setSelectedNavTag(tag?.label || '');
        setRate(tag?.value || '');

    };

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

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

    };



    const handleNavTagClick2 = (tag) => {
        setSelectedNavTag2(tag?.label || '');
        setParamsType(tag?.value || '');

    };

    const handleNavTagClick3 = (tag) => {
        setSelectedNavTag3(tag?.label || '');
        setRate2(tag?.value || '');

    };

    const handleNavTagClick4 = (tag) => {
        setChartTag(tag?.label || '');
        setType(tag?.value || '');

    };


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

    };

    useEffect(() => {
        percentListInit();
        paramsTypeInit();

        return () => {
            clearTimeout(timer.current);
        };
    }, []);

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

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

    };


    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,
                },
                barGap: '10%',
                barWidth: "10%",
                xAxis: {
                    name: '考试',
                    type: 'category',
                    axisTick: { show: false },
                    data: echartXData,
                    axisLabel: {
                        textStyle: {
                            fontSize: 20,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 20,
                    }
                },
                yAxis: {
                    name: "",
                    axisLabel: {
                        textStyle: {
                            fontSize: 20,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 20,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: tags,
                    selectedMode: false,
                    textStyle: {
                        fontSize: 20
                    }
                },
                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]);



    useEffect(() => {
        if (!echartXData2.length) {
            return;
        }
        if (chartRef2.current) {

            // 初始化图表
            chartInstance2 = echarts.init(chartRef2.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,
                },
                barGap: '10%',
                barWidth: "10%",
                xAxis: {
                    name: '考试',
                    type: 'category',
                    axisTick: { show: false },
                    data: echartXData2,
                    axisLabel: {
                        textStyle: {
                            fontSize: 20,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 20,
                    }
                },
                yAxis: {
                    name: "人",
                    axisLabel: {
                        textStyle: {
                            fontSize: 20,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 20,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: tags2,
                    selectedMode: false,
                    textStyle: {
                        fontSize: 20
                    }
                },
                series: intersectionData2?.map((item) => ({
                    ...commonSeries,
                    name: item.name,
                    data: item.data,
                }))
            };

            chartInstance2.setOption(option);

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

            // 清理函数
            return () => {
                window.removeEventListener('resize', resizeHandler);
                chartInstance2?.dispose();
            };
        }
    }, [selectedTags2, echartXData2, mockChartData2]);


    useEffect(() => {

        if (!echartXData3.length) {
            return;
        }
        if (chartRef3.current) {
            // 初始化图表
            chartInstance3 = echarts.init(chartRef3.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,
                },
                xAxis: {
                    name: '考试',
                    type: 'category',
                    axisTick: { show: false },
                    data: echartXData3,
                    axisLabel: {
                        textStyle: {
                            fontSize: 20,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 20,
                    }
                },
                yAxis: {
                    name: "",
                    axisLabel: {
                        textStyle: {
                            fontSize: 20,
                        }
                    },
                    nameTextStyle: {
                        fontSize: 20,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: tags3,
                    selectedMode: false,
                    textStyle: {
                        fontSize: 20
                    }
                },
                barGap: '10%',
                barWidth: "10%",
                series: intersectionData3.map((item) => ({
                    ...commonSeries,
                    name: item.name,
                    data: item.data,
                }))
            };

            chartInstance3.setOption(option);

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

            // 清理函数
            return () => {
                window.removeEventListener('resize', resizeHandler);
                chartInstance3?.dispose();
            };
        }
    }, [selectedTags3, echartXData3, mockChartData3]);



    useEffect(() => {

        if (!Object.values(params).length > 0) {
            return;
        }
        init();

    }, [params?.examId, params?.subjectId, params?.schools]);


    useEffect(() => {

        if (!Object.values(params).length > 0) {
            return;
        }
        percentInit();

    }, [params?.examId, params?.subjectId, params?.schools]);

    useEffect(() => {

        if (!Object.values(params).length > 0) {
            return;
        }
        teacherInit();

    }, [params?.examId, params?.subjectId, params?.schools]);


    useEffect(() => {

        if (!Object.values(params).length > 0) {
            return;
        }
        topStudentInit();

    }, [params?.examId, params?.subjectId, params?.schools]);


    useEffect(() => {
        if (!Object.values(params).length > 0) {
            return;
        }
        otherStudentInit();

    }, [params?.examId, params?.subjectId, params?.schools, selected, limit2, rateOn, rateUnder]);



    useEffect(() => {
        if (!Object.values(params).length > 0 && !examList.length > 0) {
            return;
        }
        rankingExamInit();

    }, [params?.examId, params?.subjectId, params?.schools, examList, limit]);


    useEffect(() => {
        if (!Object.values(params).length > 0 && !examList.length > 0) {
            return;
        }
        examPercentInit();

    }, [params?.examId, params?.subjectId, params?.schools, examList, limit, rate]);



    useEffect(() => {
        if (!Object.values(params).length > 0 && !examList.length > 0) {
            return;
        }
        viewInit();

    }, [params?.examId, params?.subjectId, params?.schools, examList, limit]);


    useEffect(() => {
        if (!Object.values(params).length > 0 & !examList.length > 0) {
            return;
        }
        examParamsInit();

    }, [params?.examId, params?.subjectId, params?.schools, examList, limit, rate2, paramsType]);

    useEffect(() => {
        if (type) {
            charInit();
        }

    }, [params?.examId, params?.subjectId, params?.schools, examList, limit, type]);



    useEffect(() => {
        if (open2) {
            getPersonalReportInit();
            getSystemComponentListInit();
            return;
        }

        setSelectValue('');
        setComponentList([]);
        setSystemComponentList([]);

    }, [open2]);



    useEffect(() => {
        if (!selectValue) {
            return;
        }
        componentsInit();

    }, [selectValue])

    useEffect(() => {
        if (isRequest) {
            selectCurrentTemplate()
        }

    }, [isRequest]);


    const init = async () => {
        try {
            setLoading(true);
            const res = await getSchoolAnalysis(params);
            if (res?.code === 200) {
                setLoading(false);
                const list = removeEmptyChildren(res.data);
                setDataSource(list);
                if (!res?.columnDiagramResult?.num?.length || !res?.columnDiagramResult) {
                    return;
                }
                const data = buildEchartData(res?.columnDiagramResult?.num);
                setExpandedKeys([res?.data?.[0]?.id]);
                setEchartData(data);
                setLengButton(res?.columnDiagramResult?.num?.map(item => item?.lineName));
                setColumns(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 300,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId: params?.examId,
                                                    students: text?.data
                                                });

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

                        }
                    })

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

        }
    };


    const percentInit = async () => {
        try {
            setLoading1(true);
            const res = await getSchoolPercentAnalysis(params);
            if (res?.code === 200) {
                setLoading1(false);
                const list = removeEmptyChildren(res.data);
                setDataSource1(list);
                const data = buildEchartData(res?.columnDiagramResult?.num);
                setEchartData1(data);
                setLengButton1(res?.columnDiagramResult?.num?.map(item => item?.lineName) || []);
                setColumns1(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 300,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                setTitle(text?.typeDisc);
                                                studentGroupRef.current?.openModal();
                                                setStudentGroupParams({
                                                    examId: params?.examId,
                                                    students: text?.data
                                                });
                                            }}>{text?.value}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })
                        }
                    })

                });
            }
            setLoading1(false);
        } catch (error) {
            setLoading1(false);
            console.log(error, 'init-error');

        }
    };


    const teacherInit = async () => {
        setLoading2(true);
        try {
            const res = await getTeacherAnalysis({
                ...params,
                limit: 50
            });
            if (res.code === 200) {
                setLoading2(false);
                setDataSource2(res?.data || []);
                setColumns2(() => {
                    return res?.columns?.map(item => {
                        if (item?.label === '教师姓名') {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                                render: (_, record) => {
                                    return (<Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                        console.log(record, 'record');
                                        // updateModal(record, params1);

                                    }}>{record?.name}</Button>)
                                }
                            }
                        }
                        if (['教师姓名', '所属学校'].includes(item?.label)) {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                            }
                        }
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            sorter: (a, b) => a[item?.prop] - b[item?.prop],
                        }
                    })
                })
            }
            setLoading2(false);
        } catch (error) {
            setLoading2(false);
            console.log(error, 'teacher-error');
        }

    };


    const topStudentInit = async () => {

        try {
            setLoading3(true);
            const res = await getTopStudentAnalysis({
                ...params,
                limit: 200
            });
            if (res.code === 200) {
                setLoading3(false);
                setLengButton3([res?.columnDiagramResult?.rate?.[0]?.lineName, res?.columnDiagramResult?.num?.[0]?.lineName]);
                const option = buildBarAndPieOption(res?.columnDiagramResult);
                setEchartData3(option);

                setDataSource3(res?.data || []);
                setColumns3(() => {
                    return res?.columns?.map(item => {
                        if (item?.label === '学生姓名') {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                                render: (value, record) => {


                                    return <Button type="link" onClick={() => {
                                        setStudentParams({
                                            studentName: record?.name,
                                            studentId: record?.studentId,
                                            examId: params?.examId
                                        });
                                        timer.current = setTimeout(() => {
                                            studentRef?.current?.openModal();
                                        }, 0);


                                    }} style={{ color: '#4ABB6A' }}>{value}</Button>
                                }
                            }
                        }
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            children: item?.children?.map(element => {
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })
                        }
                    })
                })

            }
            setLoading3(false);

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

    const otherStudentInit = async () => {
        const API = {
            critical: getCriticalStudentAnalysis,
            badSubject: getRashStudentAnalysis,
            rash: getBadSubjectStudentAnalysis,
        };

        try {
            setLoading4(true);
            const res = await API?.[selected]({
                ...params,
                limit: limit2,
                rateOn,
                rateUnder,
                // ...otherParams
            });
            if (res.code === 200) {
                setLoading4(false);
                setLengButton4([res?.columnDiagramResult?.rate?.[0]?.lineName, res?.columnDiagramResult?.num?.[0]?.lineName])
                const option = buildBarAndPieOption(res?.columnDiagramResult);
                setEchartData4(option);
                setDataSource4(res?.data || []);
                setColumns4(() => {

                    return res?.columns?.map(item => {
                        if (item?.label === '学生姓名') {
                            return {
                                title: item?.label,
                                dataIndex: item?.prop,
                                align: "center",
                                render: (value, record) => {


                                    return <Button type="link" onClick={() => {
                                        setStudentParams({
                                            studentName: record?.name,
                                            studentId: record?.studentId,
                                            examId: params2?.examId
                                        });
                                        timer.current = setTimeout(() => {
                                            studentRef?.current?.openModal();
                                        }, 0);


                                    }} style={{ color: '#4ABB6A' }}>{value}</Button>
                                }
                            }
                        }
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            children: item?.children?.map(element => {
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })
                        }
                    })
                })

            }
            setLoading4(false);

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

    const rankingExamInit = async () => {
        setLoading5(true);
        try {
            const res = await getExamRanking({
                ...params,
                examIds: examList.map(item => item.id),
                limit,
            });
            if (res.code === 200) {
                setLoading5(false);
                setDataSource5(res?.data || []);
                setExpandedRowKeys5([res?.data?.[0]?.id]);
                setTags([res?.columnDiagramResult?.num?.[0]?.lineName || '', res?.columnDiagramResult?.incr?.[0]?.lineName || '', res?.columnDiagramResult?.rate?.[0]?.lineName || '']?.filter(item => item !== ''));
                setSelectedTags([res?.columnDiagramResult?.num?.[0]?.lineName || '']);

                setEchartXData(res?.columnDiagramResult?.num?.[0]?.xdata || []);

                setMockChartData(() => {

                    return [
                        {
                            name: res?.columnDiagramResult?.num?.[0]?.lineName || '',
                            data: res?.columnDiagramResult?.num?.[0]?.data || [],
                        },
                        {
                            name: res?.columnDiagramResult?.incr?.[0]?.lineName || '',
                            data: res?.columnDiagramResult?.incr?.[0]?.data || [],
                        },
                        {
                            name: res?.columnDiagramResult?.rate?.[0]?.lineName || '',
                            data: res?.columnDiagramResult?.rate?.[0]?.data || []
                        }

                    ]
                });
                setColumns5(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 300,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                // setVisibleModal({ open: true });
                                            }}>{text}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

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

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

        }
    };


    const percentListInit = async () => {
        try {
            const percent = await getPercent();
            if (percent.code === 200) {
                setRateList(percent?.data || []);
                setRate(percent?.data?.[0]?.value || '');
                setSelectedNavTag(percent?.data?.[0]?.label || '');
                setRateList2(percent?.data || []);
                setRate2(percent?.data?.[0]?.value || '');
                setSelectedNavTag3(percent?.data?.[0]?.label || '')
            }
        } catch (error) {
            console.log(error, 'percent-init-error');

        }
    };

    const paramsTypeInit = async () => {
        try {
            const params = await getParamsType();
            if (params.code === 200) {
                setParamsTypeList(params?.data || []);
                setParamsType(params?.data?.[0]?.value || '');
                setSelectedNavTag2(params?.data?.[0]?.label || '');
                setChartTagList(params?.data || []);
                setChartTag(params?.data?.[0]?.label || '');
                setType(params?.data?.[0]?.value || '')

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




    const examPercentInit = async () => {
        setLoading6(true);
        try {
            const res = await getPercentageRanking({
                ...params,
                examIds: examList.map(item => item.id),
                limit,
                rate,
            });

            if (res.code === 200) {

                setLoading6(false);
                setDataSource6(res?.data || []);
                setExpandedRowKeys6([res?.data?.[0]?.id]);
                setColumns6(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 300,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                // setVisibleModal({ open: true });
                                            }}>{text}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

                        }
                    })
                })
                return;
            }
            setLoading6(false);

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

        }
    };


    const viewInit = async () => {
        setSpin(true);
        try {

            const res = await getPercentageRankingView({
                ...params,
                examIds: examList.map(item => item.id),
                limit,
            });
            if (res.code === 200) {
                setSpin(false);
                let list = Object.keys(res?.columnDiagramResult || {});
                setTags2(list);
                setSelectedTags2([list?.[0]]);
                const list2 = Object.values(res?.columnDiagramResult || {}).filter((item) => item != null);
                if (list2.length > 0) {
                    setEchartXData2(list2?.[0]?.[0]?.xdata);
                    setMockChartData2(() => {
                        return Object.entries(res?.columnDiagramResult || {}).map(([name, items]) => ({
                            name,
                            data: items[0].data
                        }));
                    });


                }
            }
            setSpin(false);

        } catch (error) {
            setSpin(false);
            console.log(error, 'ranking-view-init-error');

        }
    }

    const examParamsInit = async () => {
        setLoading7(true);
        try {
            const res = await getParamsRanking({
                ...params,
                examIds: examList.map(item => item.id),
                limit,
                rate: rate2,
                type: paramsType

            });

            if (res.code === 200) {
                setLoading7(false);
                setDataSource7(res?.data || []);
                setExpandedRowKeys7([res?.data?.[0]?.id]);
                setColumns7(() => {
                    return res?.columns?.map(item => {
                        return {
                            title: item?.label,
                            dataIndex: item?.prop,
                            align: "center",
                            width: 300,
                            children: item?.children?.map(element => {
                                if (element?.label === '人数') {
                                    return {
                                        title: element?.label,
                                        dataIndex: element?.prop,
                                        align: "center",
                                        sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                        render: (text) => (
                                            <Button type="link" style={{ color: "#4ABB6A" }} onClick={() => {
                                                // setVisibleModal({ open: true });
                                            }}>{text}</Button>
                                        ),
                                    }
                                }
                                return {
                                    title: element?.label,
                                    dataIndex: element?.prop,
                                    align: "center",
                                    sorter: (a, b) => a[element?.prop] - b[element?.prop],
                                }
                            })

                        }
                    })
                })
                return;
            }
            setLoading7(false);

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

        }
    }


    const charInit = async () => {
        setSpin2(true);
        try {
            const res = await getParamsRanking({
                ...params,
                examIds: examList.map(item => item.id),
                limit,
                rate: 100,
                type,

            });
            if (res.code === 200) {
                setSpin2(false);
                if (Object.values(res?.columnDiagramResult)?.length) {
                    setTags3([res?.columnDiagramResult?.num?.[0]?.lineName, res?.columnDiagramResult?.incr?.[0]?.lineName, res?.columnDiagramResult?.rate?.[0]?.lineName]);
                    setSelectedTags3([res?.columnDiagramResult?.num?.[0]?.lineName]);
                    setEchartXData3(res?.columnDiagramResult?.num?.[0]?.xdata);

                    setMockChartData3(() => {

                        return [
                            {
                                name: res?.columnDiagramResult?.num?.[0]?.lineName,
                                data: res?.columnDiagramResult?.num?.[0]?.data || []
                            },
                            {
                                name: res?.columnDiagramResult?.incr?.[0]?.lineName,
                                data: res?.columnDiagramResult?.incr?.[0]?.data || []
                            },
                            {
                                name: res?.columnDiagramResult?.rate?.[0]?.lineName,
                                data: res?.columnDiagramResult?.rate?.[0]?.data || []
                            },
                        ]
                    });
                }
            }
        } catch (error) {
            setSpin2(false);
            console.log(error, 'exam-ranking-error');
        }
    }



    const getPersonalReportInit = async () => {
        try {
            const res = await getPersonalReport();
            if (res?.code === 200) {

                console.log(res?.data, '123');
                setReportList(res?.data || []);

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

        }
    };


    const componentsInit = async () => {
        try {
            const res = await getTemplateComponentList({ id: selectValue, });
            if (res?.code === 200) {
                setComponentList(res?.data || []);
                return;
            }
        } catch (error) {
            console.log(error, 'components-init-error');

        }
    };


    const getSystemComponentListInit = async () => {
        try {
            const res = await getSystemComponentList();
            if (res.code === 200) {
                setSystemComponentList(res?.data || []);

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

        }
    };



    const selectCurrentTemplate = async () => {
        try {
            const res = await getTemplateDetail({ id: selectValue, });
            if (res.code === 200) {
                setShowPageList(res?.data?.reportItemList || []);

            }
        } catch (error) {
            console.log(error, 'select-current-template-error');

        }
    };


    const scrollToSection = (ref) => {
        ref.current?.scrollIntoView({ behavior: 'smooth' });
    };
    const expandableConfig = {
        expandedRowKeys: expandedKeys,
        defaultExpandedRowKeys: [dataSource[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedKeys([...expandedKeys, record.id]);
            } else {
                setExpandedKeys(expandedKeys.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig1 = {
        expandedRowKeys: expandedKeys1,
        defaultExpandedRowKeys: [dataSource1?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedKeys1([...expandedKeys1, record.id]);
            } else {
                setExpandedKeys1(expandedKeys1?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig5 = {
        expandedRowKeys: expandedRowKeys5,
        defaultExpandedRowKeys: [dataSource5?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys5([...expandedRowKeys5, record.id]);
            } else {
                setExpandedRowKeys5(expandedRowKeys5?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig6 = {
        expandedRowKeys: expandedRowKeys6,
        defaultExpandedRowKeys: [dataSource6?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys6([...expandedRowKeys6, record.id]);
            } else {
                setExpandedRowKeys6(expandedRowKeys6?.filter((k) => k !== record.id));
            }
        },
    };

    const expandableConfig7 = {
        expandedRowKeys: expandedRowKeys7,
        defaultExpandedRowKeys: [dataSource7?.[0]?.id],
        onExpand: (expanded, record) => {
            if (expanded) {
                setExpandedRowKeys7([...expandedRowKeys7, record.id]);
            } else {
                setExpandedRowKeys7(expandedRowKeys7?.filter((k) => k !== record.id));
            }
        },
    };

    const tableCommonProps = {
        style: { height: 560, overflowY: "scroll", overflowX: "hidden" },
        rowKey: "id",
        scroll: { x: 1600 },
        sticky: true,
        pagination: false,
    };

    const timelineItems = [
        {
            color: 'green',
            children: (
                <>
                    <p className={styles.timeline_title}>考试分析</p>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(examRef);
                    }}>考试排名分析</section>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(examPercentRef);
                    }}>考试排名百分比分析</section>
                </>
            ),
        },
        {
            color: 'green',
            children: (
                <>
                    <p className={styles.timeline_title}>教师分析</p>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(teacherRef);
                    }}>教师群体分析</section>
                    {/* <section className={styles.timeline_text}>教师绩效Z值分析</section> */}
                </>
            ),
        },
        {
            color: 'green',
            children: (
                <>
                    <p className={styles.timeline_title}>学生分析</p>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(topStudentRef);
                    }}>尖子生分析</section>
                    <section className={styles.timeline_text} onClick={() => {
                        scrollToSection(otherStudentRef);
                    }}>临界生/冒进生分析</section>
                </>
            ),
        },
        {
            color: 'green',
            children: (
                <>
                    <p className={styles.timeline_title}>整体分析与反思</p>
                    <section className={styles.timeline_text}>整体分析与反思</section>
                    <section className={styles.timeline_text}>后续措施</section>
                </>
            ),
        },

    ];

    const explainTextList = [
        '1.统计范围:温州市普通高中2022届高三学生，缺考考生和零分考生不参与统计;',
        '2.统计方法:按考生学籍所在学校进行统计;',
        '3.选考科目赋分办法:先参照2021届首考成绩划定20个等第，再采用一分一赋的方法进行赋分;',
        '4.如果没有特别说明，本报告中与“率”和“平均分”相关的数据均以统计人数为基数;',
        '5.本次分析仅针对文化科成绩，不区分报考类别;',
        '6.由于部分学生缺考和无法区分报考类别等原因，本报告中的所有参数不代表某所学校或区域的办学水平仅供内部指导教学时使用，切勿外传，更不得用于招生宣传。'
    ];


    const catalogueList = [
        {
            title: '上线情况分析',
            // text1: '考试排名分析',
            // text2: '考试排名百分比分析',
            icon: sectionSrc1,
            left: 0
        },
        {
            title: '学校对比分析',
            // text1: '教师群体分析',
            // text2: '教师绩效Z值分析',
            icon: sectionSrc2,
            left: 0
        },
        {
            title: '学生群体分析',
            // text1: '尖子生分析',
            // text2: '临界生/冒进生分析',
            icon: sectionSrc3,
            left: 0
        },
        {
            title: '教师群体分析',
            // text1: '整体分析',
            // text2: '后续措施',
            icon: sectionSrc4,
            left: 0
        },
    ];


    // 导出图片
    const exportChart = (ref) => {
        const instance = echarts.getInstanceByDom(ref?.current);
        if (instance) {
            const base64 = instance?.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("");
    };


    const handleSaveTemplate = () => {
        let title;
        Modal.confirm({
            title: "保存模板",
            centered: true,
            closeIcon: <></>,
            destroyOnClose: true,
            maskClosable: false,
            content: (<Input placeholder='请输入模板名称' onChange={(e) => {
                title = e.target.value;
            }} />),
            onOk: () => {
                return new Promise((resolve, reject) => {
                    if (!title) {
                        message.error("请输入模板名称");
                        reject();
                        return;
                    }
                    copyTemplate({ copyId: selectValue, title }).then(res => {
                        if (res.code === 200) {
                            resolve();
                            getPersonalReportInit();
                            message.success("操作成功");
                            return;
                        }
                        resolve();

                    }).catch(reject)
                });


            }
        })
    };


    const handleDeleteComponent = async (record) => {
        try {
            const res = await deleteComponent({ id: record.id });
            if (res.code === 200) {
                message.success('删除成功');
                componentsInit();
            }
        } catch (error) {
            console.log(error, 'delete-component-error');

        }

    };


    const handleEditComponent = (record) => {
        console.log(record, 'record');
        setComponentId(record?.id);
        setOriginData(record?.reportItemModel || {})
        form2.setFieldsValue({
            ...record
        });
        setOpen3(true);
    };


    const handleOk2 = async () => {
        try {

            setConfirmLoading(true);
            const res = await saveTemplateComponent({ ...form2.getFieldsValue(), reportId: selectValue, id: componentId });
            if (res.code === 200) {
                setConfirmLoading(false);
                setOpen3(false);
                componentsInit();
                setComponentId('');
                message.success('操作成功');

            }
            setConfirmLoading(false);

        } catch (error) {
            setConfirmLoading(false);
            console.log(error, 'save-template-error');

        }

    };


    const handleOk3 = async () => {
        try {
            setConfirmLoading(true);
            const id2 = form3.getFieldsValue()?.id;
            const element = systemComponentList.find(item => item.id === id2);
            const data = {
                title: form3.getFieldsValue()?.title,
                reportId: selectValue,
                hrefModelId: element?.id,
                type: element?.type,
                showTable: form3.getFieldsValue()?.showTable,
                showChart: form3.getFieldsValue()?.showChart,
                showContent: form3.getFieldsValue()?.showContent,
                sort: form3.getFieldsValue()?.sort,
            }
            const res = await saveTemplateComponent(data);
            if (res.code === 200) {
                setConfirmLoading(false);
                setOpen4(false);
                componentsInit();
                message.success('操作成功');
                return;

            }
            setConfirmLoading(false);

        } catch (error) {
            setConfirmLoading(false);
            console.log(error, 'add-component-error');

        }

    };

    const handleAddComponent = () => {
        setOpen4(true);
        form3.resetFields();
        setShowTable(false);
        setShowChart(false);
    };


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


            <Row gutter={16}>
                <Col span={24}>
                    <section className={styles.analysis_content} ref={contentRef}>
                        <section style={{ boxSizing: "border-box", padding: 8, backgroundColor: "#fff", display: isShow ? "block" : "none" }} >
                            <ScreenPage
                                isShow={isShow}
                                isShowSubject={true}
                                isTeacher={true}
                                onChange={(e) => {
                                    setSubjectName(e?.currentDiscipline?.[0]?.name || '');

                                    setSubtitle(`${[e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name,].filter(item => !!item).join("*")}*`);
                                    console.log();

                                    setExamName(`${[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),
                                        subjectId: e?.currentDiscipline?.[0]?.id || '',
                                    })
                                }}
                                saveshow={(e) => {
                                    setIsShow(e);
                                }}
                            />
                        </section>
                        <section className={styles.title}>


                            <section style={{ display: "flex", alignItems: "center" }}>
                                {subtitle ? (<span style={{ fontSize: 18 }}>
                                    当前默认最新一次考试：{subtitle}{subjectName}
                                </span>) : null}
                                <Flex
                                    style={{
                                        padding: "4px 8px",
                                        border: "1px solid #666",
                                        borderRadius: 5,
                                        cursor: "pointer",
                                        width: '200px',
                                        // marginTop: 8
                                        marginLeft: 8
                                    }}
                                    justify='center'
                                    alignItems="center"
                                    onClick={() => {
                                        setIsShow(!isShow);
                                    }}
                                >
                                    选择考试
                                    <img
                                        src={isShow ? upSrc : downSrc}
                                        width={14}
                                        height={12}
                                        style={{ marginLeft: 5 }}
                                    />
                                </Flex>
                                <Tooltip title="如果需要看其他考试与学科，请按”选择考试”">
                                    <QuestionCircleOutlined style={{ fontSize: 18, marginLeft: 8 }} />
                                </Tooltip>
                            </section>

                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                onClick={() => {
                                    setOpen2(true);
                                    setIsEdit(false);
                                    setIsRequest(false);
                                }}
                                justify='center'
                                alignItems="center"
                            >
                                选择报告模板
                                <img
                                    src={editSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>

                        </section>
                        {!!matchingTemplate(showId1, showPageList) ? (<section className={styles.analysis_content_home}>
                            <section className={styles.analysis_content_home_title}>
                                <span>{subtitle}</span>
                                <span>整体分析报告</span>
                            </section>

                            <section className={styles.analysis_content_home_bottom}>
                                <section className={styles.analysis_content_home_bottom_editor}>
                                    <span>报告人：{user?.userName}</span>
                                    <span>报告时间：{dayjs()?.format('YYYY年MM月DD日')}</span>
                                </section>
                                <section className={styles.analysis_content_home_bottom_source}>
                                    <span>来源：丽水市学业大数据分析系统</span>
                                </section>
                            </section>
                        </section>) : null}

                        {!!matchingTemplate(showId2, showPageList) ? (<section className={styles.analysis_content_explain}>
                            <section className={styles.analysis_content_explain_title}>
                                <section className={styles.page_title}>
                                    <img src={navIconSrc} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>数据说明</span>
                                </section>
                            </section>
                            <section className={styles.analysis_content_explain_content}>
                                {explainTextList?.map((item, index) => {
                                    return (<p key={index} className={styles.analysis_content_explain_content_text}>{item}</p>)
                                })}
                            </section>
                        </section>) : null}

                        {!!matchingTemplate(showId3, showPageList) ? (
                            <section className={styles.analysis_content_catalogue}>
                                <section className={styles.analysis_content_catalogue_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>目录</span>
                                    </section>
                                </section>
                                <section className={styles.analysis_content_catalogue_content}>

                                    {catalogueList.map((item, index) => {
                                        return (<section className={styles.analysis_content_catalogue_section} key={index} style={{ marginLeft: item?.left }}>
                                            <img src={item.icon} className={styles.analysis_content_catalogue_section_img} />
                                            <section className={styles.analysis_content_catalogue_section_description}>
                                                <span className={styles.analysis_content_catalogue_section_title}>{item?.title}</span>
                                                {/* <span className={styles.analysis_content_catalogue_section_text}>{item?.text1}&nbsp;&nbsp;&nbsp;&nbsp;{item?.text2}</span> */}
                                            </section>
                                        </section>)
                                    })}
                                </section>
                            </section>
                        ) : null}

                        {(!!matchingTemplate(showId5, showPageList)) && (matchingTemplate(showId5, showPageList)?.reportItemModel?.hasChart === 1) ? (<section className={styles.analysis_content_chart} ref={examRef}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={navIconSrc} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}排名分析-图表</span>
                                </section>
                                <Button type='primary' onClick={() => {
                                    echartRef1?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading}>
                                    {lengButton.length > 0 ? (<Echarts
                                        ref={echartRef1}
                                        hasTable={false}
                                        hasExport={false}
                                        data={echartData}
                                        type={"bar"}
                                        isShow={true}
                                        lengButton={lengButton}

                                    />) : <Empty description={"计算中，请稍候"} />}
                                </Spin>
                            </section>
                        </section>) : null}
                        {(!!matchingTemplate(showId5, showPageList)) && (matchingTemplate(showId5, showPageList)?.reportItemModel?.hasTable === 1) ? (<section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={navIconSrc} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}排名分析-表格</span>
                                </section>
                                <Button type='primary' onClick={() => {
                                    Common?.uploadFile();
                                }}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource}
                                    columns={columns}
                                    loading={loading}
                                    expandable={expandableConfig}
                                >
                                </Table>
                            </section>
                        </section>) : null}

                        {(!!matchingTemplate(showId6, showPageList)) && (matchingTemplate(showId6, showPageList)?.reportItemModel?.hasChart === 1) ? (<section className={styles.analysis_content_chart} ref={examPercentRef}>
                            <section className={styles.analysis_content_chart_title}>
                                <section className={styles.page_title}>
                                    <img src={navIconSrc} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}排名百分比分析-图表</span>
                                </section>
                                <Button type='primary' onClick={() => {
                                    echartRef2?.current?.exportChart();
                                }}>导出图表</Button>
                            </section>
                            <section className={styles.analysis_content_chart_content}>
                                <Spin spinning={loading1}>
                                    {lengButton1?.length > 0 ? (<Echarts
                                        hasTable={false}
                                        ref={echartRef2}
                                        hasExport={false}
                                        data={echartData1}
                                        type={"bar"}
                                        isShow={true}
                                        lengButton={lengButton1}

                                    />) : <Empty description={"计算中，请稍候"} />}
                                </Spin>
                            </section>
                        </section>) : null}

                        {(!!matchingTemplate(showId6, showPageList)) && (matchingTemplate(showId6, showPageList)?.reportItemModel?.hasTable === 1) ? (<section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={navIconSrc} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}排名百分比分析-表格</span>
                                </section>
                                <Button type='primary' onClick={() => {
                                    Common?.uploadFile();
                                }}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource1}
                                    columns={columns1}
                                    loading={loading1}
                                    expandable={expandableConfig1}
                                >
                                </Table>
                            </section>
                        </section>) : null}


                        {!!matchingTemplate(showId7, showPageList) ? (
                            <section className={styles.analysis_content_table} ref={teacherRef}>
                                <section className={styles.analysis_content_table_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}教师群体分析</span>
                                    </section>
                                    <Button type='primary' onClick={() => {
                                        Common?.uploadFile();
                                    }}>导出表格</Button>
                                </section>
                                <section className={styles.analysis_content_table_content}>
                                    <Table
                                        {...tableCommonProps}
                                        // dataSource={dataSource2}
                                        // columns={columns2}
                                        dataSource={mockDataSource}
                                        columns={mockColumns}
                                    // loading={loading2}
                                    // expandable={expandableConfig}
                                    >
                                    </Table>
                                </section>
                            </section>
                        ) : null}

                        {(!!matchingTemplate(showId8, showPageList)) && (matchingTemplate(showId8, showPageList)?.reportItemModel?.hasChart === 1) ? (
                            <section className={styles.analysis_content_chart} ref={topStudentRef}>
                                <section className={styles.analysis_content_chart_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}尖子生情况分析-图表</span>
                                    </section>
                                    <Button type='primary' onClick={() => {
                                        echartRef3?.current?.exportChart();
                                    }}>导出图表</Button>
                                </section>
                                <section className={styles.analysis_content_chart_content}>
                                    <Spin spinning={loading3}>
                                        {lengButton3.length > 0 ? (<Echarts2
                                            hasTable={false}
                                            hasExport={false}
                                            ref={echartRef3}
                                            needTab={true}
                                            data={echartData3}
                                            type={"bar"}
                                            lengButton={lengButton3}

                                        />) : <Empty description={"计算中，请稍候"} />}
                                    </Spin>

                                </section>
                            </section>
                        ) : null}

                        {(!!matchingTemplate(showId8, showPageList)) && (matchingTemplate(showId8, showPageList)?.reportItemModel?.hasTable === 1) ? (<section className={styles.analysis_content_table}>
                            <section className={styles.analysis_content_table_title}>
                                <section className={styles.page_title}>
                                    <img src={navIconSrc} className={styles.page_title_img} />
                                    <span className={styles.page_title_text}>{subtitle}尖子生情况分析-表格</span>
                                </section>
                                <Button type='primary' onClick={() => {
                                    Common?.uploadFile();
                                }}>导出表格</Button>
                            </section>
                            <section className={styles.analysis_content_table_content}>
                                <Table
                                    {...tableCommonProps}
                                    dataSource={dataSource3}
                                    columns={columns3}
                                    loading={loading3}
                                >
                                </Table>
                            </section>
                        </section>) : null}
                        {(!!matchingTemplate(showId9, showPageList)) && (matchingTemplate(showId9, showPageList)?.reportItemModel?.hasChart === 1) ? (
                            <section className={styles.analysis_content_chart} ref={otherStudentRef}>
                                <section className={styles.analysis_content_chart_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}{activeButtons}情况分析-图表</span>
                                    </section>
                                    <Flex alignItems="center" style={{ marginRight: 12 }}>
                                        全市前&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={limit2}
                                            type="number"
                                            onChange={(e) => {
                                                setLimit2(+ e.target.value);
                                            }}
                                        />&nbsp;
                                        名
                                        &nbsp;上线&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={rateOn}
                                            type="number"
                                            onChange={(e) => {
                                                setRateOn(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;% &nbsp;&nbsp;&nbsp;&nbsp;未上线&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={rateUnder}
                                            type="number"
                                            onChange={(e) => {
                                                setRateUnder(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;%
                                    </Flex>
                                    <Button type='primary' onClick={() => {
                                        echartRef4?.current?.exportChart();
                                    }}>导出图表</Button>
                                </section>

                                <section style={{ marginTop: 8 }}>
                                    {selectButton.map((but, index) => {
                                        return (
                                            <Button
                                                size={"small"}
                                                key={index}
                                                style={{
                                                    marginRight: 10,
                                                    backgroundColor: activeButtons == but ? "#e9f7ee" : "",
                                                    color: activeButtons == but ? "#3eb463" : "",
                                                    borderColor: activeButtons == but ? "#e9f7ee" : "",
                                                }}
                                                onClick={() => {
                                                    setActiveButtons(but);
                                                    if (but === '临界生') {
                                                        setSelected('critical');
                                                        return;
                                                    }
                                                    if (but === '优生劣科') {
                                                        setSelected('badSubject');
                                                        return;
                                                    }
                                                    if (but === '冒进生') {
                                                        setSelected('rash');
                                                        return;
                                                    }
                                                }}
                                            >
                                                {but}
                                            </Button>
                                        );
                                    })}
                                </section>
                                <section className={styles.analysis_content_chart_content}>
                                    <Spin spinning={loading4}>
                                        {lengButton4.length > 0 ? (<Echarts2
                                            hasTable={false}
                                            ref={echartRef4}
                                            hasExport={false}
                                            needTab={true}
                                            data={echartData4}
                                            type={"bar"}
                                            lengButton={lengButton4}

                                        />) : <Empty description={"计算中，请稍候"} />}
                                    </Spin>
                                </section>
                            </section>
                        ) : null}


                        {(!!matchingTemplate(showId9, showPageList)) && (matchingTemplate(showId9, showPageList)?.reportItemModel?.hasTable === 1) ? (
                            <section className={styles.analysis_content_table} >
                                <section className={styles.analysis_content_table_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}{activeButtons}情况分析-表格</span>
                                    </section>

                                    <Flex alignItems="center" style={{ marginRight: 12 }}>
                                        全市前&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={limit2}
                                            type="number"
                                            onChange={(e) => {
                                                setLimit2(+ e.target.value);
                                            }}
                                        />&nbsp;
                                        名
                                        &nbsp;上线&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={rateOn}
                                            type="number"
                                            onChange={(e) => {
                                                setRateOn(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;% &nbsp;&nbsp;&nbsp;&nbsp;未上线&nbsp;&nbsp;
                                        <Input
                                            style={{
                                                padding: "2px 8px",
                                                border: "1px solid #c0c0c0",
                                                borderRadius: 5,
                                                cursor: "pointer",
                                                color: "#c0c0c0",
                                                width: 80,
                                            }}
                                            min={1}
                                            placeholder="请输入"
                                            value={rateUnder}
                                            type="number"
                                            onChange={(e) => {
                                                setRateUnder(+e.target.value);
                                            }}
                                        />
                                        &nbsp;&nbsp;%
                                    </Flex>
                                    <Button type='primary' onClick={() => {
                                        Common?.uploadFile();
                                    }}>导出表格</Button>
                                </section>
                                <section className={styles.analysis_content_table_content}>
                                    <Table
                                        {...tableCommonProps}
                                        dataSource={dataSource4}
                                        columns={columns4}
                                        loading={loading4}
                                    >
                                    </Table>
                                </section>
                            </section>
                        ) : null}
                        {!isShowExamComparison ? (
                            <section className={styles.analysis_tip}>
                                <section>
                                    {subtitle}整体分析报告中“当前考试分析”部分已结束，您可以点击 <Button type="link" style={{ color: "#4ABB6A", textDecoration: "underline", fontSize: 18 }} onClick={() => {
                                        setIsShowExamComparison(true);
                                        timer.current = setTimeout(() => scrollToSection(comparisonRef), 0);
                                    }}>考试对比</Button> 查看当前考试与历届历次考试的对比分析
                                </section>
                            </section>
                        ) : null}

                        {isShowExamComparison ? (<section className={styles.exam} ref={comparisonRef}>

                            <section className={styles.exam_ranking}>

                                <Flex
                                    style={{
                                        width: "100%",
                                        display: "flex",
                                        alignItems: "center",
                                        margin: "5px 0",
                                        padding: "10px 0",
                                    }}
                                    justify="space-between"
                                    alignItems="center"
                                >
                                    <Flex alignItems="center">
                                        <Flex alignItems="center"
                                            style={{
                                                width: "100%",
                                                display: "flex",
                                                alignItems: "center",
                                                color: "#8a8a8a",
                                            }}
                                        >
                                            对比考试 : &nbsp;
                                            <Flex wrap="wrap">
                                                {examList?.map((item) => {
                                                    return (
                                                        <Tag
                                                            key={item.id}
                                                            closeIcon
                                                            onClose={(e) => {
                                                                e.preventDefault();
                                                                setExamList((prev) => {
                                                                    return prev.filter((i) => i?.id !== item?.id)
                                                                });
                                                            }}
                                                            style={{
                                                                color: "black",
                                                                fontWeight: "bold",
                                                                fontSize: 14
                                                            }}
                                                        >
                                                            {`${item?.term}*${item?.semester}*${item?.examName}`}
                                                        </Tag>
                                                    );
                                                })}
                                            </Flex>
                                        </Flex>
                                    </Flex>

                                    <Flex
                                        style={{
                                            padding: "4px 8px",
                                            border: "1px solid #666",
                                            borderRadius: 5,
                                            cursor: "pointer",
                                            marginTop: 16

                                        }}
                                        alignItems="center"
                                        onClick={() => {
                                            setIsShowExamRanking(!isShowExamRanking);
                                        }}
                                    >
                                        选择考试和学校
                                        <img
                                            src={isShowExamRanking ? upSrc : downSrc}
                                            width={14}
                                            height={12}
                                            style={{ marginLeft: 5 }}
                                        />
                                    </Flex>
                                </Flex>
                                <ScreenPage
                                    isShow={isShowExamRanking}
                                    isSingle={false}
                                    isShowSubject={true}
                                    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) => {
                                        setIsShowExamRanking(e);
                                    }}
                                />
                            </section>
                            {(!!matchingTemplate(showId10, showPageList) && matchingTemplate(showId10, showPageList))?.reportItemModel?.hasChart === 1 ? (
                                <section className={styles.analysis_content_chart} >
                                    <section className={styles.analysis_content_chart_title}>
                                        <section className={styles.page_title} >
                                            <img src={navIconSrc} className={styles.page_title_img} />
                                            <span className={styles.page_title_text}>{subtitle}对比考试排名情况分析-图表</span>
                                        </section>
                                        <Button type='primary' onClick={() => {
                                            exportChart(chartRef)
                                        }}>导出图表</Button>
                                    </section>
                                    <Space>
                                        {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>
                                    <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 className={styles.analysis_content_chart_content} >
                                        <Spin spinning={loading5}>
                                            <div ref={chartRef} style={{ width: '100%', height: '560px' }}></div>
                                        </Spin>
                                    </section>
                                </section>
                            ) : null}
                            {(!!matchingTemplate(showId10, showPageList) && matchingTemplate(showId10, showPageList))?.reportItemModel?.hasTable === 1 ? (<section className={styles.analysis_content_table}>
                                <section className={styles.analysis_content_table_title}>
                                    <section className={styles.page_title}>
                                        <img src={navIconSrc} className={styles.page_title_img} />
                                        <span className={styles.page_title_text}>{subtitle}对比考试排名情况分析-表格</span>
                                    </section>
                                    <Button type='primary' onClick={() => {
                                        Common?.uploadFile();
                                    }}>导出表格</Button>
                                </section>
                                <section className={styles.analysis_content_table_content}>
                                    <Table
                                        {...tableCommonProps}
                                        dataSource={dataSource5}
                                        columns={columns5}
                                        loading={loading5}
                                        expandable={expandableConfig5}
                                    >
                                    </Table>
                                </section>
                            </section>) : null}
                            {(!!matchingTemplate(showId11, showPageList) && matchingTemplate(showId11, showPageList))?.reportItemModel?.hasChart === 1 ? (
                                <section className={styles.analysis_content_chart}>
                                    <section className={styles.analysis_content_chart_title}>
                                        <section className={styles.page_title}>
                                            <img src={navIconSrc} className={styles.page_title_img} />
                                            <span className={styles.page_title_text}>{subtitle}对比考试百分比情况分析-图表</span>
                                        </section>
                                        <Button type='primary' onClick={() => {
                                            exportChart(chartRef2)
                                        }}>导出图表</Button>
                                    </section>

                                    <Space>
                                        {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>
                                    <Space style={{ marginTop: 8, width: '100%' }}>
                                        {tags2?.length > 0 ? (
                                            tags2?.map((item, index) => {
                                                const isSelected = selectedTags2.includes(item);
                                                return (
                                                    <Tag
                                                        onClick={() => handleTagClick2(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                    <section className={styles.analysis_content_chart_content}>
                                        <Spin spinning={loading6}>
                                            <div ref={chartRef2} style={{ width: '100%', height: '560px' }}></div>
                                        </Spin>
                                    </section>
                                </section>
                            ) : null}
                            {(!!matchingTemplate(showId11, showPageList) && matchingTemplate(showId11, showPageList))?.reportItemModel?.hasTable === 1 ? (
                                <section className={styles.analysis_content_table}>
                                    <section className={styles.analysis_content_table_title}>
                                        <section className={styles.page_title}>
                                            <img src={navIconSrc} className={styles.page_title_img} />
                                            <span className={styles.page_title_text}>{subtitle}对比考试百分比情况分析-表格</span>
                                        </section>
                                        <Button type='primary' onClick={() => {
                                            Common?.uploadFile();
                                        }}>导出表格</Button>
                                    </section>
                                    <Space>
                                        {rateList.length > 0 ? (
                                            rateList.map((item, index) => {
                                                const isSelected = selectedNavTag === item?.label;
                                                return (
                                                    <Tag
                                                        onClick={() => handleNavTagClick(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item?.label}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                    <section className={styles.analysis_content_table_content}>
                                        <Table
                                            {...tableCommonProps}
                                            dataSource={dataSource6}
                                            columns={columns6}
                                            loading={loading6}
                                            expandable={expandableConfig6}
                                        >
                                        </Table>
                                    </section>
                                </section>
                            ) : null}
                            {(!!matchingTemplate(showId12, showPageList) && matchingTemplate(showId12, showPageList))?.reportItemModel?.hasChart === 1 ? (
                                <section className={styles.analysis_content_chart}>
                                    <section className={styles.analysis_content_chart_title}>
                                        <section className={styles.page_title}>
                                            <img src={navIconSrc} className={styles.page_title_img} />
                                            <span className={styles.page_title_text}>{subtitle}对比考试参数情况分析-图表</span>
                                        </section>
                                        <Button type='primary' onClick={() => {
                                            exportChart(chartRef3)
                                        }}>导出图表</Button>
                                    </section>

                                    <Space>
                                        {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>

                                    <Space style={{ marginTop: 8, width: '100%' }}>
                                        {chartTagList.length > 0 ? (
                                            chartTagList.map((item, index) => {
                                                const isSelected = chartTag === item?.label;
                                                return (
                                                    <Tag
                                                        onClick={() => handleNavTagClick4(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item?.label}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                    <section style={{ marginTop: 8 }}>
                                        <Space>
                                            {tags3?.length > 0 ? (
                                                tags3?.map((item, index) => {
                                                    const isSelected = selectedTags3.includes(item);
                                                    return (
                                                        <Tag
                                                            onClick={() => handleTagClick3(item)}
                                                            color={isSelected ? 'green' : 'default'}
                                                            key={index}
                                                            style={{
                                                                cursor: 'pointer',
                                                            }}
                                                        >
                                                            {item}
                                                        </Tag>
                                                    );
                                                })
                                            ) : null}
                                        </Space>
                                    </section>
                                    <section className={styles.analysis_content_chart_content}>
                                        <Spin spinning={loading7}>
                                            <div ref={chartRef3} style={{ width: '100%', height: '560px' }}></div>
                                        </Spin>
                                    </section>
                                </section>
                            ) : null}
                            {(!!matchingTemplate(showId12, showPageList) && matchingTemplate(showId12, showPageList))?.reportItemModel?.hasTable === 1 ? (
                                <section className={styles.analysis_content_table}>
                                    <section className={styles.analysis_content_table_title}>
                                        <section className={styles.page_title}>
                                            <img src={navIconSrc} className={styles.page_title_img} />
                                            <span className={styles.page_title_text}>{subtitle}对比考试参数情况分析-表格</span>
                                        </section>
                                        <Button type='primary' onClick={() => {
                                            Common?.uploadFile();
                                        }}>导出表格</Button>
                                    </section>
                                    <Space style={{ marginTop: 8 }}>
                                        {paramsTypeList.length > 0 ? (
                                            paramsTypeList.map((item, index) => {
                                                const isSelected = selectedNavTag2 === item?.label;
                                                return (
                                                    <Tag
                                                        onClick={() => handleNavTagClick2(item)}
                                                        color={isSelected ? 'green' : 'default'}
                                                        key={index}
                                                        style={{
                                                            cursor: 'pointer',
                                                        }}
                                                    >
                                                        {item?.label}
                                                    </Tag>
                                                );
                                            })
                                        ) : null}
                                    </Space>
                                    <section style={{ marginTop: 8 }}>
                                        <Space>
                                            {rateList2.length > 0 ? (
                                                rateList2.map((item, index) => {
                                                    const isSelected = selectedNavTag3 === item?.label;
                                                    return (
                                                        <Tag
                                                            onClick={() => handleNavTagClick3(item)}
                                                            color={isSelected ? 'green' : 'default'}
                                                            key={index}
                                                            style={{
                                                                cursor: 'pointer',
                                                            }}
                                                        >
                                                            {item?.label}
                                                        </Tag>
                                                    );
                                                })
                                            ) : null}
                                        </Space>
                                    </section>
                                    <section className={styles.analysis_content_table_content}>
                                        <Table
                                            {...tableCommonProps}
                                            dataSource={dataSource7}
                                            columns={columns7}
                                            loading={loading7}
                                            expandable={expandableConfig7}
                                        >
                                        </Table>
                                    </section>
                                </section>
                            ) : null}
                        </section>) : null}
                        <section className={styles.download}>
                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                            >
                                下载报告
                                <img
                                    src={downloadSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>
                        </section>

                        <section style={{ height: 32 }}></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>
                        )}
                    </section>
                </Col>
                {/* <Col span={4}>
                    <section className={styles.analysis_navigation}>
                        <section className={styles.analysis_navigation_action}>
                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                                onClick={() => {
                                    setIsShow(!isShow);
                                }}
                            >
                                选择考试和学校
                                <img
                                    src={isShow ? upSrc : downSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>
                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                            >
                                报告模板：整体报告
                                <img
                                    src={editSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>
                            <Flex
                                style={{
                                    padding: "4px 8px",
                                    border: "1px solid #666",
                                    borderRadius: 5,
                                    cursor: "pointer",
                                    width: '200px',
                                    marginTop: 8
                                }}
                                justify='center'
                                alignItems="center"
                            >
                                下载报告
                                <img
                                    src={downloadSrc}
                                    width={14}
                                    height={12}
                                    style={{ marginLeft: 5 }}
                                />
                            </Flex>
                        </section>
                        <section className={styles.analysis_navigation_timeline}>
                            <Timeline
                                items={timelineItems}
                            />
                        </section>
                    </section>
                </Col> */}
            </Row>
            <StudentGroup
                ref={studentGroupRef}
                params={studentGroupParams}
                title={title}
            />
            <StudentModal ref={studentRef} params={studentParams} />

            <Modal
                title={`${record?.name}老师课程实录`}
                open={open}
                width={'80vw'}
                styles={{ body: { height: "80vh" } }}
                onOk={() => setOpen(false)}
                onCancel={() => setOpen(false)}
                centered
                destroyOnClose
                maskClosable={false}
            >
                <section style={{ display: 'flex', flexDirection: 'column' }}>
                    <header className={styles.memoir}>
                        <Space>
                            {memoirList.map(item => {
                                return (<Button size="large" type={item.id === selectMemoirId ? "primary" : "default"} onClick={() => {
                                    setSelectMemoirId(item.id);
                                }} >{item?.text}</Button>)
                            })}
                        </Space>
                    </header>
                    <main className={styles.memoir_courseware} style={{ backgroundImage: `url(${selectMemoir.url})` }}>

                    </main>
                </section>
            </Modal>


            <Modal
                title='报告模板选择'
                centered
                open={open2}
                destroyOnClose
                width='80vw'
                maskClosable={false}
                onCancel={() => setOpen2(false)}
                onOk={() => {
                    setOpen2(false);
                    setIsRequest(true);
                }}
            // styles={{body:{height:"80vh",overflowY:"scroll"}}}
            >
                <Form
                    form={form}
                >
                    <Form.Item label="报告模板">
                        <Select placeholder="请选择报告模板" allowClear onChange={(value) => {
                            console.log(value, 'value');
                            if (!value) {
                                return
                            }
                            setSelectValue(value);
                            const element = reportList.find(item => item.id === value);
                            setIsEdit(!!element?.canEdit);
                        }} options={reportList?.map(item => {
                            return {
                                value: item.id,
                                label: item.title
                            }
                        })} style={{ width: 320 }} />
                    </Form.Item>
                </Form>
                <section className={styles.component}>
                    <span className={styles.component_label}>模板设定：</span>
                    <section className={styles.component_container}>
                        <section className={styles.component_container_list}>
                            <List
                                bordered
                                dataSource={componentList}
                                renderItem={(item) => (
                                    <List.Item>
                                        <AntDFlex style={{ width: "100%" }} justify="space-between" align="center">
                                            <span>{item?.title}</span>
                                            {isEdit ? (<Space>
                                                <EditOutlined style={{ cursor: "pointer" }} onClick={() => handleEditComponent(item)} />
                                                <Popconfirm
                                                    title="温馨提示"
                                                    description="确定要删除该报告吗？"
                                                    onConfirm={() => handleDeleteComponent(item)}
                                                    okText="是"
                                                    cancelText="否"
                                                >
                                                    <DeleteOutlined />
                                                </Popconfirm>

                                            </Space>) : null}
                                        </AntDFlex>
                                    </List.Item>
                                )}
                            />
                        </section>
                        {!!isEdit ? <Space direction="vertical" style={{ width: "100%" }}>
                            <Button block onClick={handleAddComponent}>添加组件</Button>
                            <Button type="primary" block onClick={handleSaveTemplate}>保存为自定义模板</Button>
                        </Space> : null}
                    </section>

                </section>
            </Modal>



            <Modal
                title='编辑组件'
                open={open3}
                maskClosable={false}
                centered
                destroyOnClose
                width={600}
                onOk={handleOk2}
                confirmLoading={confirmLoading}
                onCancel={() => {
                    setOpen3(false);
                    form2.resetFields();
                    setComponentId('');
                }}
            >
                <Form
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    form={form2}
                >
                    <Form.Item label="组件名称" name="title">
                        <Input placeholder="请输入组件名称" />
                    </Form.Item>
                    <Form.Item label="是否展示富文本" name='showContent'>
                        <Radio.Group
                            options={[
                                { value: 0, label: '否' },
                                { value: 1, label: '是' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label="内容" name='content'>
                        <TextArea
                            placeholder="请输入内容"
                            autoSize={{
                                minRows: 2,
                                maxRows: 6,
                            }}
                        />
                    </Form.Item>
                    <Form.Item label="参数" name='params'>
                        <TextArea
                            placeholder="请输入参数"
                            autoSize={{
                                minRows: 2,
                                maxRows: 6,
                            }}
                        />
                    </Form.Item>

                    <Form.Item label="类型" name='type'>
                        <Radio.Group
                            options={[
                                { value: 0, label: '首页' },
                                { value: 1, label: '纯文本' },
                                { value: 2, label: '表格图表' },
                                { value: 3, label: '目录' },
                            ]}
                        />
                    </Form.Item>
                    {originData?.hasTable ? (<Form.Item label="是否展示表格" name='showTable'>
                        <Radio.Group
                            options={[
                                { value: 0, label: '否' },
                                { value: 1, label: '是' },
                            ]}
                        />
                    </Form.Item>) : null}
                    {originData?.hasChart ? (<Form.Item label="是否展示图表" name='showChart'>
                        <Radio.Group
                            options={[
                                { value: 0, label: '否' },
                                { value: 1, label: '是' },
                            ]}
                        />
                    </Form.Item>) : null}
                    <Form.Item label="排序" name='sort'>
                        <InputNumber placeholder="请输入排序" style={{ width: '100%' }} />
                    </Form.Item>
                </Form>
            </Modal>

            <Modal
                title='添加组件'
                open={open4}
                maskClosable={false}
                centered
                destroyOnClose
                width={600}
                onOk={handleOk3}
                confirmLoading={confirmLoading}
                onCancel={() => {
                    setOpen4(false);
                    form3.resetFields();
                }}
            >
                <Form
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 19 }}
                    form={form3}
                >
                    <Form.Item label="组件名称" name="title">
                        <Input placeholder="请输入组件名称" />
                    </Form.Item>
                    <Form.Item label="绑定组件" name="id">
                        <Select placeholder="请选择绑定组件" allowClear onChange={(value) => {
                            const element = systemComponentList.find(item => item.id === value);
                            form3.setFieldValue('showTable', element?.hasTable);
                            form3.setFieldValue('showChart', element?.hasChart);
                            setShowTable(!!element?.hasTable);
                            setShowChart(!!element?.hasChart);
                        }} options={systemComponentList?.map(item => {
                            return {
                                value: item.id,
                                label: item.name
                            }
                        })} style={{ width: '100%' }} />
                    </Form.Item>
                    {showTable ? (<Form.Item label="是否展示表格" name='showTable'>
                        <Radio.Group
                            options={[
                                { value: 0, label: '否' },
                                { value: 1, label: '是' },
                            ]}
                        />
                    </Form.Item>) : null}
                    {showChart ? (<Form.Item label="是否展示图表" name='showChart'>
                        <Radio.Group
                            options={[
                                { value: 0, label: '否' },
                                { value: 1, label: '是' },
                            ]}
                        />
                    </Form.Item>) : null}
                    <Form.Item label="是否展示富文本" name='showContent'>
                        <Radio.Group
                            options={[
                                { value: 0, label: '否' },
                                { value: 1, label: '是' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label="排序" name='sort'>
                        <InputNumber placeholder="请输入排序" style={{ width: '100%' }} />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
};


export default AnalysisPage;