import { useEffect, useRef, useState,useMemo } from "react";
import { Button, Modal, Image, Select, Space, Table, Tag, Spin } from "antd";
import Echarts from "@/components/Echarts";
import Echarts2 from '@/pages/report/components/Echarts'

import { getSubjectDistribution, getCombinationDistribution, getSelectedDistribution, getAssignDistribution } from '@/apis/leader';
import { getNoSingleCombine, getSubjectList, getSubjectListCombineList } from '@/apis/common';
import { buildBarAndPieOption, buildEchartData } from '@/utils/table';
import ScreenPage from "@/components/ScreenPage";
import Flex from "@/components/Flex";
import upSrc from "@/assets/image/up.png";
import downSrc from "@/assets/image/down.png";
import Common from "@/utils/Common";
import StudentModal from "./components/StudentModal";
import { studentData, studentCol } from "../mock/tableData";
import { downloadTableData } from '@/apis/download';
import { downloadExcelFile } from '@/utils/file';

const StatisticsPage = () => {

  const [isShow, setIsShow] = useState(false);
  const [isShow1, setIsShow1] = useState(false);
  const [isShow2, setIsShow2] = useState(false);
  const [isShow3, setIsShow3] = useState(false);
  const [tableIsShow, setTableIsShow] = useState(false);
  const [tableIsShow1, setTableIsShow1] = useState(false);
  const [tableIsShow2, setTableIsShow2] = useState(false);
  const [tableIsShow3, setTableIsShow3] = useState(false);
  const [visibleModal, setVisibleModal] = useState({ open: false }); //学生弹窗



  const [subtitle, setSubtitle] = useState('');
  const [dataSource, setDataSource] = useState([]);
  const [params, setParams] = useState({});
  const [columns, setColumns] = useState([]);
  const [loading, setLoading] = useState(false);
  const [echartData, setEchartData] = useState({});
  const [lengButton, setLengButton] = useState([]);
  const [expandedKeys, setExpandedKeys] = useState([]);

  const [subjectId, setSubjectId] = useState('');

  const [subtitle1, setSubtitle1] = useState('');
  const [dataSource1, setDataSource1] = useState([]);
  const [params1, setParams1] = useState({});
  const [columns1, setColumns1] = useState([]);
  const [loading1, setLoading1] = useState(false);
  const [echartData1, setEchartData1] = useState({});
  const [lengButton1, setLengButton1] = useState([]);
  const [expandedKeys1, setExpandedKeys1] = useState([]);
  const [subjectId1, setSubjectId1] = useState('');

  const [subtitle2, setSubtitle2] = useState('');
  const [dataSource2, setDataSource2] = useState([]);
  const [params2, setParams2] = useState({});
  const [columns2, setColumns2] = useState([]);
  const [loading2, setLoading2] = useState(false);
  const [echartData2, setEchartData2] = useState({});
  const [lengButton2, setLengButton2] = useState([]);
  const [expandedKeys2, setExpandedKeys2] = useState([]);
  const [subjectId2, setSubjectId2] = useState('');

  const [subtitle3, setSubtitle3] = useState('');
  const [dataSource3, setDataSource3] = useState([]);
  const [params3, setParams3] = useState({});
  const [columns3, setColumns3] = useState([]);
  const [loading3, setLoading3] = useState(false);
  const [echartData3, setEchartData3] = useState({});
  const [lengButton3, setLengButton3] = useState([]);
  const [expandedKeys3, setExpandedKeys3] = useState([]);
  const [subjectId3, setSubjectId3] = useState('');

  const [singleSubjectList, setSingleSubjectList] = useState([]);


  const [tags, setTags] = useState([]);
  const [selectedTag, setSelectedTag] = useState('');



  const [navTags, setNavTags] = useState([]);
  const [selectedNavTag, setSelectedNavTag] = useState('');

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


  const [navTags1, setNavTags1] = useState([]);
  const [selectedNavTag1, setSelectedNavTag1] = useState('');

  const [allEchartData1, setAllEchartData1] = useState({});



  const [navTags2, setNavTags2] = useState([]);
  const [selectedNavTag2, setSelectedNavTag2] = useState('');

  const [allEchartData2, setAllEchartData2] = useState({});

  const [combineList, setCombineList] = useState([]);
  const [selectValue, setSelectValue] = useState(null);


  const [selectTag, setSelectTag] = useState('');

  const [selectTag2, setSelectTag2] = useState('');

  const [echartData4, setEchartData4] = useState({});

  const [selectTag3, setSelectTag3] = useState('');
  const [echartData5, setEchartData5] = useState({});


  const [responseData1, setResponseData1] = useState({});
  const [responseData2, setResponseData2] = useState({});
  const [responseData3, setResponseData3] = useState({});
  const [responseData4, setResponseData4] = useState({});
  

  const computedChartType = useMemo(()=>{
    if(['人数','累计人数'].includes(selectTag2)){
      return 'bar';
    }
    return "pie"
    
  },[selectTag2])



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

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


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

  }, [params1?.examId, params1?.schools]);


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

  }, [params2?.examId, subjectId2, params2?.schools]);

  useEffect(() => {
    if (!Object.values(params3).length > 0 || !subjectId3) {
      return;
    }
    assignDistributionInit();

  }, [params3?.examId, subjectId3, params3?.schools]);


  useEffect(() => {
    singleSubjectInit();
    getNoSingleCombineInit();
    getSubjectListCombineListInit();
  }, [])


  // 监听selectedNavTag 筛选出该科目的人数和人数占比
  useEffect(() => {
    if (!selectedNavTag) {
      return;
    }

    const obj = {
      num: allEchartData?.num?.filter(item => item?.lineName === selectedNavTag),
      rate: allEchartData?.rate?.filter(item => item?.lineName === selectedNavTag),

    };

    setEchartData(() => {
      return {
        xAxis: {
          name: "",
          type: "category",
          axisTick: { show: false },
          data: obj.num?.[0]?.xdata,
        },
        yAxis: {
          name: "",
        },
        tooltip: {
          show: true,
        },
        yChartData: [
          {
            name: '人数',
            data: obj.num?.[0]?.data
          }
        ]
      }
    });
    console.log({
      xAxis: {
        name: "",
        type: "category",
        axisTick: { show: false },
        data: obj.num?.[0]?.xdata,
      },
      yAxis: {
        name: "",
      },
      tooltip: {
        show: true,
      },
      yChartData: [
        {
          name: '人数',
          data: obj.num?.[0]?.data
        }
      ]
    },'西湖666');
    
    setEchartData4(() => {
      return {
        xAxis: {
          name: "",
          type: "category",
          axisTick: { show: false },
          data: obj.rate?.[0]?.xdata,
        },
        yAxis: {
          name: "人数占比",
        },
        tooltip: {
          show: true,
        },
        yChartData: [
          {
            name: '人数占比',
            data: obj.rate?.[0]?.data
          }
        ]
      }
    });

    // setEchartData(buildEchartData(obj.num));
    // setEchartData4(buildEchartData(obj.rate));
  }, [selectedNavTag]);



  // 监听selectedNavTag1 筛选出该科目的人数和人数占比
  useEffect(() => {
    if (!selectedNavTag1) {
      return;
    }

    const obj = {
      num: allEchartData1?.num?.filter(item => item?.lineName === selectedNavTag1),
      rate: allEchartData1?.rate?.filter(item => item?.lineName === selectedNavTag1),

    };
    
    // setEchartData1(buildBarAndPieOption(obj));

    setEchartData1(() => {
      return {
        xAxis: {
          name: "",
          type: "category",
          axisTick: { show: false },
          data: obj.num?.[0]?.xdata,
        },
        yAxis: {
          name: "",
        },
        tooltip: {
          show: true,
        },
        yChartData: [
          {
            name: '人数',
            data: obj.num?.[0]?.data
          }
        ]
      }
    });

    setEchartData5(() => {
      return {
        xAxis: {
          name: "",
          type: "category",
          axisTick: { show: false },
          data: obj.rate?.[0]?.xdata,
        },
        yAxis: {
          name: "人数占比",
        },
        tooltip: {
          show: true,
        },
        yChartData: [
          {
            name: '人数占比',
            data: obj.rate?.[0]?.data
          }
        ]
      }
    });

  }, [selectedNavTag1]);




  // 监听selectedNavTag2 筛选出该科目的人数和人数占比
  useEffect(() => {
    if (!selectedNavTag2) {
      return;
    }

    const obj = {
      num: allEchartData2?.num?.filter(item => item?.lineName === selectedNavTag2),
      rate: allEchartData2?.rate?.filter(item => item?.lineName === selectedNavTag2),
      numCumulative: allEchartData2?.numCumulative?.filter(item => item?.lineName === selectedNavTag2),
      rateCumulative: allEchartData2?.rateCumulative?.filter(item => item?.lineName === selectedNavTag2),
    };
    ['num', 'rate', 'numCumulative', 'rateCumulative'].forEach(key => {
      obj[key].forEach(item => {
        // 创建临时存储容器
        const filtered = [];

        // 同步过滤 data 和 xdata
        item.data.forEach((value, index) => {
          if (value !== 0) {
            filtered.push({
              data: value,
              x: item.xdata[index]
            });
          }
        });

        // 更新原数组
        item.data = filtered.map(e => e.data);
        item.xdata = filtered.map(e => e.x);
      });
    });
    

    const filterData = (selectTag2) => {
      if (selectTag2 === '人数') {
        return {
          xAxis: {
            name: "",
            type: "category",
            axisTick: { show: false },
            data: obj.num?.[0]?.xdata,
          },
          yAxis: {
            name: '人数',
          },
          tooltip: {
            show: true,
          },
          yChartData: [
            {
              name: selectTag2,
              data: obj.num?.[0]?.data
            }
          ]
        };
      }
      if (selectTag2 === '人数占比') {
        return {
          yChartData: obj.rate?.[0]?.xdata.map((item,index)=>{
            return {
              name:item,
              data: [obj.rate?.[0]?.data?.[index]]
            }
          })
        };
      }
      if (selectTag2 === '累计人数') {
        return {
          xAxis: {
            name: "",
            type: "category",
            axisTick: { show: false },
            data: obj.numCumulative?.[0]?.xdata,
          },
          yAxis: {
            name: '累计人数',
          },
          tooltip: {
            show: true,
          },
          yChartData: [
            {
              name: '累计人数',
              data: obj.numCumulative?.[0]?.data
            }
          ]
        };
      }
      if (selectTag2 === '累计人数占比') {
        return {
          yChartData: obj.rateCumulative?.[0]?.xdata.map((item,index)=>{
            return {
              name:item,
              data: [obj.rateCumulative?.[0]?.data?.[index]]
            }
          })
        };
      }
    }





    setEchartData3(filterData(selectTag2));
    // setEchartData3(buildBarAndPieOption(obj));
  }, [selectedNavTag2, selectTag2]);


  const singleSubjectInit = async () => {
    try {
      const res = await getSubjectList();
      if (res?.code === 200) {
        setSingleSubjectList(() => {
          return res?.data?.map(item => {
            return {
              label: item?.cname,
              value: item?.id
            }
          })
        })
      }

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

    }
  };

  const getNoSingleCombineInit = async () => {
    try {
      const list = await getNoSingleCombine();
      if (list?.code === 200) {
        setTags(list?.data || []);
        setSelectedTag(list.data?.[0]?.cname || '');
        setSubjectId2(list.data?.[0]?.id || '');

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

    }
  }

  const selectedSubjectInit = async () => {
    setLoading(true);
    try {
      const res = await getSubjectDistribution(params);
      if (res?.code === 200) {
        setLoading(false);
        setResponseData1(res);
        setExpandedKeys([res?.data?.[0]?.id,res?.data?.[0]?.children?.[0]?.id]);
        setDataSource(res?.data || []);
        setColumns(() => {
          return res?.columns?.map(item => {
            return {
              title: item?.label,
              dataIndex: item?.prop,
              align: "center",
              width: 150,
              sorter: item?.sortable ? (a, b) => a[item?.prop] - b[item?.prop] : false,
              children: item?.children?.map(element => {
                return {
                  title: element?.label,
                  dataIndex: element?.prop,
                  align: "center",
                  width: 160,
                  sorter: element?.sortable ? (a, b) => a[element?.prop] - b[element?.prop] : false
                }
              })
            }
          });
        });

        if (!res?.columnDiagramResult || !res?.columnDiagramResult?.num?.length > 0 || !res?.columnDiagramResult?.rate?.length > 0) {
          return;
        }

        const selectedName = res?.columnDiagramResult?.num?.map(item => item?.lineName)[0];
        setNavTags(res?.columnDiagramResult?.num?.map(item => item?.lineName));
        setSelectedNavTag(selectedName);
        setLengButton(['人数', '人数占比']);
        setSelectTag('人数');

        setAllEchartData(res?.columnDiagramResult);

        const obj = {
          num: res?.columnDiagramResult?.num?.filter(item => item?.lineName === selectedName),
          rate: res?.columnDiagramResult?.rate?.filter(item => item?.lineName === selectedName),
        };

        setEchartData(() => {
          return {
            xAxis: {
              name: "",
              type: "category",
              axisTick: { show: false },
              data: obj.num?.[0]?.xdata,
            },
            yAxis: {
              name: "人数",
            },
            tooltip: {
              show: true,
            },
            yChartData: [
              {
                name: '人数',
                data: obj.num?.[0]?.data
              }
            ]
          }
        });
        setEchartData4(() => {
          return {
            xAxis: {
              name: "",
              type: "category",
              axisTick: { show: false },
              data: obj.rate?.[0]?.xdata,
            },
            yAxis: {
              name: "人数占比",
            },
            tooltip: {
              show: true,
            },
            yChartData: [
              {
                name: '人数占比',
                data: obj.rate?.[0]?.data
              }
            ]
          }
        });
      }
      setLoading(false);
    } catch (error) {
      setLoading(false);
      console.log(error, 'paramsInit-error');

    }
  };


  const getSubjectListCombineListInit = async () => {
    try {
      const res = await getSubjectListCombineList();
      if (res?.code === 200) {
        setSubjectId3(res?.data?.[0]?.id || '');
        setSelectValue(res?.data?.[0]?.cname || '');
        setCombineList(() => {
          return res?.data?.map(item => {
            return {
              label: item?.cname,
              value: item?.id
            }
          })
        })
      }

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

    }
  };


  const combinationInit = async () => {

    setLoading1(true);
    try {
      const res = await getCombinationDistribution(params1);

      if (res?.code === 200) {
        setLoading1(false);
        setResponseData2(res);
        setExpandedKeys1([res?.data?.[0]?.id,res?.data?.[0]?.children?.[0]?.id]);
        setDataSource1(res?.data || []);
        setColumns1(() => {
          return res?.columns?.map(item => {
            return {
              title: item?.label,
              dataIndex: item?.prop,
              align: "center",
              width: 150,
              sorter: item?.sortable ? (a, b) => a[item?.prop] - b[item?.prop] : false,
              children: item?.children?.map(element => {
                return {
                  title: element?.label,
                  dataIndex: element?.prop,
                  align: "center",
                  width: 160,
                  sorter: element?.sortable ? (a, b) => a[element?.prop] - b[element?.prop] : false
                }
              })
            }
          });
        });
        if (!res?.columnDiagramResult || !res?.columnDiagramResult?.num?.length > 0 || !res?.columnDiagramResult?.rate?.length > 0) {
          return;
        }

        const selectedName = res?.columnDiagramResult?.num?.map(item => item?.lineName)[0];
        setNavTags1(res?.columnDiagramResult?.num?.map(item => item?.lineName));
        setSelectedNavTag1(selectedName);
        setLengButton1(['人数', '人数占比']);
        setSelectTag3('人数');
        setAllEchartData1(res?.columnDiagramResult);
      }

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

    }

  };

  const selectedDistributionInit = async () => {
    setLoading2(true);
    try {
      const res = await getSelectedDistribution({
        ...params2,
        subjectId: subjectId2
      });
      if (res?.code === 200) {
        setLoading2(false);
        setResponseData3(res);
        setExpandedKeys2([res?.data?.[0]?.id,res?.data?.[0]?.children?.[0]?.id]);
        setDataSource2(res?.data || []);
        setColumns2(() => {
          return res?.columns?.map(item => {
            return {
              title: item?.label,
              dataIndex: item?.prop,
              align: "center",
              sorter: item?.sortable ? (a, b) => a[item?.prop] - b[item?.prop] : false
            }
          })
        });
        if (!res?.columnDiagramResult?.avg?.length) {
          return;
        }
        setLengButton2(res?.columnDiagramResult?.avg?.map(item => item?.lineName));
        setEchartData2(() => {
          return {
            xAxis: {
              name: "",
              type: "category",
              axisTick: { show: false },
              data: res?.columnDiagramResult?.avg?.[0]?.xdata,
            },
            yAxis: {
              name: '',
            },
            tooltip: {
              show: true,
            },
            yChartData: res?.columnDiagramResult?.avg?.map(item => {
              return {
                name: item?.lineName,
                data: item?.data
              }
            })
          }
        });
      }
      setLoading2(false);
    } catch (error) {
      setLoading2(false);
      console.log(error, 'littleQuestionInit-error');

    }
  };


  const assignDistributionInit = async () => {
    setLoading3(true);
    try {
      const res = await getAssignDistribution({
        ...params3,
        subjectId: subjectId3
      });
      if (res?.code === 200) {
        setLoading3(false);
        setResponseData4(res);
        setExpandedKeys3([res?.data?.[0]?.id,res?.data?.[0]?.children?.[0]?.id]);
        setDataSource3(res?.data || []);
        setColumns3(() => {
          return res?.columns?.map(item => {
            return {
              title: item?.label,
              dataIndex: item?.prop,
              align: "center",
              width: 150,
              children: item?.children?.map(element => {
                return {
                  title: element?.label,
                  dataIndex: element?.prop,
                  align: "center",
                  width: 140,
                  sorter: (a, b) => a[element?.prop] - b[element?.prop],
                }
              })
            }
          })
        });
        if (!res?.columnDiagramResult || !res?.columnDiagramResult?.num?.length > 0 || !res?.columnDiagramResult?.rate?.length > 0) {
          return;
        }
        const selectedName = res?.columnDiagramResult?.num?.map(item => item?.lineName)[0];
        setNavTags2(res?.columnDiagramResult?.num?.map(item => item?.lineName));
        setSelectedNavTag2(selectedName);
        setLengButton3(['人数', '人数占比', '累计人数', '累计人数占比']);
        setAllEchartData2(res?.columnDiagramResult);
        const obj = {
          num: res?.columnDiagramResult?.num?.filter(item => item?.lineName === selectedName),
          rate: res?.columnDiagramResult?.rate?.filter(item => item?.lineName === selectedName),
          numCumulative: res?.columnDiagramResult?.numCumulative?.filter(item => item?.lineName === selectedName),
          rateCumulative: res?.columnDiagramResult?.rateCumulative?.filter(item => item?.lineName === selectedName),
        };

        setSelectTag2('人数');

        ['num', 'rate', 'numCumulative', 'rateCumulative'].forEach(key => {
          obj[key].forEach(item => {
            // 创建临时存储容器
            const filtered = [];

            // 同步过滤 data 和 xdata
            item.data.forEach((value, index) => {
              if (value !== 0) {
                filtered.push({
                  data: value,
                  x: item.xdata[index]
                });
              }
            });

            // 更新原数组
            item.data = filtered.map(e => e.data);
            item.xdata = filtered.map(e => e.x);
          });
        });

        setEchartData3(() => {
          return {
            xAxis: {
              name: "",
              type: "category",
              axisTick: { show: false },
              data: obj.num?.[0]?.xdata,
            },
            yAxis: {
              name: "人数",
            },
            tooltip: {
              show: true,
            },
            yChartData: [
              {
                name: '人数',
                data: obj.num?.[0]?.data
              }
            ]
          }
        });
      }
      setLoading3(false);
    } catch (error) {
      setLoading3(false);
      console.log(error, 'littleQuestionInit-error');

    }
  };






  ////////////////////////////
  //展开表格行
  const expandableConfig = {
    expandedRowKeys: expandedKeys,
    defaultExpandedRowKeys: [dataSource?.[0]?.id,dataSource?.[0]?.children?.[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,dataSource1?.[0]?.children?.[0]?.id],
    onExpand: (expanded, record) => {
      if (expanded) {
        setExpandedKeys1([...expandedKeys1, record.id]);
      } else {
        setExpandedKeys1(expandedKeys1.filter((k) => k !== record.id));
      }
    },
  };

  const expandableConfig2 = {
    expandedRowKeys: expandedKeys2,
    defaultExpandedRowKeys: [dataSource2?.[0]?.id,dataSource2?.[0]?.children?.[0]?.id],
    onExpand: (expanded, record) => {
      if (expanded) {
        setExpandedKeys2([...expandedKeys2, record.id]);
      } else {
        setExpandedKeys2(expandedKeys2.filter((k) => k !== record.id));
      }
    },
  };

  const expandableConfig3 = {
    expandedRowKeys: expandedKeys3,
    defaultExpandedRowKeys: [dataSource3?.[0]?.id,dataSource3?.[0]?.children?.[0]?.id],
    onExpand: (expanded, record) => {
      if (expanded) {
        setExpandedKeys3([...expandedKeys3, record.id]);
      } else {
        setExpandedKeys3(expandedKeys3.filter((k) => k !== record.id));
      }
    },
  };

  const tableCommonProps = {
    style: { maxHeight: 460,},
    rowKey: "id",
    scroll: { x: 1400,y:340 },
    sticky: true,
    pagination: false,
  };




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


    setSubjectId2(tag?.id || '');

  };


  const handleDownload1 = async () => {
    try {
      const res = await downloadTableData(responseData1);
      if (res?.status === 200) {
        downloadExcelFile(res, `${subtitle}*考试选考科目分布分析`);
      }

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

    }
  };
  const handleDownload2 = async () => {
    try {
      const res = await downloadTableData(responseData2);
      if (res?.status === 200) {
        downloadExcelFile(res, `${subtitle1}*考试选考组合分布分析`);
      }

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

    }
  };
  const handleDownload3 = async () => {
    try {
      const res = await downloadTableData(responseData3);
      if (res?.status === 200) {
        downloadExcelFile(res, `${subtitle2}*${selectedTag}*考试选考组合分布分析`);
      }

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

    }
  };
  const handleDownload4 = async () => {
    try {
      const res = await downloadTableData(responseData4);
      if (res?.status === 200) {
        downloadExcelFile(res, `${subtitle3}*${selectValue}*考试选考赋分分析`);
      }

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

    }
  };

  ///////////////////////////////
  return (
    <div style={{ padding: 20 }}>
      {
        <ScreenPage
          isTeacher={true}
          isShow={isShow}
          isShowSubject={false}
          onChange={(e) => {
            setSubtitle([e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name].filter(item => !!item).join("*"));
            setParams({
              examId: e?.examId,
              schools: e?.currentSchool?.[0]?.schoolList?.map(item => item?.id) || e?.currentSchool?.map(item => item?.id),
            })
          }}
          saveshow={(e) => {
            setIsShow(e);
          }}
        />
      }
      {/* 标题 */}
      <Flex
        style={{
          display: "flex",
          alignItems: "center",
          margin: "20px 0",
          gap: 12,
        }}
        justify="space-betweens"
        alignItems="center"
      >
        <Flex style={{ flex: 1 }} alignItems="center">
          <Flex
            style={{
              display: "flex",
              alignItems: "center",
              color: "#8a8a8a",
            }}
          >
            当前考试选考科目分布分析 : &nbsp;
            <h3
              style={{
                color: "black",
              }}
            >
              {subtitle}
            </h3>
          </Flex>
        </Flex>
        <Flex
          style={{
            padding: "4px 8px",
            border: "1px solid #666",
            borderRadius: 5,
            cursor: "pointer",
          }}
          alignItems="center"
          onClick={() => {
            setIsShow(!isShow);
          }}
        >
          选择考试和学校
          <img
            src={isShow ? upSrc : downSrc}
            width={14}
            height={12}
            style={{ marginLeft: 5 }}
          />
        </Flex>
      </Flex>
      {/* 表格 */}
      {!tableIsShow ? (
        <Table
          {...tableCommonProps}
          dataSource={dataSource}
          columns={columns}
          loading={loading}
          rowKey="id"
          expandable={expandableConfig}

        >
        </Table>
      ) : (
        <section>
          <Space style={{ marginBottom: 8 }}>
            {navTags?.map((item, index) => {
              return (
                <Button
                  key={index}
                  type={item === selectedNavTag ? 'primary' : 'default'}
                  size="small"
                  onClick={() => {
                    setSelectedNavTag(item);
                  }}
                >
                  {item}
                </Button>
              )
            })}
          </Space>
          <Spin spinning={loading}>
            {lengButton?.length > 0 ? (
              <Space>
                {lengButton?.map((item, index) => {
                  return (
                    <Button
                      key={index}
                      type={item === selectTag ? 'primary' : 'default'}
                      size="small"
                      onClick={() => {
                        setSelectTag(item);
                      }}
                    >
                      {item}
                    </Button>
                  )
                })}
              </Space>

            ) : null}
            {selectTag === '人数' ? (<Echarts
              isShow={false}
              data={echartData}
              type='bar'
              text={`考试选考科目分布分析*${subtitle}*${selectedNavTag}*人数`}
              lengButton={['人数']}
              onTableClick={(e) => {
                setTableIsShow(false);
              }}
            />) : null}
            {selectTag === '人数占比' ? (<Echarts
              isShow={false}
              type={"bar"}
              data={echartData4}
              text={`考试选考科目分布分析*${subtitle}*${selectedNavTag}*人数占比`}
              lengButton={['人数占比']}
              onTableClick={(e) => {
                setTableIsShow(false);
              }}
            />) : null}
          </Spin>
        </section>
      )}
      {!tableIsShow && (
        <Flex style={{ marginTop: 8 }}>
          <Button
            type="primary"
            style={{ marginRight: 10, margintop: 10 }}
            onClick={handleDownload1}
          >
            导出表格
          </Button>
          <Button
            type="primary"
            onClick={() => {
              //关闭图表
              setTableIsShow(true);
            }}
          >
            显示为图表
          </Button>
        </Flex>
      )}
      {/* 第二个表格 */}
      <ScreenPage
        isTeacher={true}
        isShowSubject={false}
        isShow={isShow1}
        onChange={(e) => {
          setSubtitle1([e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name].filter(item => !!item).join("*"));
          setParams1({
            examId: e?.examId,
            schools: e?.currentSchool?.[0]?.schoolList?.map(item => item?.id) || e?.currentSchool?.map(item => item?.id),
          })
        }}
        saveshow={(e) => {
          setIsShow1(e);
        }}
      />
      <Flex
        style={{
          display: "flex",
          alignItems: "center",
          margin: "20px 0",
          gap: 12,
        }}
        justify="space-betweens"
        alignItems="center"
      >
        <Flex style={{ flex: 1 }} alignItems="center">
          <Flex
            style={{
              display: "flex",
              alignItems: "center",
              color: "#8a8a8a",
            }}
          >
            当前考试选考组合分布分析 : &nbsp;
            <h3
              style={{
                color: "black",
              }}
            >
              {subtitle1}
            </h3>
          </Flex>
        </Flex>
        <Flex
          style={{
            padding: "4px 8px",
            border: "1px solid #666",
            borderRadius: 5,
            cursor: "pointer",
          }}
          alignItems="center"
          onClick={() => {
            setIsShow1(!isShow1);
          }}
        >
          选择考试和学校
          <img
            src={isShow1 ? upSrc : downSrc}
            width={14}
            height={12}
            style={{ marginLeft: 5 }}
          />
        </Flex>
      </Flex>
      {/* 表格 */}
      {!tableIsShow1 ? (
        <Table
          {...tableCommonProps}
          dataSource={dataSource1}
          columns={columns1}
          loading={loading1}
          rowKey="id"
          expandable={expandableConfig1}
        >
        </Table>
      ) : (
        <section>

          <Space style={{ marginBottom: 8 }}>
            {navTags1?.map((item, index) => {
              return (
                <Button
                  key={index}
                  type={item === selectedNavTag1 ? 'primary' : 'default'}
                  size="small"
                  onClick={() => {
                    setSelectedNavTag1(item);
                  }}
                >
                  {item}
                </Button>
              )
            })}
          </Space>
          <Spin spinning={loading1}>

          {lengButton1?.length > 0 ? (
              <Space>
                {lengButton1?.map((item, index) => {
                  return (
                    <Button
                      key={index}
                      type={item === selectTag3 ? 'primary' : 'default'}
                      size="small"
                      onClick={() => {
                        setSelectTag3(item);
                      }}
                    >
                      {item}
                    </Button>
                  )
                })}
              </Space>

            ) : null}
            {selectTag3 === '人数' ? (<Echarts
              isShow={false}
              data={echartData1}
              type='bar'
              text={`考试选考组合分布分析*${subtitle1}*${selectedNavTag1}*人数`}
              lengButton={['人数']}
              onTableClick={(e) => {
                setTableIsShow1(false);
              }}
            />) : null}
            {selectTag3 === '人数占比' ? (<Echarts
              isShow={false}
              type={"bar"}
              data={echartData5}
              text={`考试选考组合分布分析*${subtitle1}*${selectedNavTag1}*人数占比`}
              lengButton={['人数占比']}
              onTableClick={(e) => {
                setTableIsShow1(false);
              }}
            />) : null}
          </Spin>

        </section>

      )}
      {!tableIsShow1 && (
        <Flex style={{ marginTop: 8 }}>
          <Button
            type="primary"
            style={{ marginRight: 10 }}
            onClick={handleDownload2}
          >
            导出表格
          </Button>
          <Button
            type="primary"
            onClick={() => {
              //关闭图表
              setTableIsShow1(true);
            }}
          >
            显示为图表
          </Button>
        </Flex>
      )}
      {/* 第三个表格 */}
      <ScreenPage
        isTeacher={true}
        isShowSubject={false}
        isShow={isShow2}
        onChange={(e) => {
          setSubtitle2([e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name].filter(item => !!item).join("*"));
          setParams2({
            examId: e?.examId,
            schools: e?.currentSchool?.[0]?.schoolList?.map(item => item?.id) || e?.currentSchool?.map(item => item?.id),
          })
        }}
        saveshow={(e) => {
          setIsShow2(e);
        }}
      />
      <Flex
        style={{
          display: "flex",
          alignItems: "center",
          margin: "20px 0",
          gap: 12,
        }}
        justify="space-betweens"
        alignItems="center"
      >
        <Flex style={{ flex: 1 }} alignItems="center">
          <Flex
            style={{
              display: "flex",
              alignItems: "center",
              color: "#8a8a8a",
            }}
          >
            当前考试选考组合分析 : &nbsp;
            <h3
              style={{
                color: "black",
              }}
            >
              {subtitle2}
            </h3>
          </Flex>
        </Flex>

        <Flex
          style={{
            padding: "4px 8px",
            border: "1px solid #666",
            borderRadius: 5,
            cursor: "pointer",
          }}
          alignItems="center"
          onClick={() => {
            setIsShow2(!isShow2);
          }}
        >
          选择考试和学校
          <img
            src={isShow2 ? upSrc : downSrc}
            width={14}
            height={12}
            style={{ marginLeft: 5 }}
          />
        </Flex>
      </Flex>
      <section style={{ width: '100%', marginBottom: 8 }}>
        <Space>
          {tags.length > 0 ? (
            tags.map((item, index) => {
              const isSelected = selectedTag === item?.cname;
              return (
                <Tag
                  onClick={() => handleNavTagClick(item)}
                  color={isSelected ? 'green' : 'default'}
                  key={index}
                  style={{
                    cursor: 'pointer',
                  }}
                >
                  {item?.cname}
                </Tag>
              );
            })
          ) : null}
        </Space>
      </section>
      {/* 表格 */}
      {!tableIsShow2 ? (
        <Table

          {...tableCommonProps}
          dataSource={dataSource2}
          rowKey="id"
          expandable={expandableConfig2}
          columns={columns2}
          loading={loading2}
        >
        </Table>
      ) : (
        <Spin spinning={loading2}>
          <Echarts
            data={echartData2}
            text={`考试选考组合分析*${subtitle2}*${selectedTag}`}
            type={"bar"}
            lengButton={lengButton2}
            onTableClick={(e) => {
              setTableIsShow2(false);
            }}
          />
        </Spin>

      )}

      {!tableIsShow2 && (
        <Flex style={{ marginTop: 8 }}>
          <Button
            type="primary"
            style={{ marginRight: 10 }}
            onClick={handleDownload3}
          >
            导出表格
          </Button>
          <Button
            type="primary"
            onClick={() => {
              //关闭图表
              setTableIsShow2(true);
            }}
          >
            显示为图表
          </Button>
        </Flex>
      )}
      {/* 第四个表格 */}
      <ScreenPage
        isTeacher={true}
        isShowSubject={false}
        isShow={isShow3}
        onChange={(e) => {
          setSubtitle3([e?.currentGrade?.[0]?.name, e?.currentSemester?.[0]?.name, e?.currentExamination?.[0]?.name].filter(item => !!item).join("*"));
          setParams3({
            examId: e?.examId,
            schools: e?.currentSchool?.[0]?.schoolList?.map(item => item?.id) || e?.currentSchool?.map(item => item?.id),
          })
        }}
        saveshow={(e) => {
          setIsShow3(e);
        }}
      />
      <Flex
        style={{
          display: "flex",
          alignItems: "center",
          margin: "20px 0",
          gap: 12,
        }}
        justify="space-betweens"
        alignItems="center"
      >
        <Flex style={{ flex: 1 }} alignItems="center">
          <Flex
            style={{
              display: "flex",
              alignItems: "center",
              color: "#8a8a8a",
            }}
          >
            当前考试选考赋分分析 : &nbsp;
            <h3
              style={{
                color: "black",
              }}
            >
              {subtitle3}
            </h3>
            <Select
              placeholder="请选择学科"
              options={combineList}
              style={{ marginLeft: 20, width: "120px" }}
              value={selectValue}
              onChange={(value, option) => {
                if (!value) {
                  return;
                }
                setSelectValue(option?.label);
                setSubjectId3(value);
              }}
            />
          </Flex>
        </Flex>
        <Flex
          style={{
            padding: "4px 8px",
            border: "1px solid #666",
            borderRadius: 5,
            cursor: "pointer",
          }}
          alignItems="center"
          onClick={() => {
            setIsShow3(!isShow3);
          }}
        >
          选择考试和学校
          <img
            src={isShow3 ? upSrc : downSrc}
            width={14}
            height={12}
            style={{ marginLeft: 5 }}
          />
        </Flex>
      </Flex>
      {/* 表格 */}
      {!tableIsShow3 ? (
        <Table

          {...tableCommonProps}
          dataSource={dataSource3}
          rowKey="id"
          sticky={true}
          expandable={expandableConfig3}
          columns={columns3}
          loading={loading3}
        >
        </Table>
      ) : (

        <section>

          <Space style={{ marginBottom: 8 }} wrap>
            {navTags2?.map((item, index) => {
              return (
                <Button
                  key={index}
                  type={item === selectedNavTag2 ? 'primary' : 'default'}
                  size="small"
                  onClick={() => {
                    setSelectedNavTag2(item);
                  }}
                >
                  {item}
                </Button>
              )
            })}

          </Space>
          <section style={{ marginBottom: 16 }}>
            <Space >
              {lengButton3?.map((item, index) => {
                return (
                  <Button
                    key={index}
                    type={item === selectTag2 ? 'primary' : 'default'}
                    size="small"
                    onClick={() => {
                      setSelectTag2(item);
                    }}
                  >
                    {item}
                  </Button>
                )
              })}
            </Space>
          </section>
          <Spin spinning={loading3}>
            <Echarts
              // isNoneTag={true}
              isShow={false}
              data={echartData3}
              type={computedChartType}
              text={`考试选考赋分分析*${subtitle3}*${selectValue}*${selectTag2}`}
              lengButton={[selectTag2]}
              onTableClick={(e) => {
                setTableIsShow3(false);
              }}
            />
          </Spin>
        </section>

      )}
      {!tableIsShow3 && (
        <Flex style={{ marginTop: 8 }}>
          <Button
            type="primary"
            style={{ marginRight: 10 }}
            onClick={handleDownload4}
          >
            导出表格
          </Button>
          <Button
            type="primary"
            onClick={() => {
              //关闭图表
              setTableIsShow3(true);
            }}
          >
            显示为图表
          </Button>
        </Flex>
      )}
      {visibleModal.open && (
        <StudentModal
          title="丽水中学1班学生群体"
          studentData={studentData}
          studentCol={studentCol}
          closeModal={() => {
            setVisibleModal({ open: false });
          }}
        />
      )}
    </div>
  );
};

export default StatisticsPage;
