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

"use client";

import { useWrStore } from "@/app/store";
import { 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 {
    auth,
    rainChkSttn,
    rswtChkSttn,
    rainChkSttnInit,
    rainChkSttnNmSearch,
    rswtChkSttnInit,
    rswtChkNmSttnSearch,
    isRainSttn,
    isRswtSttn,
    rswtChkPolInit,
  } = useWrStore((state) => {
    return state;
  });

  const { laeSeCd } = auth;
  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,
            laeSeCd,
            fcltNm
          );
        } else {
          rainChkSttnInit(rainPageNation, rainPageSize, searchYear, laeSeCd);
        }
      } else {
        if (fcltNm) {
          rswtChkNmSttnSearch(
            rswtPageNation,
            rswtPageSize,
            searchYear,
            laeSeCd,
            fcltNm
          );
        } else {
          rswtChkSttnInit(rswtPageNation, rswtPageSize, searchYear, laeSeCd);
        }
      }
    }
  };

  const rainPageChange = (pageNo: number) => {
    if (pageNo > 0) {
      setRainPageNation(pageNo);
      if (fcltNm) {
        rainChkSttnNmSearch(pageNo, rainPageSize, searchYear, laeSeCd, fcltNm);
      } else {
        rainChkSttnInit(pageNo, rainPageSize, searchYear, laeSeCd);
      }
    }
  };

  const rswtPageChange = (pageNo: number) => {
    if (pageNo > 0) {
      setRswtPageNation(pageNo);
      if (fcltNm) {
        rswtChkNmSttnSearch(pageNo, rainPageSize, searchYear, laeSeCd, fcltNm);
      } else {
        rswtChkSttnInit(pageNo, rswtPageSize, searchYear, laeSeCd);
      }
    }
  };

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

  useEffect(() => {
    if (!rswtChkSttn.isInit) {
      setIsModal({ data: {}, open: false });
      rswtChkSttnInit(
        1,
        rswtPageSize,
        new Date().getFullYear().toString(),
        laeSeCd
      );
      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>
  );
}