/* eslint-disable jsx-a11y/iframe-has-title */
import React, { useCallback, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import history from "@/utils/history";
import A0Map from "../A0Map";
import { envData, envDataSonType, envDataType, envUrl } from "@/utils/env";
import Tab1 from "./Tab1";
import Tab4 from "./Tab4";

function A2Main() {
  // 传给历史
  const [swData, setSwData] = useState<envDataSonType[]>([]);

  // 右侧选中的状态
  const [type, setType] = useState(0);
  const typeChangeFu = useCallback((item: envDataType) => {
    setSwData(item.data);
    setType(item.id);
  }, []);

  return (
    <div className={styles.A2Main}>
      {/* 图片页面 */}
      <div className="threeBox">
        <A0Map type={type} sonChaneType={(val) => setType(val)} />
      </div>

      {/* 左上方logo */}
      <div className="logo" title="首页" onClick={() => history.push("/")}>
        <img src={`${envUrl}/home/logo.png`} alt="" />
      </div>
      {/* 底部轮播图 */}
      <div
        className={classNames(
          "swBox",
          [1, 4, 5].includes(type) ? "swBox1" : ""
        )}
      >
        <div className="swBoxMain">
          <div className="top">
            {envData.map((v) => (
              <div
                onClick={() => typeChangeFu(v)}
                className={classNames(
                  "row",
                  `row${v.id}`,
                  type === v.id ? `rowAc${v.id}` : ""
                )}
                key={v.id}
              ></div>
            ))}
            {/* 展开收起按钮 */}
            <div
              className={classNames("openIcon", type ? "openIconAc" : "")}
              onClick={() => {
                if (type) setType(0);
                else typeChangeFu(envData[0]);
              }}
            ></div>
          </div>
          {/* 历史 */}
          {
            type === 1 ? (
              <Tab1 data={swData} />
            ) : type === 4 ? (
              <Tab4 />
            ) : type === 5 ? null : null // <KnowLedge />
          }
        </div>
      </div>
    </div>
  );
}

const MemoA2Main = React.memo(A2Main);

export default MemoA2Main;