89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import WrOverLayTable from "../WrOverLayTable/WrOverLayTable";
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from "@common/components/ui";
|
|
import { getOverLayObj } from "@/components/lib/func/mapUtil";
|
|
|
|
|
|
type RuseTabData = {
|
|
data: Record<string, string>;
|
|
tabData:{
|
|
pbnstRuseFcltId: string;
|
|
ruseUtztnFcltNm: string;
|
|
}
|
|
}
|
|
|
|
|
|
export default function WrOverLayRuse({ overLayData }: { overLayData: any }) {
|
|
const [fcltTab, setFcltTab] = useState<string>("");
|
|
const [ruseData, setRuseData] = useState<RuseTabData[]>([]as RuseTabData[]);
|
|
// useEffect(() => {
|
|
// const detail = overLayData.find((list) => list.pbnstRuseFcltId === fcltTab);
|
|
// if (detail) setIsDetail(detail);
|
|
// }, [fcltTab, overLayData]);
|
|
|
|
useEffect(() => {
|
|
|
|
if (overLayData && overLayData[0]) {
|
|
setFcltTab(overLayData[0].pbnstRuseFcltId);
|
|
|
|
const newRuseData= overLayData.map((ruse) =>{
|
|
const isData = getOverLayObj( '하수재이용시설',ruse);
|
|
return {
|
|
data: isData.newObj,
|
|
tabData:{
|
|
pbnstRuseFcltId: ruse.pbnstRuseFcltId,
|
|
ruseUtztnFcltNm: ruse.ruseUtztnFcltNm
|
|
}
|
|
}
|
|
})
|
|
|
|
setRuseData(newRuseData);
|
|
}
|
|
}, [overLayData]);
|
|
|
|
if (!(overLayData && overLayData[0])) return;
|
|
return (
|
|
<>
|
|
<div>
|
|
<div className="bg-sky-600 text-white text-center font-semibold py-2 text-2xl">
|
|
</div>
|
|
<Tabs value={fcltTab} onValueChange={setFcltTab}>
|
|
<TabsList className="mt-2 mb-2 gap-6 flex flex-wrap">
|
|
{ruseData?.map((item, index) => {
|
|
return (
|
|
<TabsTrigger
|
|
|
|
key={item.tabData.pbnstRuseFcltId + index}
|
|
className="text-center !text-base size-3/12"
|
|
value={item.tabData.pbnstRuseFcltId}
|
|
>
|
|
{item.tabData.ruseUtztnFcltNm}
|
|
</TabsTrigger>
|
|
);
|
|
})}
|
|
</TabsList>
|
|
|
|
{ruseData?.map((item) => (
|
|
<TabsContent
|
|
key={item.tabData.pbnstRuseFcltId}
|
|
className="flex-1 px-4 py-3"
|
|
value={item.tabData.pbnstRuseFcltId}
|
|
>
|
|
<div className="mb-4">
|
|
<WrOverLayTable overLayData={item.data} />
|
|
</div>
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|