frontend/apps/wr/app/(with-layout)/ruseFcltMng/fcltReg/rainReg/page.tsx

"use client";
import { useWrStore } from "@/app/store";
import { btnClass } from "@/app/store/common/code";
import {
  rainRegSize,
  type customRainBdst,
} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
import { formatArchArea, tableData } from "@/components/lib/func/common";
import RainRegForm from "@/components/ui/form/fcltReg/rainReg/rainRegForm";
import { BdstReg } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
import {
  ContentsDiv,
  ScrollArea,
  SearchDiv,
  SearchFormLeft,
  SearchInput,
  UiModal,
  UiTable,
} from "@common/business_components";
import ListDiv from "@common/business_components/ui/list_div";
import { Button } from "@common/components";
import { useEffect, useRef, useState } from "react";



/**
 *   밧물이용시설 등록 
 * 재이용시설 등록 - 빗물시설 등록
 * - layout.tsx에 의해 공통 레이아웃이 적용됨
 * - with-layout 적용
 *  왼쪽 테이블에는 건축물 리스트 / 오른쪽 폼에는 건축물에 해당하는 빗물이용시설 데이터가 보인다.
 *  신규 등록 버튼을 눌러 건축물 정보부터 입력한다.
 * 
 *  */
export default function Home() {
  const {
    auth,
    rain,
    code,
    initRain,
    rainSearch,
    getRainData,
    getLaeSeCdCheck,
  } = useWrStore((state) => {
    return state;
  });

  const { regAuthrtYn, mdfcnAuthrtYn, laeSeCd } = auth;

  const { rainRes, rainResCount ,rainTableIndex} = rain;
  const useInitRef = useRef(false);
  const [rainForm, setRainForm] = useState<customRainBdst>();
  const [issNewReg, setIsNewReg] = useState<boolean>(false);
  const [pageNation, setPageNation] = useState(1);
  const [bdstTable, setbdstTable] = useState<customRainBdst[]>();
  const [searchTxt, setSearchTxt] = useState<string>();
  const [resetPageNo, setResetPageNo] = useState<boolean>(false);
  useEffect(() => {
    getLaeSeCdCheck();
    useInitRef.current = true;
  }, []);

  useEffect(() => {
    setIsNewReg(false);
    if (useInitRef.current == true && laeSeCd !== undefined) {
      initRain(laeSeCd);
    }
  }, [useInitRef.current, laeSeCd]);

  useEffect(() => {
    if (code.sggCd.length > 0) {
      if (rainRes && rainRes.length > 0) {
        const rainData = tableData(rainRes, { code }).map(
          (item: customRainBdst) => {
            return {
              ...item,
              archArea: formatArchArea(item?.archArea, 1),
              bdstChgYn: item.chgBuilding[0]?.bdstChgNm != null ? "Y" : "N",
              frstArchPrmsnDt: item?.frstArchPrmsnDt || "확인불가",
              lawTrgtYn: item.reuseBuilding[0]?.lawTrgtYn ?? (item as any).lawTrgtYn,
              cityText: item.ctpvCd === 0 ? "세종특별자치시" : (item as any).cityText,
              sggText: (item as any).sggText === "없음" ? "-" : (item as any).sggText,
            };
          }
        );
        console.log("rainData", rainData);
        setbdstTable(rainData);
      } else {
        setbdstTable([]);
      }
    }
  }, [code, rainRes]);
  const cellClick: (val: number | undefined) => void = (val) => {
    if (val !== undefined) {
      setRainForm(rainRes[val]);
      setResetPageNo(false);
    }
  };

  useEffect(() => {
    if (searchTxt && searchTxt.trim().length > 0) {
      rainSearch(searchTxt, pageNation, laeSeCd);
    } else {
      getRainData(pageNation, laeSeCd);
    }
    setResetPageNo(false);
  }, [pageNation]);

  useEffect(() => {
    if (typeof rainTableIndex === 'number' && rainTableIndex >= 0) {
      cellClick(rainTableIndex);
      setResetPageNo(true);
    }
  }, [rainTableIndex]);


  return (
    <>
      <ContentsDiv>
        <div className="grid grid-cols-4 gap-4">
          <div className="col-span-4">
            <SearchDiv>
              <SearchFormLeft>
                <SearchInput
                  className={"col-span-3 !text-3xl"}
                  label="건물명"
                  textValue={searchTxt || ""}
                  setText={(e) => {
                    setSearchTxt(e);
                  }}
                />
                <div className="flex flex-row space-x-2 items-center">
                  <Button
                    className={btnClass}
                    onClick={() => {
                      rainSearch(searchTxt || "", 1, laeSeCd);
                      //rainSearch(searchTxt || "", pageNation, "41");
                    }}
                  >
                    조회
                  </Button>
                  <Button
                    className={btnClass}
                    onClick={() => {
                      setIsNewReg(!issNewReg);
                    }}
                    disabled={regAuthrtYn === "N"}
                  >
                    신규등록
                  </Button>
                </div>
              </SearchFormLeft>
              {/* <SearchFormRight>
                
              </SearchFormRight> */}
            </SearchDiv>
          </div>
        </div>
        <div className="grid grid-cols-6 gap-4">
          <div className="col-span-4">
            <ListDiv>
              <ScrollArea className="h-[75vh]">
              <UiTable
                tableData={bdstTable || []}
                headlist={rain.upHeadList}
                pageSize={rainRegSize}
                total={rainResCount}
                headName={"건축물 목록"}
                cellClick={(val) => {
                  cellClick(val);
                }}
                onPageChange={setPageNation}
                index={rainTableIndex}
                resetPageNo={resetPageNo}
                widthFixed={true}
              ></UiTable>
              </ScrollArea>
            </ListDiv>
          </div>
          <div className="col-span-2 ">
            <ListDiv>
              <ScrollArea className="h-[75vh]">
                <RainRegForm
                  rainForm={rainForm ?? ({} as customRainBdst)}
                  isModal={false}
                  readonly={mdfcnAuthrtYn !== "Y"}
                ></RainRegForm>
              </ScrollArea>
            </ListDiv>
          </div>
        </div>
        <UiModal
          body={
            <BdstReg
              moType="RNB"
              isModal={issNewReg}
              setIsModal={setIsNewReg}
            ></BdstReg>
          }
          bodyClass="w-[68vw] max-w-none h-[90vh]"
          open={issNewReg}
          onOpenChange={(open) => {
            setIsNewReg(open);
          }}
        />

      </ContentsDiv>
    </>
  );
}