frontend/apps/fo/app/pages/(with-layout)/sewageOccur/modal/page.tsx

/**
 *  운영실태 - 오수발생량 추정(모달)
 * 
 * - 선택한 시설의 물사용량과 오수전환율을 가지고 오수발생량 추정 데이터를 월별로 보여주는 모달.
 */

"use client"
import { roundNumber } from "@/app/components/common/DataForm";
import { useFoStore } from "@/app/store";
import type { modalTableType } from "@/app/store/sewageOccur";
import { DateMonthPicker, downloadExcel, UiTable } from "@common/business_components/ui";
import ListDiv from "@common/business_components/ui/list_div";
import { Button, Table, TableCell, TableHead, TableRow } from "@common/components/ui";
import { useEffect, useState } from "react";

export default function SewageOccurModal(props: { fcltyName: string; facilityCd : string; searchYear : string}) {
  // 그리드 관련
  const { Common, SewageOccurDetail, searchSewageOccurDetailList} = useFoStore((state) => state);
  const { btnClass } = Common;

  // searchYear 유효성 검사 및 기본값 설정
  const validSearchYear = props.searchYear && /^\d{4}$/.test(props.searchYear) ? props.searchYear : new Date().getFullYear().toString();

  
  const [startYearMonth, setStartYearMonth] = useState(validSearchYear+'01');
  const [endYearMonth, setEndYearMonth] = useState(validSearchYear+'12');
  const [detailList, setDetailList] = useState<modalTableType[]>([]);

  // 가능한 시작년월 설정
  const [enableEndMonth, setEnableEndMonth] = useState<string[]>(['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']);
  
  const {
    upHeadListSewageOccurDetail,
    gridListSewageOccurDetail
  } = SewageOccurDetail;

  useEffect(() => {
    searchSewageOccurDetailList(props.facilityCd, validSearchYear);
  }, [searchSewageOccurDetailList, props.facilityCd, validSearchYear]);

  useEffect(() => {
    setDetailList(gridListSewageOccurDetail);
  }, [gridListSewageOccurDetail]);


  useEffect(() => {
      searchSewageOccurDetailList(props.facilityCd, validSearchYear, startYearMonth, endYearMonth);
  }, [startYearMonth, endYearMonth, searchSewageOccurDetailList, props.facilityCd, validSearchYear]);

  useEffect(() => {
    const standdardMonthList = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
    setEnableEndMonth(standdardMonthList);
    // 시작년월이 바뀌면 선택가능한 년월 데이터가 변경돼야 한다.
    if(startYearMonth){
      const startMm = startYearMonth.substring(4, 6);

      if(endYearMonth < startYearMonth) {
          setEndYearMonth(startYearMonth);
        }

      standdardMonthList.forEach((month) => {
        setEnableEndMonth((prev) => {
          if (parseInt(month.replaceAll('월', '')) < parseInt(startMm)) {
            return prev.filter((m) => m !== month);
          }
          return prev;
        });
      });
    }
  }, [endYearMonth, startYearMonth]);

 const excelDownload = () => {
    const excelDownList: any[] = [];
    if(detailList.length > 0){
      detailList.forEach((item) => {
        excelDownList.push({
          "날짜": item.msrDt,
          "물사용량(m³/일)": roundNumber(item.waterUsage, 0),
          "오수전환율(%)": roundNumber(item.swageChangePercent, 0),
          "오수발생량 추정(m³/일)": roundNumber(item.estimationSewage, 0),
        });
      });
    }
    if (excelDownList && excelDownList.length > 0) {
      downloadExcel({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.searchYear+'년 '+props.fcltyName + ' 오수발생량 추정', sheetNameArray: [props.fcltyName + ' 오수발생량 추정'], headerRange: 'A1:D1' });
    } else if (detailList.length == 0) {
      alert('다운받을 데이터가 없습니다.');
    }
  } 

  return (
    <>
      <ListDiv className="!h-[80px] !mt-10">
        <div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
          <Table>
            <thead>
              <TableRow className="">
                <TableHead className="w-1/6">{'시설명'}</TableHead>
                <TableCell className="w-1/3">{props.fcltyName}</TableCell>
                <TableHead className="w-1/6">{'년월'}</TableHead>
                <TableCell className="w-1/3">
                <DateMonthPicker
                  field={{
                    value: startYearMonth || (() => {
                      const now = new Date();
                      const year = now.getFullYear();
                      const month = String(now.getMonth() + 1).padStart(2, '0');
                      return `${year}${month}`;
                    })(),
                    onChange: (value: string) => {
                        if (value && /^\d{6}$/.test(value)) {
                            setStartYearMonth(value);
                        }
                    }
                  }}
                  selectClass="ml-5 w-[100px]"
                  startYear={1900}
                  yearReadOnly={true}
                  enableMonth={['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']}
                />~
                <DateMonthPicker
                  field={{
                    value: endYearMonth || (() => {
                      const now = new Date();
                      const year = now.getFullYear();
                      const month = String(now.getMonth() + 1).padStart(2, '0');
                      return `${year}${month}`;
                    })(),
                    onChange: (value: string) => {
                        if (value && /^\d{6}$/.test(value)) {
                            setEndYearMonth(value);
                        }
                    }
                  }}
                  selectClass="ml-5 w-[100px]"
                  startYear={1900}
                  yearReadOnly={true}
                  enableMonth={enableEndMonth}
                />                
                </TableCell>
              </TableRow>
            </thead>
          </Table>
        </div>
      </ListDiv>
      <ListDiv className="!h-[570px] overflow-y-auto">
        <div className="h-[120%]">
          <Button className={btnClass} style={{float: 'right'}} color="green" onClick={excelDownload}>
            {"엑셀다운로드"}
          </Button>
          <UiTable headName={"오수발생량 추정"} tableData={detailList} headlist={upHeadListSewageOccurDetail} pageSize={0} total={0} cellClick={undefined} onPageChange={() => {}} boldArray={[0, 1, 2]} widthFixed={true} >
          </UiTable>
        </div>
      </ListDiv>
    </>
  );
}