import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { useDispatch } from "react-redux";
import { A2_APIgetList1 } from "@/store/action/A2Dict";
import A2Table1 from "../A2Tab1/A2Table1";
import { Button } from "antd";
import { A2Tab1_1 } from "@/types/api/A2Dict";
import A2Tab1Add from "../A2Tab1/A2Tab1Add";

function A2Tab3() {
  const dispatch = useDispatch();

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

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

  const [addInfo1, setAddInfo1] = useState({} as A2Tab1_1);

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

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

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

      {/* 新增功能弹窗 */}
      {addInfo1.id ? (
        <A2Tab1Add
          info={addInfo1}
          closeFu={() => setAddInfo1({} as A2Tab1_1)}
          addFu={() => getListFu1()}
        />
      ) : null}

    </div>
  );
}

const MemoA2Tab3 = React.memo(A2Tab3);

export default MemoA2Tab3;