import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import classNames from "classnames";

const A1Add = React.lazy(() => import("../A1Add"));
const A1Outer = React.lazy(() => import("../A1Outer"));

const A1Tab = [
  { id: 1, name: "项目介绍" },
  { id: 2, name: "项目文件" },
  { id: 3, name: "内控文件" },
  { id: 4, name: "项目成员" },
];

type Props = {
  pageType: { txt: string; id: number };
  closeFu: () => void;
  tabType: boolean;
};

function A1Look({ pageType, closeFu, tabType }: Props) {
  const [sonPageType, setSonPageType] = useState(pageType);

  const [topType, setTopType] = useState(1);

  useEffect(() => {
    if (tabType) setTopType(3);
  }, [tabType]);

  useEffect(() => {
    if (topType === 1) {
      setSonPageType({ txt: "look", id: pageType.id });
    }
  }, [pageType.id, topType]);

  // 项目介绍 点取消的时候 更新key，重新渲染
  const [tab1Key, setTab1Key] = useState(-1);

  // 从 项目介绍 点击 取消
  const tab1CloseFu = useCallback(() => {
    setTab1Key(Date.now());
    setSonPageType({ txt: "look", id: pageType.id });
  }, [pageType.id]);

  return (
    <div className={styles.A1Look}>
      <div className="A1LookTitle">
        <h3>XXXXXXX 项目</h3>
        <Button onClick={closeFu}>返 回</Button>
      </div>
      <div className="A1LookTab">
        {A1Tab.map((v) => (
          <div
            onClick={() => setTopType(v.id)}
            className={classNames(
              "A1LookTabRow",
              topType === v.id ? "A1LookTabRowAc" : ""
            )}
            key={v.id}
          >
            {v.name}
          </div>
        ))}
      </div>
      <div className="A1LookMain">
        {topType === 1 && sonPageType.txt === "look" ? (
          <div className="A1lrBtn">
            <Button
              type="primary"
              onClick={() => setSonPageType({ txt: "edit", id: pageType.id })}
            >
              编辑
            </Button>
          </div>
        ) : null}

        {topType === 1 ? (
          <A1Add
            key={tab1Key}
            pageType={sonPageType}
            closeFu={tab1CloseFu}
            addFu={() => {}}
            editFu={() => {
              console.log("编辑成功");
            }}
          />
        ) : topType === 2 ? (
          <A1Outer id={pageType.id} />
        ) : null}
      </div>
    </div>
  );
}

const MemoA1Look = React.memo(A1Look);

export default MemoA1Look;
