import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { useDispatch } from "react-redux";
import { A2_APIgetList1, A2_APIgetList2 } from "@/store/action/A2Dict";
import A2Table1 from "./A2Table1";
import { Button } from "antd";
import { A2Tab1_1 } from "@/types/api/A2Dict";
import A2Tab1Add from "./A2Tab1Add";
import A2Table3 from "./A2Table3";
import { A5TableType } from "@/types";
import A5Add from "@/pages/A5Section/A5Add";
function A2Tab1() {
  const dispatch = useDispatch();

  const getListFu1 = useCallback(() => {
    dispatch(A2_APIgetList1());
  }, [dispatch]);

  const getListFu2 = useCallback(() => {
    dispatch(A2_APIgetList2());
  }, [dispatch]);

  useEffect(() => {
    getListFu1();
    getListFu2();
  }, [getListFu1, getListFu2]);

  // 职能 和 状态的信息
  const [addInfo1, setAddInfo1] = useState({} as A2Tab1_1);

  // 阶段的信息
  const [addInfo2, setAddInfo2] = useState({} as A5TableType);

  return (
    <div className={styles.A2Tab1}>
      <div className="A2tableBox">
        <div className="A2tableBoxBtn">
          <h3>职能</h3>
          <Button
            type="primary"
            onClick={() => setAddInfo1({ id: -1, type: "job" } as A2Tab1_1)}
          >
            新增
          </Button>
        </div>
        <A2Table1
          editFu={(item) => setAddInfo1(item)}
          upTaleFu={() => getListFu1()}
          type="job"
        />
      </div>

      <div className="A2tableBox">
        <div className="A2tableBoxBtn">
          <h3>状态</h3>
          <Button
            type="primary"
            onClick={() => setAddInfo1({ id: -1, type: "status" } as A2Tab1_1)}
          >
            新增
          </Button>
        </div>
        <A2Table1
          editFu={(item) => setAddInfo1(item)}
          upTaleFu={() => getListFu1()}
          type="status"
        />
      </div>

      <div className="A2tableBox">
        <div className="A2tableBoxBtn">
          <h3>签订主体</h3>
          <Button
            type="primary"
            onClick={() => setAddInfo1({ id: -1, type: "main" } as A2Tab1_1)}
          >
            新增
          </Button>
        </div>
        <A2Table1
          editFu={(item) => setAddInfo1(item)}
          upTaleFu={() => getListFu1()}
          type="main"
        />
      </div>

      <div className="A2tableBox">
        <div className="A2tableBoxBtn">
          <h3>业务部门</h3>
          <Button
            type="primary"
            onClick={() => setAddInfo1({ id: -1, type: "dept" } as A2Tab1_1)}
          >
            新增
          </Button>
        </div>
        <A2Table1
          editFu={(item) => setAddInfo1(item)}
          upTaleFu={() => getListFu1()}
          type="dept"
        />
      </div>
      
      <div className="A2tableBox">
        <div className="A2tableBoxBtn">
          <h3>阶段</h3>
          <Button
            type="primary"
            onClick={() =>
              setAddInfo2({ id: "-1", parentId: "0" } as A5TableType)
            }
          >
            新增
          </Button>
        </div>
        <A2Table3
          editFu={(item) => setAddInfo2(item)}
          upTaleFu={() => getListFu2()}
          myType="字典"
        />
      </div>

      {/* 新增职能、状态、签订主体、业务部门 */}
      {addInfo1.id ? (
        <A2Tab1Add
          info={addInfo1}
          closeFu={() => setAddInfo1({} as A2Tab1_1)}
          addFu={() => getListFu1()}
        />
      ) : null}

      {/* 新增和编辑 阶段*/}
      {addInfo2.id ? (
        <A5Add
          myType="字典"
          info={addInfo2}
          closeFu={() => setAddInfo2({} as A5TableType)}
          addFu={() => getListFu2()}
        />
      ) : null}
    </div>
  );
}

const MemoA2Tab1 = React.memo(A2Tab1);

export default MemoA2Tab1;