/* eslint-disable jsx-a11y/iframe-has-title */
import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { A2_APItab5Info } from "@/store/action/A2Main";
import classNames from "classnames";
import { Spin } from "antd";
import { LeftOutlined } from "@ant-design/icons";

type ListType = {
  id: string;
  name: string;
  flag?: boolean;
  children?: ListType[];
};

type Props = {
  sId: string;
  closeFu: () => void;
  isOpen?: boolean;
  title?: string;
};

function Tab5Info({ sId, closeFu, isOpen, title }: Props) {
  // 顶部的标题
  const [titleTxt, setTieleTxt] = useState("");

  const [data, setData] = useState([] as ListType[]);

  const getInfoFu = useCallback(async () => {
    const res = await A2_APItab5Info(sId);
    if (res.code === 0) {
      let tempArr: any[] = [];

      if (res.data && res.data[0]) {
        // 顶部的标题
        setTieleTxt(res.data[0].text);
      }

      if (res.data && res.data[0] && res.data[0].channelChildren)
        tempArr = res.data[0].channelChildren;

      const arrRes: ListType[] = [];
      tempArr.forEach((v) => {
        const obj: ListType = {
          id: v.id,
          name: v.text,
          flag: v.flag,
          children: [],
        };
        if (v.children && v.children.length) {
          v.children.forEach((v2: any) => {
            obj.children!.push({
              id: v2.id,
              name: v2.text,
            });
          });
        }
        arrRes.push(obj);
      });

      setData(arrRes);
    }
  }, [sId]);

  useEffect(() => {
    getInfoFu();
  }, [getInfoFu]);

  // 选中的id
  const [acId, setAcId] = useState("");

  useEffect(() => {
    if (data[0]) {
      if (data[0].flag) {
        setAcId(data[0].id);
      } else if (data[0].children && data[0].children[0]) {
        setAcId(data[0].children[0].id);
      }
    }
  }, [data]);

  // 右边嵌套页面的加载loding
  const [isLoding, setIsLoding] = useState(true);

  useEffect(() => {
    setIsLoding(true);
  }, [acId]);

  return (
    <div className={styles.Tab5Info}>
      <div className="Tab5Info1">
        {/* 顶部的标题 */}
        <div className="Tab5Info1Title">{title ? title : titleTxt}</div>

        <div className="Tab5Info1Main myscroll">
          {data.map((v1) => (
            <div className="tab5Row" key={v1.id}>
              <div
                onClick={() => setAcId(v1.id)}
                className={classNames(
                  "tab5Row1",
                  !!v1.flag ? "tab5Row1Ac" : "",
                  acId === v1.id ? "tab5IsActive" : ""
                )}
              >
                {v1.name}
              </div>
              {v1.children && v1.children.length ? (
                <>
                  {v1.children.map((v2) => (
                    <div
                      onClick={() => setAcId(v2.id)}
                      className={classNames(
                        "tab5RowSon",
                        acId === v2.id ? "tab5IsActive" : ""
                      )}
                      key={v2.id}
                      title={v2.name}
                    >
                      {v2.name}
                    </div>
                  ))}
                </>
              ) : null}
            </div>
          ))}
        </div>
      </div>
      <div className="Tab5Info2">
        <div className="tab5Info2Loding" hidden={!isLoding}>
          <Spin size="large" />
        </div>

        {/* 遮挡原网址的 《 箭头 */}

        <div
          className={classNames(
            "Tab5Info2Left",
            isOpen ? "Tab5Info2LeftNo" : ""
          )}
          onClick={() => {
            if (isOpen) {
            } else closeFu();
          }}
        >
          <LeftOutlined hidden={isOpen} />
        </div>

        {acId ? (
          <iframe
            onLoad={() => setIsLoding(false)}
            key={acId}
            src={`/pc/knowInfo.html?sId=${acId}`}
            frameBorder="0"
          ></iframe>
        ) : null}
      </div>
    </div>
  );
}

const MemoTab5Info = React.memo(Tab5Info);

export default MemoTab5Info;
