import { useState, useEffect, memo } from "react";
import Flex from "@/components/Flex";
import { Table, Button, Modal } from "antd";
import {
  studentEchartData,
  studentScoreData,
  topicScoreData,
  pointsScoreData,
  topicScoreDataEchart,
  pointsScoreDataEchart,
  studyForwardDataCol,
  studyForwardData,
} from "../../../mock/tableData";
import ScreenPage from "@/components/ScreenPage";
import Echarts from "@/components/Echarts";
import { TableTitle, TableSection } from "../TableTitle";
import "./index.less";
import Common from "@/utils/Common";
const { Column, ColumnGroup } = Table;
const StudentModal = ({
  closeModal = () => {},
  title = "",
  studentData = [],
  studentCol = [],
}) => {
  const [studentDatas, setStudentDatas] = useState([...studentCol]);
  const [analysisModal, setAnalysisModal] = useState({ open: false }); //学生弹窗
  const [showSearch, setShowSearch] = useState(); //筛选框
  const [changeTable, setChangeTable] = useState({
    SCORE_WALK: true,
    QUESTIONS: true,
    KNOWLEDGE_POINTS: true,
  });

  const [titles, setTitles] = useState({
    SCORE_WALK: "2027届*高一上*入学考试",
    SCORE_BOOK: "2027届*高一上*入学考试",
    QUESTIONS: "2027届*高一上*入学考试",
    KNOWLEDGE_POINTS: "2027届*高一上*入学考试",
  });

  // 表格配置
  const fixedColumns = [
    {
      title: "学生姓名",
      dataIndex: "studentName",
      key: "studentName",
      fixed: "left",
      width: 80,
      render: (text, record) => (
        <div
          style={{
            color: "#3eb463",
            cursor: "pointer",
          }}
          onClick={() => {
            setAnalysisModal({ open: true });
          }}
        >
          {text}
        </div>
      ),
    },
  ];

  const fixedColumns2 = [
    {
      title: "考试时间",
      dataIndex: "time",
      key: "time",
      fixed: "left",
      width: 50,
    },
    {
      title: "考试名称",
      dataIndex: "name",
      key: "name",
      fixed: "left",
      width: 90,
    },
  ];
  // 表格配置
  const tableCommonProps = {
    style: { height: 460, overflow: "auto" },
    rowKey: "id",
    scroll: { x: 1500 },
    sticky: true,
  };
  // 表格配置
  const renderDynamicColumns = (student) => {
    return student.map((item) => (
      <ColumnGroup key={item.num} title={item.title}>
        <Column
          title="分数"
          dataIndex={`${item.num}Num`}
          key={`${item.num}Num`}
          width={60}
          align="center"
          sorter={(a, b) => {
            const rankingA = a[`${item.num}Num`];
            const rankingB = b[`${item.num}Num`];
            return rankingA - rankingB;
          }}
        />
        <Column
          title="排名"
          dataIndex={`${item.num}Ranking`}
          key={`${item.num}Ranking`}
          width={60}
          align="center"
          sorter={(a, b) => {
            const rankingA = a[`${item.num}Ranking`];
            const rankingB = b[`${item.num}Ranking`];
            return rankingA - rankingB;
          }}
        />
      </ColumnGroup>
    ));
  };

  // 添加切换显示状态的处理函数
  const toggleTableView = (tableKey) => {
    setChangeTable((prev) => ({
      ...prev,
      [tableKey]: !prev[tableKey],
    }));
  };

  /**
   * singleTable 配置
   */
  const TABLE_CONFIG = {
    SCORE_BOOK: {
      title: "学生成绩册",
      columns: [
        {
          title: "学科",
          dataIndex: "class",
          key: "class",
          width: 80,
          render: (val) => (val ? val : "-"),
        },
        {
          title: "赋分等第",
          dataIndex: "endowment",
          key: "endowment",
          width: 80,
          render: (val) => (val ? val : "-"),
          sorter: (a, b) => {
            const rankingA = a["endowment"];
            const rankingB = b["endowment"];
            return rankingA - rankingB;
          },
        },
        {
          title: "得分",
          dataIndex: "score",
          key: "score",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["score"];
            const rankingB = b["score"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "全市均分",
          dataIndex: "cityAverage",
          key: "cityAverage",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["cityAverage"];
            const rankingB = b["cityAverage"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "全市排名",
          dataIndex: "cityRanking",
          key: "cityRanking",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["cityRanking"];
            const rankingB = b["cityRanking"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "区县均分",
          dataIndex: "districtAverage",
          key: "districtAverage",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["districtAverage"];
            const rankingB = b["districtAverage"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "区县排名",
          dataIndex: "districtRanking",
          key: "districtRanking",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["districtRanking"];
            const rankingB = b["districtRanking"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "学校均分",
          dataIndex: "schoolAverage",
          key: "schoolAverage",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["schoolAverage"];
            const rankingB = b["schoolAverage"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "学校排名",
          dataIndex: "schoolRanking",
          key: "schoolRanking",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["schoolRanking"];
            const rankingB = b["schoolRanking"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "班级均分",
          dataIndex: "classAverage",
          key: "classAverage",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["classAverage"];
            const rankingB = b["classAverage"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "班级排名",
          dataIndex: "classRanking",
          key: "classRanking",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["classRanking"];
            const rankingB = b["classRanking"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
      ],
      dataSource: studentScoreData,
      echartDatas: [],
      options: ["个人得分率", "学校得分率", "区县得分率", "全市得分率"],
    },

    QUESTIONS: {
      title: "各小题情况",
      columns: [
        {
          title: "题目",
          dataIndex: "topic",
          key: "topic",
          width: 80,
          render: (val) => (val ? val : "-"),
        },
        {
          title: "满分分值",
          dataIndex: "fullMarks",
          key: "fullMarks",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["fullMarks"];
            const rankingB = b["fullMarks"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "得分",
          dataIndex: "score",
          key: "score",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["score"];
            const rankingB = b["score"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "个人得分率(%)",
          dataIndex: "selfScore",
          key: "selfScore",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["selfScore"];
            const rankingB = b["selfScore"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "学校得分率(%)",
          dataIndex: "schoolScore",
          key: "schoolScore",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["schoolScore"];
            const rankingB = b["schoolScore"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "区县得分率(%)",
          dataIndex: "districtScore",
          key: "districtScore",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["districtScore"];
            const rankingB = b["districtScore"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "全市得分率(%)",
          dataIndex: "cityScore",
          key: "cityScore",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["cityScore"];
            const rankingB = b["cityScore"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
      ],
      dataSource: topicScoreData,
      echartDatas: topicScoreDataEchart,
      options: ["个人得分率", "学校得分率", "区县得分率", "全市得分率"],
    },

    KNOWLEDGE_POINTS: {
      title: "知识点情况",
      columns: [
        {
          title: "知识点",
          dataIndex: "points",
          key: "points",
          width: 80,
          render: (val) => (val ? val : "-"),
        },
        {
          title: "对应题号",
          dataIndex: "number",
          key: "number",
          width: 80,
          render: (val) => (val ? val : "-"),
        },
        {
          title: "满分分值",
          dataIndex: "fullMarks",
          key: "fullMarks",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["fullMarks"];
            const rankingB = b["fullMarks"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "得分",
          dataIndex: "score",
          key: "score",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["score"];
            const rankingB = b["score"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "个人得分率(%)",
          dataIndex: "selfScore",
          key: "selfScore",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["selfScore"];
            const rankingB = b["selfScore"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "学校得分率(%)",
          dataIndex: "schoolScore",
          key: "schoolScore",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["schoolScore"];
            const rankingB = b["schoolScore"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "区县得分率(%)",
          dataIndex: "districtScore",
          key: "districtScore",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["districtScore"];
            const rankingB = b["districtScore"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
        {
          title: "全市得分率(%)",
          dataIndex: "cityScore",
          key: "cityScore",
          width: 80,
          sorter: (a, b) => {
            const rankingA = a["cityScore"];
            const rankingB = b["cityScore"];
            return rankingA - rankingB;
          },
          render: (val) => (val ? val : "-"),
        },
      ],
      dataSource: pointsScoreData,
      echartDatas: pointsScoreDataEchart,
      options: ["个人得分率", "学校得分率", "区县得分率", "全市得分率"],
    },
  };
  const singleTable = (student) => {
    return (
      <>
        {Object.entries(TABLE_CONFIG).map(([key, config]) => {
          const { title, columns, dataSource, echartDatas, options } = config;
          const isShowTable = changeTable[key];
          return (
            <div key={key}>
              <TableTitle
                title={title}
                hasClass={key == "QUESTIONS" || key == "KNOWLEDGE_POINTS"}
                subtitle={titles[key]}
              />

              {isShowTable || title == "学生成绩册" ? (
                <TableSection
                  columns={columns}
                  dataSource={dataSource}
                  onExport={() => {}}
                  onShowChart={() => toggleTableView(key)}
                  hasCharts={title !== "学生成绩册"}
                />
              ) : (
                title !== "学生成绩册" && (
                  <>
                    <Echarts
                      data={echartDatas}
                      type="line"
                      lengButton={options}
                      onTableClick={() => toggleTableView(key)}
                    />
                    <Echarts
                      data={echartDatas}
                      type="radar"
                      lengButton={options}
                      onTableClick={() => toggleTableView(key)}
                    />
                  </>
                )
              )}
            </div>
          );
        })}
      </>
    );
  };
  return (
    <Flex>
      <Modal
        title={title}
        width={1200}
        open={true}
        onCancel={() => {
          closeModal(false);
        }}
        onOk={() => {
          closeModal(false);
        }}
      >
        <Table
          {...tableCommonProps}
          dataSource={studentData}
          pagination={false}
        >
          {fixedColumns.map((col) => (
            <Column {...col} key={col.key} />
          ))}
          {renderDynamicColumns(studentDatas)}
        </Table>
      </Modal>

      {/* 学生成长性弹窗 */}
      {analysisModal.open && (
        <Modal
          title={`学生成长性 : ${title}`}
          width={1200}
          open={true}
          className="custom-modal"
          onCancel={() => {
            setAnalysisModal({ open: false });
          }}
          onOk={() => {
            setAnalysisModal({ open: false });
          }}
        >
          {showSearch && (
            <ScreenPage
              isShow={showSearch}
              isSingle={false}
              onChange={(val) => {}}
            />
          )}
          {/* 标题 */}
          <TableTitle
            title={"学情跟踪"}
            subtitle={titles.SCORE_WALK}
            isTags={true}
            // onSearchClick={() => {
            //   setShowSearch(!showSearch);
            // }}
          />
          {changeTable.SCORE_WALK ? (
            <div style={{ overflow: "auto", height: 520, marginBottom: 30 }}>
              <Table
                {...tableCommonProps}
                scroll={{ x: 900 }}
                dataSource={studyForwardData}
                pagination={false}
              >
                {fixedColumns2.map((col) => (
                  <Column {...col} key={col.key} />
                ))}
                {renderDynamicColumns(studyForwardDataCol)}
              </Table>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  marginTop: 20,
                }}
              >
                <Flex>
                  <Button
                    type="primary"
                    style={{ marginRight: 20 }}
                    onClick={() => {
                      Common.uploadFile();
                    }}
                  >
                    导出表格
                  </Button>
                  <Button
                    type="primary"
                    style={{ marginRight: 20 }}
                    onClick={() => toggleTableView("SCORE_WALK")}
                  >
                    显示为图表
                  </Button>
                </Flex>
              </div>
            </div>
          ) : (
            <Echarts
              data={studentEchartData}
              lengButton={["总分", "各个单科", "排名", "成绩"]}
              onTableClick={() => toggleTableView("SCORE_WALK")}
            />
          )}
          {singleTable()}
        </Modal>
      )}
    </Flex>
  );
};

export default StudentModal;
