135 lines
4.2 KiB
TypeScript
135 lines
4.2 KiB
TypeScript
"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 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) => {
|
|
setIsDetail(res);
|
|
});
|
|
} 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>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</>
|
|
);
|
|
}
|