frontend/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx

"use client";
import { useWrStore } from "@/app/store";
import { btnClass } from "@/app/store/common/code";
import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
import { excelDownload, yearOptions } from "@/components/lib/func/commom";
import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
import {
  ContentsDiv,
  SearchBaseForm,
  SearchInput,
  SelectBox,
  Title,
  UiModal,
  UiTable,
  type ReturnType,
} from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
import { Button, Label } from "@common/components/ui";
import { useCallback, useEffect, useRef, useState } from "react";

export default function PbnstSttn() {
  const {
    code,
    pbnstSttn,
    pbnstSttnSearch,
    pbnSttnInit,
    getPbnStnDetail,
    getFlcts,
    resetPbnstDetail
  } = useWrStore((state) => state);

  const { pbnstSttnRes, fclts, pbnstSttnResCount } = pbnstSttn;
  const ref = useRef<ReturnType>({} as ReturnType);
  const [searchYear, setSearchYear] = useState<string>(
    String(new Date().getFullYear())
  );
  const [isChHead, setIsChHead] = useState(false);
  const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>();
  const [pbnDetaileData, setPbnDetaileData] = useState<{
    isModal: boolean;
    data: customPbnst;
  }>({ isModal: false, data: {} as customPbnst });

  const [pbnRuseNm, setPbnRuseNm] = useState<string>("");

  const excelClick = useCallback(() => {
    pbnstSttnSearch(
      true,
      String(1),
      "100000",
      ref.current,
      pbnRuseNm,
      searchYear,
      fclts
    );
  }, [pbnstSttnSearch, fclts, pbnRuseNm]);

  const cellCLick = useCallback(
    (index: number | undefined) => {
      if (index !== undefined && pbnstSttnRes && pbnstSttnRes[index]) {
        const pbnstRuseFcltId = pbnstSttnRes[index].pbnstRuseFcltId;
        getPbnStnDetail(pbnstRuseFcltId);
      }
    },
    [getPbnStnDetail, pbnstSttnRes]
  );

  useEffect(() => {
    if (pbnstSttn.excelList.length >= 0) {
      excelDownload(
        pbnstSttn.excelList,
        "하수재이용시설 현황",
        "sample_pbnstSttn.xlsx",
        "A1:U2",
        3
      );
    }
  }, [pbnstSttn.excelList]);
  useEffect(() => {
    if (!pbnstSttn.isInit) {
      getFlcts();
    }
  }, [pbnstSttn.isInit, pbnSttnInit, ref.current]);
  useEffect(() => {
    if (pbnstSttnRes && pbnstSttnRes.length > 0) {
      setBdstTable(pbnstSttnRes);
    } else {
      setBdstTable([]);
    }
  }, [pbnstSttnRes]);

  useEffect(() => {
    pbnSttnInit("1", "15", ref.current, searchYear, pbnstSttn.fclts);
  }, [fclts]);

  useEffect(() => {
    if (pbnstSttn.pbnstDetail.pbnstRuseFcltId)
      setPbnDetaileData({
        isModal: true,
        data: pbnstSttn.pbnstDetail,
      });
  }, [pbnstSttn.pbnstDetail]);

  return (
    <>
      <ContentsDiv>
        <div className="grid grid-cols-2 gap-4 ">
          <div className="col-span-2">
            <Title title={"하수재이용 시설 현황"} />
            <SearchBaseForm
              selectSidoData={code.cityCd}
              selectSigunData={code.sggCd}
              selectRegionData={code.rvbsnCd}
              selectUnitWaterShedData={code.lgbsnCd}
              selectMiddleRegionData={code.mdmbsnCd}
              selectEnvPartData={code.lclgvrnmntCd}
              rightClassName="ml-auto mr-6 flex items-center space-x-1"
              leftClassName="flex gap-5 w-9/12 m-4"
              leftSelectClassName="w-1/4"
              rightChildren={
                <Button
                  className={btnClass}
                  onClick={() => {
                    setIsChHead(true);
                  }}
                >
                  조회항목설정
                </Button>
              }
              leftChildren={
                <div className="col-span-3 flex items-center">
                  <SelectBox
                    className="w-48 h-full text-2xl"
                    label="연도"
                    selectClass={"w-full "}
                    selectArray={yearOptions}
                    value={searchYear}
                    onSelectValue={(val: string | number) =>
                      setSearchYear(String(val))
                    }
                  />
                  <Label className="w-full mt-2 ml-4 text-xl text-gray-600">
                    {"하수처리시설명"}
                  </Label>
                  <SearchInput
                    className={"text-2xl w-full"}
                    label=""
                    textValue={pbnRuseNm || ""}
                    setText={(e) => {
                      setPbnRuseNm(e || "");
                    }}
                  />
                </div>
              }
              queryClick={function (returnType: ReturnType): void {
                pbnstSttnSearch(
                  false,
                  "1",
                  "15",
                  returnType,
                  pbnRuseNm,
                  searchYear,
                  fclts
                );
              }}
              excelClick={excelClick}
              initClick={function (): void {
                setPbnRuseNm("");
              }}
              btnClass={btnClass}
              ref={ref}
              isAdmin={false}
            />
          </div>
        </div>
        <div className="grid grid-cols-6 gap-4 ">
          <div className="col-span-6">
            <ListDiv>
              <UiTable
                headName={undefined}
                tableData={bdstTable || []}
                headlist={pbnstSttn.pbnstSttHeadList}
                pageSize={15}
                total={pbnstSttnResCount}
                cellClick={(index: number | undefined) => {
                  cellCLick(index);
                }}
                onPageChange={(page: number) => {
                  pbnstSttnSearch(
                    false,
                    String(page),
                    String(15),
                    ref.current,
                    pbnRuseNm,
                    searchYear,
                    fclts
                  );
                }}
              >
                <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
              </UiTable>
            </ListDiv>
          </div>
        </div>
        <UiModal
          open={isChHead}
          onOpenChange={() => {
            setIsChHead(!isChHead);
          }}
          bodyClass={""}
          body={
            <HeadChModal
              type={"PBN"}
              headList={pbnstSttn.pbnstSttHeadList.map((item) => ({
                ...item,
                visible: item.visible ?? false,
              }))}
            />
          }
        />
        <UiModal
          body={
            <PbnstSttnModal
              data={pbnDetaileData.data || ({} as customPbnst)}
            ></PbnstSttnModal>
          }
          bodyClass="w-[68vw] max-w-none h-[90vh]"
          open={pbnDetaileData.isModal}
          onOpenChange={(open) => {
            //TODO:OPEN 상태 확인필요
            if (!open)
              setPbnDetaileData({ data: {} as customPbnst, isModal: open });
            resetPbnstDetail();
          }}
        />
      </ContentsDiv>
    </>
  );
}