/* 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;
  link?: string;
  name: string;
  children?: ListType[];
};

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

function Tab5Info({ sId, closeFu, isOpen }: Props) {
  const [data, setData] = useState([] as ListType[]);

  const getInfoFu = useCallback(async () => {
    const res = await A2_APItab5Info(sId);
    if (res.code === 0) {
      // 先写一个假数据
      const cccc = [
        {
          id: "1",
          name: "一级1",
          children: [
            {
              id: "1.1",
              name: "二级1",
              link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=e344faaa650d11e6937300155d00887d",
            },
            {
              id: "1.2",
              name: "二级2",
              link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=8310a930650f11e6937300155d00887d",
            },
          ],
        },
        {
          id: "2",
          name: "一级2",
          link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=7bace6705f9211e6937300155d00887d",
          children: [
            {
              id: "2.1",
              name: "二级2222",
              link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=a40567d6650f11e6937300155d00887d",
            },
            {
              id: "2.2",
              name: "二级2222-222",
              link: "http://app.ypzz.cn:8001/weixin/getCmsArticleDetail.htm?item.id=ba4c71f2650f11e6937300155d00887d",
            },
          ],
        },
      ];
      setData(cccc);
    }
  }, [sId]);

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

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

  // 选中的 嵌套网页
  const [waiUrl, setWaiUrl] = useState("");

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

  // 切换url
  const cutAcFu = useCallback((id: string, url?: string) => {
    if (url) {
      setAcId(id);
      setWaiUrl(url);
    }
  }, []);

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

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

  return (
    <div className={styles.Tab5Info}>
      <div className="Tab5Info1">
        <div className="Tab5Info1Main myscroll">
          {data.map((v1) => (
            <div className="tab5Row" key={v1.id}>
              <div
                onClick={() => cutAcFu(v1.id, v1.link)}
                className={classNames(
                  "tab5Row1",
                  !!v1.link ? "tab5Row1Ac" : "",
                  acId === v1.id ? "tab5IsActive" : ""
                )}
              >
                {v1.name}
              </div>
              {v1.children && v1.children.length ? (
                <>
                  {v1.children.map((v2) => (
                    <div
                      onClick={() => cutAcFu(v2.id, v2.link)}
                      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>

        {waiUrl ? (
          <iframe
            onLoad={() => setIsLoding(false)}
            key={waiUrl}
            src={waiUrl}
            frameBorder="0"
          ></iframe>
        ) : null}
      </div>
    </div>
  );
}

const MemoTab5Info = React.memo(Tab5Info);

export default MemoTab5Info;
