frontend/apps/fo/app/pages/rdi/page.tsx

"use client"
import { useFoStore } from "@/app/store";
import type { TableUpperProps } from "@/app/store/common";
import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiTable, type ReturnType } from "@common/business_components";
import ListDiv from "@common/business_components/ui/list_div";
import { useCallback, useEffect, useRef, useState } from "react";

export default function Rdi() {
  const {Common
    ,initializeCommonData
    ,Rdi
    ,RdiSearch
    ,searchRdiList
  } = useFoStore((state) => state) || { processAreaList: { processAreaList: [] }};
  
  const {
    isInit,
    selectUpdownData,
    selectOperationData,
    selectSidoData,
    selectSigunData,
    selectRegionData,
    selectUnitWaterShedData,
    selectMiddleRegionData,
    selectEnvPartData,
    selectSearchYear,
    btnClass
  } = Common;

  const {
    labelArray,
  } = RdiSearch;

  const {
    upHeadList1,
    upHeadList2,
    upHeadList3,
    rdiList,
    rdiCount,
    excelList,
  } = Rdi;

  const ref = useRef<ReturnType>({
    partValue: '',
    sidoValue: '',
    sigunValue: '',
    regionValue: '',
    unitWaterShedValue: '',
    middleRegionValue: '',
    envPartValue: '',
    sidoText: '',
    sigunText: ''
  });

  // 그리드 관련
  const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);

  // 초기화 변수
  const [resetPage, setResetPage] = useState<boolean>(false);
  // 표 너비
  const [widthSize, setWidthSize] = useState<string>("w-[120%]");
  // 구분별 그리드 헤더
  const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
  // 용량별
  const [fcltCpct, setFcltCpct] = useState<string>("0");
  // 시설명
  const [fcltyName, setFcltyName] = useState<string>("");
  // 시설상태
  const [operationValue, setOperationValue] = useState<string>("0");
  // 조회기간
  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");

  /**
   * 페이지 함수
   */
  // 초기화
  const resetVal = () => {
    setWidthSize("w-[120%]");
    
    setUpheadList(upHeadList1)
    // 상태값 설정
    setFcltCpct(selectUpdownData[0]?.val || "0");
    setOperationValue(selectOperationData[0]?.val || "0");
    setSearchYear(selectSearchYear[0]?.val || "0");
    // SearchInputSelect 초기화
    setFcltyName("");
    if (searchInputRef.current) {
      const input = searchInputRef.current.querySelector('input');
      if (input) {
        input.value = "";
      }
    }
    searchRdiList(1, 10, selectSearchYear[0]?.val || "0");

  }

  /**
   * useEffect
   */
  useEffect(() => {
    if (!isInit) {
      initializeCommonData();
      searchRdiList(1, 10, selectSearchYear[0]?.val || "0");
    }
  }, [isInit, initializeCommonData, searchRdiList, selectSearchYear]);

  useEffect(() => {
    if (excelList && excelList.length > 0) {
      downloadExcel({ 
        data: excelList as unknown as JSON[], 
        fileName: 'RDII추정', 
        sheetNameArray: ['RDII추정'], 
        headerRange: 'A1:O1' 
      });
    }
  }, [excelList]);

  /**
   * 콜백함수
   */
  // 조회
  const searchRdi = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
    let nameCd, partStr
    switch (partValue) {
      case 'R':
        if (regionValue !== '0') {
          if(unitWaterShedValue==='0') nameCd = regionValue;
          else if (middleRegionValue==='0') nameCd = unitWaterShedValue;
          else nameCd = middleRegionValue;
        }
        partStr = partValue
        break;
      default:
        if(sidoValue !== '0') nameCd = sidoValue;
        if(sigunValue !== '0') nameCd = sigunValue;
          partStr = envPartValue !== '0' ? envPartValue:partValue;
          break;
    }
    if (partStr.length > 1 || fcltCpct !== '0' || operationValue!== '0' ||nameCd ||(fcltyName.trim() !== "" && fcltyName.trim() !== null)) {
      searchRdiList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
    } else {
      searchRdiList(pageNo, pageCnt, searchYear);
    }
  }, [operationValue, fcltyName, searchRdiList, searchYear, fcltCpct]);

  const chkVal = useCallback((returntype:ReturnType) => {
    setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
    setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
    setResetPage(true);
  }, [upHeadList1, upHeadList2, upHeadList3]);

  // 엑셀다운로드 
  const excelDownload = useCallback(() => {
    searchRdi(ref.current, 1, 10000);
  }, [searchRdi]);

  // 페이지 변경
  const handlePageChange = useCallback((page: number) => {
    setResetPage(false);
    searchRdi(ref.current, page, 10);
  }, [searchRdi]);

  const mainList: Record<string, string | number | boolean>[] = rdiList || [];
  const total = rdiCount || 0;

  return (
    <MainDiv>
      <Title title="RDII추정" />
        <ContentsDiv>
          <SearchBaseForm
          leftChildren={<>
            <SelectBox className="col-span-3" label={labelArray[3] as string} selectArray={selectUpdownData} onSelectValue={(val) => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
            <SearchInput ref={searchInputRef} className={"col-span-3"} label={labelArray[4] as string} textValue={fcltyName} setText={setFcltyName} />
            <SelectBox className="col-span-3" label={labelArray[5] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYear(val.toString())} value={searchYear} selectClass={undefined} />
            <SelectBox className="col-span-3" label={labelArray[6] as string} selectArray={selectOperationData} onSelectValue={(val) => setOperationValue(val.toString())} value={operationValue} selectClass={undefined} />
          </>}
          rightChildren={undefined}
          selectSidoData={selectSidoData}
          selectSigunData={selectSigunData}
          selectRegionData={selectRegionData}
          selectUnitWaterShedData={selectUnitWaterShedData}
          selectMiddleRegionData={selectMiddleRegionData}
          selectEnvPartData={selectEnvPartData}
          btnClass={btnClass}
          queryClick={chkVal}
          excelClick={excelDownload}
          initClick={resetVal}
          ref={ref} isAdmin={false}          />
      <ListDiv>
        <div className="h-full w-full overflow-x-scroll">
          <div className={widthSize}>
            <UiTable cellClick={ undefined } headName={"RDII추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
          </div>
          <span className="text-2xl text-gray-500">※주) 처리장 유입부에서 측정된 유량 및 수질조사 자료를 기준으로 산정된 결과임</span>
        </div>
      </ListDiv>
      </ContentsDiv>
    </MainDiv>
  );
}