import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { CloseOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { A2Left2Type } from "@/types";
import { A2_APIgetKnowledge } from "@/store/action/A2Main";
import Tab5Info from "../Tab5Info";

type Props = {
  closeFu: () => void;
  type: string;
};

function Tab4S4({ closeFu, type }: Props) {
  const [list, setList] = useState<A2Left2Type[]>([]);

  // 第一次不显示暂无信息
  const [flagOne, setFlagOne] = useState(false);

  const getListFu = useCallback(async (type: string) => {
    const res = await A2_APIgetKnowledge(type);
    if (res.code === 0) {
      setFlagOne(true);

      const obj: any = res.data;
      const arr: any = [];
      for (const k in obj) {
        arr.push({
          name: k,
          arr: obj[k],
        });
      }
      setList(arr);
    }
  }, []);

  useEffect(() => {
    getListFu(type);
  }, [getListFu, type]);

  // 打开知识页面的 id

  const [knowId, setKnowId] = useState(0);

  return (
    <div className={styles.Tab4S4}>
      <div className="tab4S4main">
        {/* 关闭按钮 */}
        <div className="tab4S4close" onClick={closeFu}>
          <CloseOutlined />
        </div>
        <div className="tab4S4Top">知识</div>

        {list.length ? (
          <div className="tab4S4cen myscroll">
            {list.map((v) => (
              <div className="left2Box" key={v.name}>
                <div className="left2Name">{v.name}：</div>
                <div className="left2RowAll">
                  {v.arr.map((v2) => (
                    <div
                      className="left2Row"
                      key={v2.id}
                      onClick={() => setKnowId(v2.id)}
                    >
                      {v2.name}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="left2Null" hidden={!flagOne}>
            暂无更多内容
          </div>
        )}

        {/* 退出按钮 */}
        <div className="tab4S4xBtn" hidden={!flagOne} onClick={closeFu}>
          <Button>关闭</Button>
        </div>
      </div>

      {/* 点击知识 打开 tab5的知识详情页 */}
      {knowId ? <Tab5Info sId={knowId} closeFu={() => setKnowId(0)} /> : null}
    </div>
  );
}

const MemoTab4S4 = React.memo(Tab4S4);

export default MemoTab4S4;
