97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { useFoStore } from '@/app/store';
|
|
import type { DrainageEquipmentListProps, TableUpperProps } from '@/app/store/dashboard';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@common/components';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export type DrainageEquipmentProps = {
|
|
searchYear?: string;
|
|
fcltyList?: { bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string, efflWqltStndrdNm: string }[];
|
|
};
|
|
|
|
export default function DrainageEquipment({searchYear = '', fcltyList = []}: DrainageEquipmentProps) {
|
|
|
|
const {
|
|
Common,
|
|
DrainageEquipment,
|
|
} = useFoStore((state) => state);
|
|
|
|
const {
|
|
isInit,
|
|
} = Common;
|
|
|
|
const {
|
|
upHeadListDrainageEquipment,
|
|
drainageEquipmentList,
|
|
} = DrainageEquipment;
|
|
|
|
const [hasSearched, setHasSearched] = useState(false);
|
|
// 이전 시설코드 저장
|
|
const [prevFacilityCode, setPrevFacilityCode] = useState<string>('');
|
|
|
|
const tableData = fcltyList;
|
|
|
|
useEffect(() => {
|
|
if (!isInit && tableData[0]?.bscFctCd && (tableData[0].bscFctCd !== prevFacilityCode || !hasSearched)) {
|
|
setHasSearched(true);
|
|
setPrevFacilityCode(tableData[0].bscFctCd);
|
|
}
|
|
}, [fcltyList, isInit, searchYear, tableData, hasSearched, prevFacilityCode]);
|
|
|
|
// 연도가 바뀌면 hasSearched를 false로 리셋
|
|
useEffect(() => {
|
|
setHasSearched(false);
|
|
}, [searchYear]);
|
|
|
|
// 시설계획 table header 변경
|
|
const HeadMakeColSpan = ({ upHeadList }: { upHeadList: TableUpperProps[] }) => {
|
|
return (
|
|
<>
|
|
<TableRow className="bg-gray-50">{upHeadList.map((head: TableUpperProps) =>
|
|
(head.id === 'part1' ? <TableHead rowSpan={3} className='w-60' key={head.id}>구분</TableHead> :
|
|
head.id === 'part2' ? <TableHead rowSpan={3} className='w-60' key={head.id}>구분</TableHead> :
|
|
head.id == 'nowSum' ? <TableHead rowSpan={2} colSpan={3} key={head.id} style={{ whiteSpace: 'pre-line' }}>{'현재\n(기준년도)'}</TableHead> :
|
|
head.id == 'stepOneSum' ? <TableHead rowSpan={1} colSpan={12} key={head.id} style={{ whiteSpace: 'pre-line' }}>{'변경(금회계획)'}</TableHead> :
|
|
head.id == 'etc' ? <TableHead rowSpan={3} key={head.id}>비고</TableHead> : null))}
|
|
</TableRow>
|
|
<TableRow className="bg-gray-50">{upHeadList.map((head: TableUpperProps) =>
|
|
(head.id === 'stepOneSum' ? <TableHead rowSpan={1} colSpan={3} key={head.id}>1단계</TableHead> :
|
|
head.id === 'stepTwoSum' ? <TableHead rowSpan={1} colSpan={3} key={head.id}>2단계</TableHead> :
|
|
head.id === 'stepThreeSum' ? <TableHead rowSpan={1} colSpan={3} key={head.id}>3단계</TableHead> :
|
|
head.id === 'stepFourSum' ? <TableHead rowSpan={1} colSpan={3} key={head.id}>4단계</TableHead> : null))}
|
|
</TableRow>
|
|
<TableRow className="bg-gray-50">
|
|
{upHeadList.map((head: TableUpperProps) => {
|
|
if (head.upName === 'upChangeRe2' || head.upName === 'upChangeRe3' || head.upName === 'upChangeRe4' || head.upName === 'upChangeRe5' || head.upName === 'upChangeRe6') {
|
|
return <TableHead key={head.id} style={{ whiteSpace: 'pre-line' }} className="w-40 bg-gray-50">{head.title}</TableHead>;
|
|
}
|
|
})}
|
|
</TableRow>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const upHeadList = HeadMakeColSpan({upHeadList:upHeadListDrainageEquipment});
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<Table variant="secondary" className='w-[130%]'>
|
|
<TableHeader>
|
|
{upHeadList}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{drainageEquipmentList.map((el: DrainageEquipmentListProps, index) => (
|
|
<TableRow key={index+"row"}>
|
|
{upHeadListDrainageEquipment.map((head) => (
|
|
(head.id==='nowSum')?
|
|
<TableCell className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{333}</TableCell>
|
|
:<TableCell className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id as keyof DrainageEquipmentListProps]}</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)
|
|
}
|