import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import classNames from "classnames";
import A1User from "../A1User";
import A1Inner from "../A1Inner";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import AuthCom from "@/components/AuthCom";
import { A1Result } from "../A1Result";

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

const A1Tab = [
  { id: "1080", name: "项目介绍" },
  { id: "1115", name: "项目成果" },
  { id: "1090", name: "项目文件" },
  { id: "1100", name: "内控文件" },
  { id: "1110", name: "项目成员" },
];

type Props = {
  pageType: { txt: string; id: number };
  closeFu: () => void;
  tabType: boolean; //是否是审批
  lookTit: string; //顶部项目名字和编号
};

function A1Look({ pageType, closeFu, tabType, lookTit }: Props) {
  // 权限
  const authArr = useSelector((state: RootState) => state.A4Role.A4RoleAll);

  useEffect(() => {
    if (authArr.includes("1080")) setTopType("1080");
    else if (authArr.includes("1115")) setTopType("1115");
    else if (authArr.includes("1090")) setTopType("1090");
    else if (authArr.includes("1100")) setTopType("1100");
    else if (authArr.includes("1110")) setTopType("1110");

    setTimeout(() => {
      if (tabType && authArr.includes("1100")) setTopType("1100");
    }, 50);
  }, [authArr, tabType]);

  // 动态改变顶部 title
  const [myTitle, setMyTitle] = useState("");

  useEffect(() => {
    setMyTitle(lookTit);
  }, [lookTit]);

  const [sonPageType, setSonPageType] = useState(pageType);

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

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

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

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

  // 编辑成功
  const editSuFu = useCallback((val: string) => {
    // 设置key，更新数据
    setTab1Key(Date.now());
    // 动态修改 顶部 标题
    setMyTitle(val);
  }, []);

  return (
    <div className={styles.A1Look}>
      <div className="A1LookTitle">
        <h3>{myTitle}</h3>
        <Button onClick={closeFu}>返 回</Button>
      </div>
      <div className="A1LookTab">
        {A1Tab.map((v) => (
          <AuthCom aId={v.id} key={v.id}>
            <div
              onClick={() => setTopType(v.id)}
              className={classNames(
                "A1LookTabRow",
                topType === v.id ? "A1LookTabRowAc" : ""
              )}
            >
              {v.name}
            </div>
          </AuthCom>
        ))}
      </div>
      <div className="A1LookMain">
        {["1080", "1115"].includes(topType) && sonPageType.txt === "look" ? (
          <AuthCom aId="1081">
            <div className="A1lrBtn">
              <Button
                type="primary"
                onClick={() => setSonPageType({ txt: "edit", id: pageType.id })}
              >
                编辑
              </Button>
            </div>
          </AuthCom>
        ) : null}

        {topType === "1080" ? (
          <A1Add
            key={tab1Key}
            pageType={sonPageType}
            closeFu={tab1CloseFu}
            addFu={() => {}}
            editFu={(val) => editSuFu(val)}
          />
        ) : topType === "1090" ? (
          <A1Outer projectId={pageType.id} projectName={myTitle} />
        ) : topType === "1100" ? (
          <A1Inner
            projectId={pageType.id}
            myTitle={myTitle.split(" - ") ? myTitle.split(" - ")[0] : ""}
            projectName={myTitle}
          />
        ) : topType === "1110" ? (
          <A1User projectId={pageType.id} />
        ) : topType === "1115" ? (
          <A1Result
            closeFu={tab1CloseFu}
            pageType={sonPageType}
            addFu={() => {}}
            editFu={(val) => editSuFu(val)}
          />
        ) : (
          <div className="noAuth">您没有这个页面的权限，请联系管理员添加</div>
        )}
      </div>
    </div>
  );
}

const MemoA1Look = React.memo(A1Look);

export default MemoA1Look;
