frontend/apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx

"use client";
import { useWrStore } from "@/app/store";
import { RuseDetailPopup } from "@/components/ui/map/detailPopup/ruseDetailPopup";
import CoDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/coDatailModal";
import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
import { Title, UiTable } from "@common/business_components/ui";
import { useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";


export const htdflData ={
  "bdstInfoSn": 54,
  "ctpvCd": 11,
  "sggCd": 11110,
  "daddr": "청라동 100-80",
  "bdstNm": "한국중부발전(주)",
  "frstArchPrmsnDt": "2013-01-01",
  "archArea": "-1.000000000",
  "ctpvNm": null,
  "sggNm": null,
  "lat": 37.57096,
  "lot": 126.98143,
  "regDt": "2025-04-16",
  "rgtr": null,
  "mdfcnDt": "2025-04-16",
  "mdfr": null,
  "reuseBuilding": [
    {
      "bdstRuseFcltSn": 4881,
      "bdstInfoSn": 54,
      "instlCmptnDt": "2025-06-20",
      "instlCst": 300,
      "operMngCd": null,
      "anlOperCst": 400,
      "instlCstSprtYn": null,
      "instlCstSprtAmt": 0,
      "grntchBdstCertYn": null,
      "grntchBdstCertYr": null,
      "grntchBdstCertNo": "",
      "grntchBdstCertGrd": "",
      "crgRdctYn": null,
      "crgRdctBss": null,
      "crgRdctAmt": 0,
      "ruseFcltFlg": "HTB",
      "bdstUsgCd": 2,
      "lawTrgtYn": "N",
      "regDt": "2025-04-16",
      "rgtr": null,
      "mdfcnDt": "2025-04-16",
      "mdfr": null,
      "htdflObj": {
        "bdstRuseFcltSn": 4881,
        "etgtType": "",
        "fclCpct": 400,
        "plwtYn": "Y",
        "orgwtWtritSpt": "공장내",
        "orgwtOcrnProcs": "1",
        "wtritEntrcTp": 3,
        "amtgnr": 1,
        "prcsProcsYn": "Y",
        "prcsFcltCpct": 14,
        "regDt": "2025-04-16",
        "rgtr": null,
        "mdfcnDt": "2025-04-16",
        "mdfr": null,
        "fmYn": "Y",
        "utztnCpct": 1,
        "utztnUsg": "1",
        "grssClfg": 0,
        "combResdch": 0,
        "trbt": 4,
        "bod": 4,
        "smll": "불쾌하지않을것",
        "crmty": 4,
        "tn": 10,
        "tph": 10,
        "ph": '1~3',
        "clIonQnt": 1,
        "cdtnv": 0,
        "emsnExitTp": 5
      }
    }
  ],
  "chgBuilding": [
    {
      "bdstInfoSn": 54,
      "archChgPrmsnDt": null,
      "archChgArea": null,
      "bdstChgNm": null,
      "regDt": "2025-04-16",
      "rgtr": null,
      "mdfcnDt": "2025-04-16",
      "mdfr": null
    }
  ]
}


export default function MapFeaturePopup() {
  const [isFeatureCd, setIsFeatureCd] = useState<any>(null);
  const {
    pbnMap,
    rainMapDetile,
    rswtMapDetile,
    htdfMapDetile,
    pbnMapDetaile,
    ldrmntMapDetile,
  } = useWrStore((state) => state);
  const { pbnMapHeadList } = pbnMap;
  const [isDetail, setIsDetail] = useState<any>(null);
  const [layerNm, setLayerNm] = useState<string>();
  const searchParams = useSearchParams();

  useEffect(() => {
    const layerName = searchParams.get("layerNm");
    const featureCd = searchParams.get("featureCd");
    setLayerNm(String(layerName));
    setIsFeatureCd(featureCd);

    const handleUnload = () => {
      // 부모에게 닫힘 알림
      window.opener?.postMessage(
        { type: "POPUP_CLOSED", target: "detail" },
        "*"
      );
    };

    window.addEventListener("beforeunload", handleUnload);

    return () => {
      window.removeEventListener("beforeunload", handleUnload);
    };
  }, []);

  useEffect(() => {
    if (isFeatureCd && layerNm) {
      if (layerNm === "하수재이용시설") {
          setIsDetail(isFeatureCd);
      } else if (layerNm === "하수처리시설") {
        pbnMapDetaile(isFeatureCd, isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "빗물이용시설") {
        rainMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "중수도시설") {
        rswtMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      } else if (layerNm === "온배수시설") {
        htdfMapDetile(isFeatureCd).then((res) => {
//가짜데이터로 하였음!!!!!!!!! 기능 수정시 res를 넣어야함
          console.log(res)
          setIsDetail(htdflData);
        });
      } else if (layerNm === "잠재수요처") {
        ldrmntMapDetile(isFeatureCd).then((res) => {
          setIsDetail(res);
        });
      }
    }
  }, [isFeatureCd, layerNm]);

  if (!isDetail) return null; // 데이터 없으면 아무것도 안 그림
  return (
    <>
      {isDetail ? (
        <div className="fixed inset-0 w-screen h-screen m-0 p-0  bg-white">
          {layerNm === "하수재이용시설" ? (
            <RuseDetailPopup bscFctCd={isDetail} />
          ) : layerNm === "하수처리시설" ? (
            <div style={{ overflowX: "hidden" }}>
              <div className="flex justify-between items-center mb-4">
                <Title title="하수처리시설 상세정보" />
              </div>
              {/* 높이 조정 */}
              <UiTable
                tableData={isDetail || []}
                headlist={pbnMapHeadList.slice(0, 4)}
                pageSize={1}
                total={0}
                headName={"위치정보"}
                cellClick={() => {}}
                onPageChange={() => {}}
              />
              <UiTable
                tableData={isDetail || []}
                headlist={pbnMapHeadList.slice(4)}
                pageSize={1}
                total={0}
                headName={"기본정보"}
                cellClick={() => {}}
                onPageChange={() => {}}
              />
            </div>
          ) : layerNm === "잠재수요처" ? (
            <CoDetailModal
              formObj={isDetail}
              readonly={false}
              onFormSubmit={async (value) => {
                console.log(value)
              }}
              isMap={true}
            />
          ) : (
            <SttnDetailModal
              type={
                layerNm === "빗물이용시설"
                  ? "RNB"
                  : layerNm === "중수도시설"
                    ? "RST"
                    : "HTB"
              }
              formObj={isDetail}
              isMap={true}
            />
          )}
        </div>
      ) : (
        <></>
      )}
    </>
  );
}