frontend/apps/wr/app/(with-layout)/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx

"use client";

import { useWrStore } from "@/app/store";
import { commonCd, rainPageSize } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";
import { rswtPageSize } from "@/app/store/prfmncReg/chkgdnReg/rswrtChkgdn";
import {
  excelDownload,
  yearOptions
} from "@/components/lib/func/commom";
import ChkgdModal from "@/components/ui/modal/chkgd/chkgdModal/chkgdModal";
import RainChkgdTable from "@/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable";
import RswtChkgdTable from "@/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable";
import {
  ContentsDiv,
  SearchDiv,
  SearchFormLeft,
  SearchFormRight,
  SearchInput,
  SelectBox,
  Title,
  UiModal
} from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { Button, Label } from "@common/components/ui";
import { useCallback, useEffect, useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import { useTranslation } from "react-i18next";

export default function Page() {
  const {
    rainChkSttn,
    rswtChkSttn,
    rainChkSttnInit,
    rainChkSttnNmSearch,
    rswtChkSttnInit,
    rswtChkNmSttnSearch,
    isRainSttn,
    isRswtSttn,
    rswtChkPolInit,
  } = useWrStore((state) => {
    return state;
  });

  const [selFcltDiv, setSelFcltDiv] = useState("RNB");
  const [rainPageNation, setRainPageNation] = useState(1);
  const [rswtPageNation, setRswtPageNation] = useState(1);
  const [fcltNm, setFcltNm] = useState<string>("");
  const [isModal, setIsModal] = useState({
    open: false,
    data: {},
  });
  const [searchYear, setSearchYear] = useState<string>(String(new Date().getFullYear()));
  const cellClick = () => {
    if (searchYear) {
      if (selFcltDiv === "RNB") {
        if (fcltNm) {
          rainChkSttnNmSearch(
            rainPageNation,
            rainPageSize,
            searchYear,
            commonCd,
            fcltNm
          );
        } else {
          rainChkSttnInit(rainPageNation, rainPageSize, searchYear, commonCd);
        }
      } else {
        if (fcltNm) {
          rswtChkNmSttnSearch(
            rswtPageNation,
            rswtPageSize,
            searchYear,
            commonCd,
            fcltNm
          );
        } else {
          rswtChkSttnInit(rswtPageNation, rswtPageSize, searchYear, commonCd);
        }
      }
    }
  };

  const rainPageChange = (pageNo: number) => {
    if (pageNo > 0) {
      setRainPageNation(pageNo);
      rainChkSttnInit(pageNo, rainPageSize, searchYear, commonCd);
    }
  };

  const rswtPageChange = (pageNo: number) => {
    if (pageNo > 0) {
      setRswtPageNation(pageNo);
      rswtChkSttnInit(pageNo, rswtPageSize, searchYear, commonCd);
    }
  };

  useEffect(() => {
    if (!rainChkSttn.isInit) {
      isRainSttn(true)
      rainChkSttnInit(1, rainPageSize, new Date().getFullYear().toString(), commonCd);
      setIsModal({ data: {}, open: false });
      
    }

  }, [rainChkSttn.isInit, rainChkSttnInit, rainPageSize]);

  useEffect(() => {
    if (!rswtChkSttn.isInit) {
      setIsModal({ data: {}, open: false });
      rswtChkSttnInit(1, rswtPageSize, new Date().getFullYear().toString(), commonCd);
      isRswtSttn(true)
    }
  }, [rswtChkSttn.isInit, rswtChkSttnInit, rswtPageSize])



  const handleClick = useCallback(
    (data: any) => {
      if (data) setIsModal({ open: !isModal.open, data: data });
    },
    [isModal]
  );
  const { t } = useTranslation('base');
  const excelDown = () => {
    if (rainChkSttn.sttnExcelList && selFcltDiv === "RNB") {
      if (!rainChkSttn.sttnExcelList || rainChkSttn.sttnExcelList.length === 0) {
        toast.error(t('excelDownErrMsg'));
        return;
      }
      excelDownload(
        rainChkSttn.sttnExcelList,
        "빗물이용시설 지도점검 현황",
        "sample_rainChkSttn.xlsx",
        "A1:Q2",
        3
      );
    } else if (rswtChkSttn.sttnExcelList && selFcltDiv === "RST") {
      if (!rswtChkSttn.sttnExcelList || rswtChkSttn.sttnExcelList.length === 0) {
        toast.error(t('excelDownErrMsg'));
        return;
      }
      excelDownload(
        rswtChkSttn.sttnExcelList,
        "중수도시설 지도점검 현황",
        "sample_rswtChkSttn.xlsx",
        "A1:X2",
        3
      );
    }
  }

  return (
    <ContentsDiv>
      <div className="grid grid-cols-4 gap-4 ">
        <div className="col-span-4">
          <Title title={"지도점검 결과 현황"} />
          <SearchDiv>
            <SearchFormLeft>
              <div className="col-span-2 flex flex-row space-x-2">
                <Label className="w-48 mt-2 text-xl text-gray-600">{'지도점검년도'}</Label>
                <SelectBox
                  className="w-full h-full text-2xl"
                  label=""
                  selectClass={""}
                  selectArray={yearOptions}
                  value={searchYear}
                  onSelectValue={(val: string | number) =>
                    setSearchYear(String(val))
                  }
                />
              </div>
              <div className="col-span-2 flex flex-row space-x-2">
                <Label className="w-28 mt-2 text-xl text-gray-600">{'시설구분'}</Label>
                <SelectBox
                  className={"w-full h-full text-2xl"}
                  label={""}
                  selectClass={""}
                  selectArray={rainChkSttn.fcltDiv}
                  onSelectValue={(val: string | number) => {
                    if (val === "RST") rswtChkPolInit();
                    setSelFcltDiv(String(val))
                  }
                  }
                  value={selFcltDiv ?? rainChkSttn.fcltDiv[0]?.val}
                />
              </div>
              <div className="col-span-2 flex flex-row space-x-2">
                <Label className="w-28 mt-2 text-xl text-gray-600">
                  {"시설명"}
                </Label>
                <SearchInput
                  className={"w-full text-2xl"}
                  label={""}
                  textValue={fcltNm || ""}
                  setText={setFcltNm}
                />
              </div>
            </SearchFormLeft>
            <SearchFormRight>
              <div className="space-y">
                <div className="flex flex-row space-x-2">
                  <Button
                    size={"sm"}
                    onClick={() => {
                      cellClick();
                    }}
                  >
                    조회
                  </Button>
                  <Button color="green" size={"sm"} onClick={() => { excelDown() }}>
                    다운로드
                  </Button>
                </div>
              </div>
            </SearchFormRight>
          </SearchDiv>
        </div>
      </div>
      <div className="grid grid-cols-6 gap-4 ">
        <div className="col-span-6">
          <ListDiv>
            {selFcltDiv === "RNB" ? (
              <RainChkgdTable
                deleteData={() => { }}
                detailUp={() => { }}
                handleClick={handleClick}
                rainChkData={rainChkSttn.rainChkRes}
                pageNation={rainPageNation}
                onPageChange={rainPageChange}
                pageCount={rainChkSttn.rainChkCount}
                readonly={true}
              />
            ) : (
              <RswtChkgdTable
                detaiRswtlUpdate={() => { }}
                deleteRswtData={() => { }}
                handleRswtClick={handleClick}
                rswtChkData={rswtChkSttn.rswtChkRes}
                pageNation={rswtPageNation}
                onPageChange={rswtPageChange}
                pageCount={rswtChkSttn.rswtChkCount}
                readonly={true}
              />
            )}
          </ListDiv>
        </div>
      </div>
      <UiModal
        open={isModal.open}
        onOpenChange={() => {
          setIsModal({ open: !open, data: {} });
        }}
        bodyClass={"w-[80vw] max-w-none"}
        body={<ChkgdModal readonly={true} type={selFcltDiv} obj={isModal.data} setIsModal={() => { }} />}
      ></UiModal>
      <Toaster position="top-center" />
    </ContentsDiv>
  );
}