// 우수토실
import Modal from '@/components/ui/modal';
import { VerticalTable } from '@/components/ui/verticalTable';
import { UiTable } from '@common/business_components/ui';
import { Button, TableHead, TableRow } from '@common/components/ui';
import React from 'react'
const inputColumn = [
  { id: "swtrmt_zone_cd", title: "처리구역", type: "input" },
  { id: "mainSscYn", title: "중점우수토실 대상여부", type: "select", options: ['Y', 'N'] },
];
const headlist = [
  { id: 'startrain', title: '강우시작일시' }, { id: 'endrain', title: '강우종료일시' }, { id: '선행건기', title: '선행건기(h)' }, { id: '강우정보', title: '강우정보' }, { id: '누적강우량', title: '누적강우량(mm)' }, { id: '지속시간', title: '지속시간(h)' }, { id: '강우강도', title: '강우강도(mm/h)' },
]
const headlist3 = [{ id: 'nm', title: '회차' }, { id: 'date', title: '측정일자' }, { id: 'measure', title: '수량(m)' }, { id: 'bod', title: 'BOD(mg/L)' }, { id: 'toc', title: 'TOC(mg/L)' }, { id: '오염부하량', title: '오염부하량(kg)' }]
const Ssc = ({ featureData }: { featureData: any }) => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const openModal = () => {
    setIsModalOpen(true);
  };
  const closeModal = () => {
    setIsModalOpen(false);
  };
  return (
    <div><VerticalTable headName='자체 입력정보' tableData={[]} headlist={inputColumn} pageSize={0} total={0} children={undefined} cellClick={undefined} isEditable={true} onPageChange={function (page: number): void {
      throw new Error('Function not implemented.');
    }} />
      <div>
        <div className="card-header">
          <h3 className="text-2xl mx-3 font-medium text-label">중점우수토실 운영정보</h3>
        </div>
        <Button className='mx-auto block w-64 mt-3 py-2 text-white rounded-sm text-sm font-medium hover:bg-blue-700 bg-blue-600' onClick={openModal}>상세보기</Button>
        <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} closeModal={closeModal}>
          <div className='grid grid-col-3'><UiTable headName='강우정보' tableData={[]} headlist={headlist} pageSize={0} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
            throw new Error('Function not implemented.');
          }}></UiTable>
          <UiTable headName='측정정보' tableData={[]} headlist={[]} pageSize={0} total={0} cellClick={undefined} onPageChange={function (page: number): void {
            throw new Error('Function not implemented.');
          }}>  {/* 커스텀 헤더 */}
          <TableRow>
            <TableHead colSpan={5} className="text-center bg-blue-100 font-bold">
              수량
            </TableHead>
            <TableHead colSpan={3} className="text-center bg-blue-100 font-bold">
              수질
            </TableHead>
          </TableRow>
          <TableRow>
            <TableHead className="text-center">측정시작일시</TableHead>
            <TableHead className="text-center">측정종료일시</TableHead>
            <TableHead className="text-center">측정간격(분)</TableHead>
            <TableHead className="text-center">측정기기설치위치</TableHead>
            <TableHead className="text-center">유량계 종류 및 모델명</TableHead>
            <TableHead className="text-center">채수시작일시</TableHead>
            <TableHead className="text-center">채수종료일시</TableHead>
            <TableHead className="text-center">채수횟수</TableHead>
          </TableRow></UiTable>
          <UiTable headName='수량/수질측정 정보' tableData={[]} headlist={headlist3} pageSize={0} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
            throw new Error('Function not implemented.');
          }}></UiTable></div>
        </Modal>
      </div>
    </div>
  )
}

export default Ssc