frontend/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx

import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { SelectBox } from '@common/business_components/ui';
import { Button, Input, Label } from '@common/components';
import React from 'react';
//import {  useDcTree, flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi';
// import { useBizByFcltStore } from "../../../store/StoreProvider";

// 운영정보 '구분' 선택 목록
// const WORK_TYPES = [
//   { val: "maintenance", text: "보수 및 갱신" },
//   { val: "cleaning", text: "청소 및 준설" },
//   { val: "inspection", text: "점검 및 진단" },
// ];
export const WORK_TYPES = [
  { val: "200", text: "보수 및 갱신(개대체)" },
  { val: "201", text: "보수 및 갱신(유지보수)" },
  { val: "204", text: "보수 및 갱신(단순보수)" },
  { val: "100", text: "점검 및 진단" },
  { val: "203", text: "청소 및 준설" },
];
// const BIZ_SE_CD = useBizByFcltStore(state => state.BIZ_SE_CD);
export const BIZ_SE_CD = [
  { lwpoCd: "100", lwpoCdNm: "관로기술진단" },
  { lwpoCd: "200", lwpoCdNm: "개대체" },
  { lwpoCd: "201", lwpoCdNm: "유지보수" },
  { lwpoCd: "203", lwpoCdNm: "청소, 준설" },
  { lwpoCd: "204", lwpoCdNm: "단순보수" },
];
// const BIZ_TY_CD = useBizByFcltStore(state => state.BIZ_TY_CD);
export const BIZ_TY_CD = [
  { lwpoCd: "0", lwpoCdNm: "전체" },
  { lwpoCd: "SV", lwpoCdNm: "용역" },
  { lwpoCd: "SF", lwpoCdNm: "자체" },
  { lwpoCd: "SC", lwpoCdNm: "공사" },
];
export const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map(item => ({
  val: item.lwpoCd,
  text: item.lwpoCdNm,
}));
// 운영정보 - 사업 현황
export const operationTableHeadlist = [
  { id: "bizNm", title: "사업명" },
  { id: "flfmtBgngYmd", title: "수행시작일자" },
  { id: "flfmtEndYmd", title: "수행종료일자" },
  { id: "flfmtYr", title: "수행년도" },
  { id: "bizTyCd", title: "사업유형" },
  { id: "bizAmt", title: "사업금액" },
];
// 운영정보 - 보수 및 갱신 결과표
export const operationMaintenanceTableHeadlist = [
  { id: "fcltMngNo", title: "관리번호" },
  { id: "usgCd", title: "용도" },
  { id: "mqltCd", title: "재질" },
  { id: "pdmt", title: "관경(mm)" },
  { id: "prlg", title: "연장(m)" },
  { id: "instlYmd", title: "설치일자" },
  // { id: "instlYmd", title: "사업구분" },
];
// 운영정보 - 청소 및 준설 결과표
export const operationCleaningTableHeadlist = [
  { id: "fcltMngNo", title: "관리번호" },
  { id: "usgCd", title: "용도" },
  { id: "mqltCd", title: "재질" },
  { id: "pdmt", title: "관경(mm)" },
  { id: "prlg", title: "연장(m)" },
  { id: "instlYmd", title: "설치일자" },
];
// 운영정보 - 점검 및 진단 결과표
export const operationInspectionTableHeadlist = [
  { id: "fcltMngNo", title: "관리번호" },
  { id: "usgCd", title: "용도" },
  { id: "mqltCd", title: "재질" },
  { id: "pdmt", title: "관경(mm)" },
  { id: "prlg", title: "연장(m)" },
  { id: "instlYmd", title: "설치일자" },
  { id: "strct_stat_grd", title: "구조적 상태등급" },
  { id: "oper_stat_grd", title: "운영적 상태등급" },
];

interface OperationTabProps {
  open: boolean;
  workType: string;
  var1: string;
  var2: string;
  yearFilter: { start: string; end: string; };
  handleSearch: () => void;
  // onOpenChange: (open: boolean) => void;
  // setTableData: (data: any[]) => void;
  // setTableCount: (count: number) => void;
  setWorkType: (type: string) => void;
  setYearFilter: (filter: { start: string; end: string }) => void;
  setVar1: (value: string) => void;
  setVar2: (value: string) => void;
}

const OperationTab: React.FC<OperationTabProps> = ({
  open,
  workType,
  var1,
  var2,
  yearFilter,
  handleSearch,
  // onOpenChange,
  // setTableData,
  // setTableCount,
  setWorkType,
  setVar1,
  setVar2,
  setYearFilter,
}) => {
  return (
    <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]">
      <div className="flex items-center mb-3">
        <SelectBox
          className="w-80 mr-8"
          selectClass="rounded-lg bg-white text-xl"
          label="업무구분"
          selectArray={WORK_TYPES.map((w) => ({
            val: w.val,
            text: w.text,
          }))}
          onSelectValue={(val) => setWorkType(String(val))}
          value={workType}
          selectContentClass="z-[101]"
        />
      </div>
      <div className="flex items-center mb-6">
        <Label className="mr-2 w-auto text-xl text-gray-600">사업명</Label>
        <Input
          className="w-[100px] !text-xl placeholder:text-center mr-4"
          placeholder="입력"
          value={var1}
          onChange={(e) => { setVar1(e.target.value); }}
        />
        <YearRangeSelectBox
          start={yearFilter.start}
          end={yearFilter.end}
          onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
          startLabel="수행기간"
          endLabel=""
        />
        <SelectBox
          className="ml-8 w-60 mr-8"
          selectClass="rounded-lg bg-white text-xl"
          label="사업 유형"
          selectArray={BIZ_TY_CD_SELECT_ARRAY}
          value={var2}
          onSelectValue={(val) => {
            setVar2(String(val));
          }}
          selectContentClass="z-[101]"
        />
        {/* 조회 버튼 */}
        <div className="flex-1 flex justify-end">
          <Button className="text-base py-2" onClick={handleSearch}>조회</Button>
        </div>
      </div>
    </div>
  )
};

export default React.memo(OperationTab);