import React, { useCallback, useRef, useState } from "react";
import styles from "./index.module.scss";
import B1tab1 from "./B1tab1";
import B1tab2 from "./B1tab2";
function B1Plan() {
  const [topType, setTopType] = useState<"机房" | "区域">("区域");

  const sonSetTopTypeFu = useCallback(
    (val: "机房" | "区域", arrTemp?: string[]) => {
      setTopType(val);
      if (arrTemp) {
        // 设置 机房 组件  站址地区 回显
        if (sonRef2.current) {
          const objTemp: any = {};
          objTemp.siteArr = arrTemp;
          objTemp.province = arrTemp[0] || "";
          objTemp.city = arrTemp[1 || ""];
          objTemp.region = arrTemp[2] || "";

          sonRef2.current.fatherFu(objTemp);
        }
      }
    },
    []
  );

  const sonRef2 = useRef<any>(null);

  return (
    <div className={styles.B1Plan}>
      <div className="B1box" hidden={topType === "机房"}>
        <B1tab1
          topType={topType}
          setTopType={(val, arrTemp) => sonSetTopTypeFu(val, arrTemp)}
        />
      </div>
      <div className="B1box" hidden={topType === "区域"}>
        <B1tab2
          topType={topType}
          setTopType={(val) => sonSetTopTypeFu(val)}
          ref={sonRef2}
        />
      </div>
    </div>
  );
}

const MemoB1Plan = React.memo(B1Plan);

export default MemoB1Plan;
