import React, { useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import A2Tab1 from "./A2Tab1";
import A2Tab2 from "./A2Tab2";
import A2Tab3 from "./A2Tab3";

const topBtnArr = [
  { id: 1, name: "项目属性" },
  { id: 3, name: "项目类型" },
  { id: 2, name: "内控文件属性" },
];

function A2Dict() {
  const [acId, setAcId] = useState(1);

  return (
    <div className={styles.A2Dict}>
      <div className="pageTitle">字典管理</div>
      <div className={styles.A2Top}>
        {topBtnArr.map((v) => (
          <Button
            className={styles.tabBtn}
            onClick={() => setAcId(v.id)}
            key={v.id}
            type={v.id === acId ? "primary" : "default"}
          >
            {v.name}
          </Button>
        ))}
        {acId === 1 || acId === 3 ? (
          <>
            &emsp;&emsp;注：删除字典名称时，与该字典名称关联的数据都将关联到“其它”
          </>
        ) : null}
      </div>

      <div className="A2Main">{acId === 1 ? <A2Tab1 /> : acId === 2 ? <A2Tab2 /> : <A2Tab3 />}</div>
    </div>
  );
}

const MemoA2Dict = React.memo(A2Dict);

export default MemoA2Dict;
