import React, { useRef, useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import A7tab1 from "./A7table";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { MessageFu } from "@/utils/message";
import A7theme from "./A7theme";
import A7tab1M from "./A7tab1M";
import A7tab2M from "./A7tab2M";

const topArr: ("口述史" | "刊物")[] = ["口述史", "刊物"];

function A7school() {
  const [pageAc, setPageAc] = useState<"口述史" | "刊物">("口述史");

  const [openSon, setOpenSon] = useState(0);

  const { tableInfo1 } = useSelector((state: RootState) => state.A7school);

  // 采访主题
  const [theme, setTheme] = useState(false);

  // 2个表格的ref
  const tableRef1 = useRef<any>(null);
  const tableRef2 = useRef<any>(null);

  return (
    <div className={styles.A7school}>
      <div className="pageTitle">
        云学校管理 {theme ? " - 采访主题设置" : ""}
      </div>
      {/* 顶部筛选 */}
      <div className="A7top">
        <div>
          {topArr.map((v) => (
            <Button
              key={v}
              type={v === pageAc ? "primary" : "default"}
              onClick={() => {
                setOpenSon(0);
                setPageAc(v);
              }}
            >
              {v}
            </Button>
          ))}
        </div>
        <div>
          <Button
            type="primary"
            hidden={pageAc !== "口述史"}
            onClick={() => setTheme(true)}
          >
            采访主题设置
          </Button>
          &emsp;
          <Button
            type="primary"
            onClick={() => {
              if (pageAc === "口述史" && tableInfo1.list.length >= 100) {
                return MessageFu.warning("最多100条数据!");
              }
              setOpenSon(-1);
            }}
          >
            新增
          </Button>
        </div>
      </div>
      <div className="A7main">
        <div hidden={pageAc !== "口述史"}>
          <A7tab1
            type={"口述史"}
            editTableFu={(id) => setOpenSon(id)}
            ref={tableRef1}
          />
        </div>
        <div hidden={pageAc !== "刊物"}>
          <A7tab1
            type={"刊物"}
            editTableFu={(id) => setOpenSon(id)}
            ref={tableRef2}
          />
        </div>
      </div>

      {/* 采访主题 */}
      {theme ? <A7theme closeFu={() => setTheme(false)} /> : null}

      {/* 口述史 新增 编辑 */}
      {openSon && pageAc === "口述史" ? (
        <A7tab1M
          fId={openSon}
          closeFu={() => setOpenSon(0)}
          addTableFu={() => tableRef1.current.resetSelectFu()}
          upTableFu={() => tableRef1.current.getListFu()}
        />
      ) : null}

      {/* 刊物 新增 编辑 */}
      {openSon && pageAc === "刊物" ? (
        <A7tab2M
          fId={openSon}
          closeFu={() => setOpenSon(0)}
          addTableFu={() => tableRef2.current.resetSelectFu()}
          upTableFu={() => tableRef2.current.getListFu()}
        />
      ) : null}
    </div>
  );
}

const MemoA7school = React.memo(A7school);

export default MemoA7school;
