'use client'

import React, { useState, useEffect, useRef } from 'react'
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
import { Button } from '@nextui-org/react'
import Select from 'react-select'
import Link from 'next/link'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { isEmptyArray, isNotEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
import { useMessage } from '@/hooks/useMessage'
import { useForm } from 'react-hook-form'
import { useRecoilValue } from 'recoil'
import { sessionStore } from '@/store/commonAtom'
import FindAddressPop from './popup/FindAddressPop'
import PlanRequestPop from './popup/PlanRequestPop'
import WindSelectPop from './popup/WindSelectPop'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import StuffPlanQGrid from './StuffPlanQGrid'

export default function StuffDetail() {
  //공통코드
  const { commonCode, findCommonCode } = useCommonCode()
  const [selOptions, setSelOptions] = useState('') //선택한 1차점
  const [otherSelOptions, setOtherSelOptions] = useState('') //선택한 1차점외

  const sessionState = useRecoilValue(sessionStore)

  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const { getMessage } = useMessage()
  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const ref = useRef()
  const { get, promiseGet, del, promisePost, promisePut } = useAxios(globalLocaleState)
  //form
  const formInitValue = {
    // 물건번호 T...(임시) R...(진짜)
    planReqNo: '', //설계의뢰No
    receiveUser: '', //담당자
    objectStatusId: '0', //물건구분(신축:0 기축 : 1)
    objectName: '', //물건명
    objectNameOmit: '', //경칭선택
    objectNameKana: '', //물건명 후리가나
    saleStoreLevel: '', //1차점스토어레벨
    saleStoreId: '', //1차점판매점ID
    saleStoreName: '', //1차점판매점명
    otherSaleStoreId: '', //1차점 외 판매점ID
    otherSaleStoreName: '', //1차점 외 판매점명
    otherSaleStoreLevel: '', //1차점 외 스토어레벨
    zipNo: '', //우편번호
    prefId: '', //도도부현
    prefName: '',
    address: '', //주소
    areaId: '', //발전량시뮬레이션지역id
    standardWindSpeedId: '', //기준풍속
    verticalSnowCover: '', //수직적설량NEW
    coldRegionFlg: false, //한랭지대책시행(true : 1 / false : 0)
    surfaceType: 'III・IV', //면조도구분(III・IV / Ⅱ)
    saltAreaFlg: false, //염해지역용아이템사용 (true : 1 / false : 0)
    installHeight: '', //설치높이
    conType: '0', //계약조건(잉여 / 전량)
    remarks: '', //메모
    tempFlag: 'T', //임시저장(1) 저장(0)
  }
  const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
    defaultValues: formInitValue,
  })

  const form = { register, setValue, getValues, handleSubmit, resetField, control, watch }

  const [honorificCodeList, setHonorificCodeList] = useState([]) //경칭 공통코드 리스트
  const [selHonorificCode, setSelHonorificCode] = useState('') //선택한 경칭코드
  const [objectStatusList, setObjectStatusList] = useState([]) //물건구분 공통코드 리스트

  const [selectObjectStatusId, setSelectObjectStatusId] = useState('0') //신축기축 선택값
  const [windSpeedList, setWindSpeedList] = useState([]) //기준 풍속 공통코드 리스트
  const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
  const [prefValue, setPrefValue] = useState('')
  const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
  const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
  const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])

  const [areaIdList, setAreaIdList] = useState([]) //발전시뮬레이션 리스트

  const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
  const [showAddressButtonValid, setShowAddressButtonValid] = useState(false) //주소검색팝업 활성화 컨트롤
  const [showDesignRequestButtonValid, setShowDesignRequestButtonValid] = useState(false) //설계의뢰팝업 활성화 컨트롤
  const [showWindSpeedButtonValid, setShowWindSpeedButtonValid] = useState(false) //풍속선택팝업 활성화 컨트롤
  const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set

  const [editMode, setEditMode] = useState('NEW')
  const [detailData, setDetailData] = useState({})

  const [planGridProps, setPlanGridProps] = useState({
    planGridData: [],
    isPageable: false,
    planGridColumns: [
      {
        field: 'planNo',
        headerName: getMessage('stuff.detail.planGridHeader.planNo'),
        width: 100,
        cellStyle: { justifyContent: 'center' },
      },
      {
        field: 'orderFlg',
        headerName: getMessage('stuff.detail.planGridHeader.orderFlg'),
        width: 80,
        cellStyle: { justifyContent: 'center' },
        cellRenderer: (params) => {
          //1일때만 동그라미
          let orderFlg
          orderFlg = params.value === '1' ? 'O' : 'X'
          return orderFlg
        },
      },
      {
        field: 'moduleModel',
        headerName: getMessage('stuff.detail.planGridHeader.moduleModel'),
        flex: 1,
        cellStyle: { justifyContent: 'flex-start' /* 좌측정렬*/ },
      },
      {
        field: 'capacity',
        headerName: getMessage('stuff.detail.planGridHeader.capacity'),
        width: 120,
        cellStyle: { justifyContent: 'flex-end' /* 우측정렬*/ },
      },
      {
        field: 'roofMaterialIdMulti',
        headerName: getMessage('stuff.detail.planGridHeader.roofMaterialIdMulti'),
        width: 140,
        wrapText: true,
        autoHeight: true,
        cellStyle: { justifyContent: 'flex-start' /* 좌측정렬*/ },
        cellRenderer: (params) => {
          //콤마가 아니라 、.. 일본콤마?
          let origin = params.value
          if (origin !== null) {
            return (
              <>
                {origin?.split('、').map((it, idx) => (
                  <span key={idx} className="block">
                    {it}
                    <br />
                  </span>
                ))}
              </>
            )
          } else {
            return null
          }
        },
      },
      {
        field: 'constructSpecification',
        headerName: getMessage('stuff.detail.planGridHeader.constructSpecification'),
        wrapText: true,
        autoHeight: true,
        cellStyle: { justifyContent: 'flex-start' /* 좌측정렬*/ },
        cellRenderer: (params) => {
          let origin = params.value
          if (origin !== null) {
            return (
              <>
                {origin?.split('、').map((it, idx) => (
                  <span key={idx} className="block">
                    {it}
                    <br />
                  </span>
                ))}
              </>
            )
          } else {
            return null
          }
        },
      },
      {
        field: 'supportMethodIdMulti',
        headerName: getMessage('stuff.detail.planGridHeader.supportMethodIdMulti'),
        wrapText: true,
        autoHeight: true,
        cellStyle: { justifyContent: 'flex-start' /* 좌측정렬*/ },
        cellRenderer: (params) => {
          let origin = params.value
          if (origin !== null) {
            return (
              <>
                {origin?.split('、').map((it, idx) => (
                  <span key={idx} className="block">
                    {it}
                    <br />
                  </span>
                ))}
              </>
            )
          } else {
            return null
          }
        },
      },
      {
        field: 'pcTypeNo',
        headerName: getMessage('stuff.detail.planGridHeader.pcTypeNo'),
        flex: 1,
        wrapText: true,
        autoHeight: true,
        cellStyle: { justifyContent: 'flex-start' /* 좌측정렬*/ },
        cellRenderer: (params) => {
          let origin = params.value
          if (origin !== null) {
            return (
              <>
                {origin?.split('、').map((it, idx) => (
                  <span key={idx} className="block">
                    {it}
                    <br />
                  </span>
                ))}
              </>
            )
          } else {
            return null
          }
        },
      },
      {
        field: 'estimateDate',
        headerName: getMessage('stuff.detail.planGridHeader.management'),
        width: 200,
        autoHeight: true,
        cellStyle: { justifyContent: 'center' },
        cellRenderer: (params) => {
          console.log('params::', params.value)
          return (
            <div className="grid-cell-btn">
              <button
                type="button"
                className="grid-btn"
                onClick={() => {
                  console.log('견적서조회버튼클릭')
                }}
              >
                <span className="file"></span>
                {getMessage('stuff.detail.planGrid.btn1')}
              </button>
              <button
                type="button"
                className="grid-btn"
                onClick={() => {
                  console.log('엑셀버튼클릭')
                }}
              >
                <span className="excel"></span>Excel
              </button>
            </div>
          )
        },
      },
    ],
  })

  useEffect(() => {
    if (objectNo) {
      setEditMode('EDIT')
      if (objectNo.substring(0, 1) !== 'T') {
        //벨리데이션 체크용..
        setIsFormValid(true)
      }
      promiseGet({ url: `/api/object/${objectNo}/detail` }).then((res) => {
        if (res.status === 200) {
          if (res.data != null) {
            setDetailData(res.data)
          } else {
            setDetailData({})
          }
          if (isNotEmptyArray(res.data.planList)) {
            setPlanGridProps({ ...planGridProps, planGridData: res.data.planList })
          } else {
            setPlanGridProps({ ...planGridProps, planGridData: [] })
          }
        } else {
          setDetailData({})
          setPlanGridProps({ ...planGridProps, planGridData: [] })
        }
      })
    } else {
      // 신규 상세 공통APi
      // 도도부현API
      get({ url: '/api/object/prefecture/list' }).then((res) => {
        if (!isEmptyArray(res)) {
          setPrefCodeList(res)
        }
      })

      //1차점 : X167 T01
      //2차점 : 10X22, 201X112
      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
        if (!isEmptyArray(res)) {
          const firstList = res.filter((row) => row.saleStoreLevel === '1')
          const otherList = res.filter((row) => row.saleStoreLevel !== '1')

          //1차점 셀렉트박스
          setSaleStoreList(firstList)

          let filterOtherList
          if (sessionState?.storeId === 'T01') {
            filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
            setOriginOtherSaleStoreList(filterOtherList)
            setOtherSaleStoreList(filterOtherList)
          } else {
            //1차점 아닌 판매점 셀렉트박스
            setOriginOtherSaleStoreList(otherList)
            setOtherSaleStoreList(otherList)
          }

          if (sessionState?.storeLvl === '1') {
            setSelOptions(sessionState?.storeId)
            form.setValue('saleStoreId', sessionState?.storeId)
            form.setValue('saleStoreLevel', sessionState?.storeLvl)
          } else {
            setSelOptions(firstList[0].saleStoreId)
            setOtherSelOptions(sessionState?.storeId)
            form.setValue('saleStoreId', firstList[0].saleStoreId)
            form.setValue('otherSaleStoreId', sessionState?.storeId)
            form.setValue('otherSaleStoreLevel', sessionState?.storeLvl)
          }
        }
      })
    }
  }, [objectNo, sessionState])

  useEffect(() => {
    const code1 = findCommonCode(200800) //경칭
    const code2 = findCommonCode(201700) //신축/기축
    const code3 = findCommonCode(202000) //기준풍속 202000
    if (code1 != null) {
      setHonorificCodeList(code1)
    }
    if (code2 != null) {
      setObjectStatusList(code2)
    }
    if (code3 != null) {
      setWindSpeedList(code3)
    }
  }, [commonCode])

  useEffect(() => {
    if (isObjectNotEmpty(detailData)) {
      // console.log('상세데이타세팅:::::', detailData)
      // 도도부현API
      get({ url: '/api/object/prefecture/list' }).then((res) => {
        if (!isEmptyArray(res)) {
          setPrefCodeList(res)
        }
      })

      //1차점 : X167 T01
      //2차점 : 10X22, 201X112
      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
        if (!isEmptyArray(res)) {
          const firstList = res.filter((row) => row.saleStoreLevel === '1')
          const otherList = res.filter((row) => row.saleStoreLevel !== '1')

          //1차점 셀렉트박스
          setSaleStoreList(firstList)

          let filterOtherList
          if (sessionState?.storeId === 'T01') {
            filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
            setOriginOtherSaleStoreList(filterOtherList)
            setOtherSaleStoreList(filterOtherList)
          } else {
            //1차점 아닌 판매점 셀렉트박스
            setOriginOtherSaleStoreList(otherList)
            setOtherSaleStoreList(otherList)
          }
        }

        //상세데이터가 1차점이면 1차점에 세팅
        //상세데이터가 2차점이면 2차점에 세팅하고 세션으로 1차점 세팅
        if (detailData.saleStoreLevel === '1') {
          setSelOptions(detailData.saleStoreId)
          form.setValue('saleStoreId', detailData.saleStoreId)
          form.setValue('saleStoreLevel', detailData.saleStoreLevel)
        } else {
          setSelOptions(sessionState?.storeId)
          form.setValue('saleStoreId', sessionState?.storeId)
          form.setValue('saleStoreLevel', sessionState?.storeLvl)
          setOtherSelOptions(detailData.saleStoreId)
          form.setValue('otherSaleStoreId', detailData.saleStoreId)
          form.setValue('otherSaleStoreLevel', detailData.saleStoreLevel)
        }

        //설계의뢰No.
        form.setValue('planReqNo', detailData.planReqNo)
        //담당자
        form.setValue('receiveUser', detailData.receiveUser)

        //물건구분objectStatusId
        setSelectObjectStatusId(detailData.objectStatusId)
        form.setValue('objectStatusId', detailData.objectStatusId)

        //물건명
        form.setValue('objectName', detailData.objectName)

        //경칭코드
        setSelHonorificCode(detailData.objectNameOmit)
        form.setValue('objectNameOmit', detailData.objectNameOmit)

        //물건명 후리가나
        form.setValue('objectNameKana', detailData.objectNameKana)

        //우편번호
        form.setValue('zipNo', detailData.zipNo)

        //도도부현 / 주소
        setPrefValue(detailData.prefId)
        form.setValue('prefId', detailData.prefId)
        //prefName ???
        form.setValue('address', detailData.address)
        //발전시뮬
        form.setValue('areaId', detailData.areaId)

        //기준풍속
        form.setValue('standardWindSpeedId', detailData.standardWindSpeedId)
        //수직적설량
        form.setValue('verticalSnowCover', detailData.verticalSnowCover)
        //한랭지대책시행 coldRegionFlg 1이면 true
        form.setValue('coldRegionFlg', detailData.coldRegionFlg === '1' ? true : false)

        //면조도구분surfaceType
        // form.setValue('surfaceType', 'Ⅱ')
        // form.setValue('surfaceType', 'III・IV')
        form.setValue('surfaceType', detailData.surfaceType)
        //염해지역용아이템사용 saltAreaFlg 1이면 true
        form.setValue('saltAreaFlg', detailData.saltAreaFlg === '1' ? true : false)
        //설치높이
        form.setValue('installHeight', detailData.installHeight)
        //계약조건
        form.setValue('conType', detailData.conType)
        //메모
        form.setValue('remarks', detailData.remarks)
      })
    }
  }, [detailData, sessionState])

  //경칭선택 변경 이벤트
  const onChangeHonorificCode = (key) => {
    if (isObjectNotEmpty(key)) {
      setSelHonorificCode(key.clCodeNm)
      form.setValue('objectNameOmit', key.clCodeNm)
    } else {
      setSelHonorificCode('')
      form.setValue('objectNameOmit', '')
    }
  }

  //기준풍속 변경 이벤트
  const onChangeWindSpeedCode = (key) => {
    if (isObjectNotEmpty(key)) {
      form.setValue('standardWindSpeedId', key.clCode)
    } else {
      form.setValue('standardWindSpeedId', '')
    }
  }

  //물건구분 변경 이벤트
  const onRadioChange = (key) => {
    setSelectObjectStatusId(key.target.value)
  }
  //1차점 변경 이벤트
  const onSelectionChange = (key) => {
    if (key.saleStoreId === selOptions) {
      return
    }

    const planReqNo = form.watch('planReqNo')
    let delFlg = false

    if (editMode === 'NEW') {
      if (planReqNo !== '') {
        if (confirm(getMessage('stuff.detail.confirm.message1'))) {
          delFlg = true
        } else {
          delFlg = false
        }
      }
    } else {
      // EDIT
      if (planReqNo !== null) {
        if (confirm(getMessage('stuff.detail.confirm.message1'))) {
          delFlg = true
        } else {
          delFlg = false
        }
      }
    }

    let tempObjectNo = 'T'
    if (objectNo) {
      tempObjectNo = objectNo.substring(0, 1)
    }
    if (tempObjectNo === 'T') {
      if (planReqNo) {
        if (delFlg) {
          form.setValue('planReqNo', '')
          if (isObjectNotEmpty(key)) {
            setOtherSaleStoreList(otherSaleStoreList)
            form.setValue('saleStoreId', key.saleStoreId)
            form.setValue('saleStoreName', key.saleStoreName)
            form.setValue('saleStoreLevel', key.saleStoreLevel)
            setSelOptions(key.saleStoreId)
            //선택한 1차점 정보로 2차점 list 추리기
            //長府工産株式会社　大阪支社
            let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
            setOtherSaleStoreList(newOtherSaleStoreList)
          } else {
            //X누름
            setSelOptions('')
            form.setValue('saleStoreId', '')
            form.setValue('saleStoreName', '')
            form.setValue('saleStoreLevel', '')
            form.setValue('otherSaleStoreId', '')
            form.setValue('otherSaleStoreName', '')
            form.setValue('otherSaleStoreLevel', '')
            //1차점 지웠을때 2차점 자동완성 초기화
            setOtherSaleStoreList(originOtherSaleStoreList)
            handleClear()
          }
        }
      } else {
        if (isObjectNotEmpty(key)) {
          setOtherSaleStoreList(otherSaleStoreList)
          form.setValue('saleStoreId', key.saleStoreId)
          form.setValue('saleStoreName', key.saleStoreName)
          form.setValue('saleStoreLevel', key.saleStoreLevel)
          setSelOptions(key.saleStoreId)
          //선택한 1차점 정보로 2차점 list 추리기
          //長府工産株式会社　大阪支社
          let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
          setOtherSaleStoreList(newOtherSaleStoreList)
        } else {
          //X누름
          setSelOptions('')
          form.setValue('saleStoreId', '')
          form.setValue('saleStoreName', '')
          form.setValue('saleStoreLevel', '')
          form.setValue('otherSaleStoreId', '')
          form.setValue('otherSaleStoreName', '')
          form.setValue('otherSaleStoreLevel', '')
          //1차점 지웠을때 2차점 자동완성 초기화
          setOtherSaleStoreList(originOtherSaleStoreList)
          handleClear()
        }
      }
    } else {
      if (isObjectNotEmpty(key)) {
        setOtherSaleStoreList(otherSaleStoreList)
        form.setValue('saleStoreId', key.saleStoreId)
        form.setValue('saleStoreName', key.saleStoreName)
        form.setValue('saleStoreLevel', key.saleStoreLevel)
        setSelOptions(key.saleStoreId)
        //선택한 1차점 정보로 2차점 list 추리기
        //長府工産株式会社　大阪支社
        let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
        setOtherSaleStoreList(newOtherSaleStoreList)
      } else {
        //X누름
        setSelOptions('')
        form.setValue('saleStoreId', '')
        form.setValue('saleStoreName', '')
        form.setValue('saleStoreLevel', '')
        form.setValue('otherSaleStoreId', '')
        form.setValue('otherSaleStoreName', '')
        form.setValue('otherSaleStoreLevel', '')
        //1차점 지웠을때 2차점 자동완성 초기화
        setOtherSaleStoreList(originOtherSaleStoreList)
        handleClear()
      }
    }
  }

  //2차점 변경 이벤트
  const onSelectionChange2 = (key) => {
    if (key.saleStoreId === otherSelOptions) {
      return
    }

    const planReqNo = form.watch('planReqNo')
    let delFlg = false
    if (editMode === 'NEW') {
      if (planReqNo !== '') {
        if (confirm(getMessage('stuff.detail.confirm.message1'))) {
          delFlg = true
        } else {
          delFlg = false
        }
      }
    } else {
      //EDIT
      if (planReqNo !== null) {
        if (confirm(getMessage('stuff.detail.confirm.message1'))) {
          delFlg = true
        } else {
          delFlg = false
        }
      }
    }

    let tempObjectNo = 'T'
    if (objectNo) {
      tempObjectNo = objectNo.substring(0, 1)
    }
    if (tempObjectNo === 'T') {
      if (planReqNo) {
        if (delFlg) {
          form.setValue('planReqNo', '')
          if (isObjectNotEmpty(key)) {
            setOtherSelOptions(key.saleStoreId)
            form.setValue('otherSaleStoreId', key.saleStoreId)
            form.setValue('otherSaleStoreName', key.saleStoreName)
            form.setValue('otherSaleStoreLevel', key.saleStoreLevel)
          } else {
            setOtherSelOptions('')
            form.setValue('otherSaleStoreId', '')
            form.setValue('otherSaleStoreName', '')
            form.setValue('otherSaleStoreLevel', '')
          }
        }
      } else {
        if (isObjectNotEmpty(key)) {
          setOtherSelOptions(key.saleStoreId)
          form.setValue('otherSaleStoreId', key.saleStoreId)
          form.setValue('otherSaleStoreName', key.saleStoreName)
          form.setValue('otherSaleStoreLevel', key.saleStoreLevel)
        } else {
          setOtherSelOptions('')
          form.setValue('otherSaleStoreId', '')
          form.setValue('otherSaleStoreName', '')
          form.setValue('otherSaleStoreLevel', '')
        }
      }
    } else {
      if (isObjectNotEmpty(key)) {
        setOtherSelOptions(key.saleStoreId)
        form.setValue('otherSaleStoreId', key.saleStoreId)
        form.setValue('otherSaleStoreName', key.saleStoreName)
        form.setValue('otherSaleStoreLevel', key.saleStoreLevel)
      } else {
        setOtherSelOptions('')
        form.setValue('otherSaleStoreId', '')
        form.setValue('otherSaleStoreName', '')
        form.setValue('otherSaleStoreLevel', '')
      }
    }
  }

  //1차점 지웠을때 2차점 자동완성 초기화
  const handleClear = () => {
    if (ref.current) {
      ref.current.clearValue()
    }
  }

  //팝업에서 넘어온 우편정보
  const setZipInfo = (info) => {
    setPrefValue(info.prefId)
    form.setValue('prefId', info.prefId)
    form.setValue('prefName', info.address1)
    form.setValue('address', info.address2 + info.address3)
    form.setValue('zipNo', info.zipNo)
  }

  //팝업에서 넘어온 설계의뢰 정보로 바꾸기
  const setPlanReqInfo = (info) => {
    form.setValue('planReqNo', info.planReqNo)
    form.setValue('objectStatusId', info.building)
    form.setValue('objectName', info.planReqName)
    form.setValue('zipNo', info.zipNo)
    form.setValue('address', info.address2)

    prefCodeList.map((row) => {
      if (row.prefName == info.address1) {
        setPrefValue(row.prefId)
        form.setValue('prefId', row.prefId)
        form.setValue('prefName', info.address1)
      }
    })

    //설계의뢰 팝업에선 WL_안붙어서 옴
    form.setValue('standardWindSpeedId', `WL_${info.windSpeed}`)
    form.setValue('verticalSnowCover', info.verticalSnowCover)
    form.setValue('surfaceType', info.surfaceType)
    form.setValue('installHeight', info.installHeight)
    form.setValue('remarks', info.remarks)

    if (info.saleStoreLevel === '1') {
      setSelOptions(info.saleStoreId)
      form.setValue('saleStoreId', info.saleStoreId)
      form.setValue('saleStoreName', info.saleStoreName)
      form.setValue('saleStoreLevel', info.saleStoreLevel)
    } else {
      setOtherSelOptions(info.saleStoreId)
      form.setValue('otherSaleStoreId', info.saleStoreId)
      form.setValue('otherSaleStoreName', info.saleStoreName)
      form.setValue('otherSaleStoreLevel', info.saleStoreLevel)
    }
  }

  //풍속선택 팝업에서 넘어온 바람정보
  const setWindSppedInfo = (info) => {
    form.setValue('standardWindSpeedId', info.windSpeed)
  }

  //receiveUser: '', //담당자
  const _receiveUser = watch('receiveUser')
  //objectName: '', //물건명
  const _objectName = watch('objectName')
  // objectNameOmit: '', //경칭선택
  const _objectNameOmit = watch('objectNameOmit')
  // saleStoreId: '', //1차 판매점ID
  const _saleStoreId = watch('saleStoreId')
  // zipNo: '', //우편번호
  const _zipNo = watch('zipNo')
  // prefId: '', //도도부현
  const _prefId = watch('prefId')
  // address: '', //주소
  const _address = watch('address')
  // areaId: '', //발전량시뮬레이션지역
  const _areaId = watch('areaId')
  // standardWindSpeedId: '', //기준풍속
  const _standardWindSpeedId = watch('standardWindSpeedId')
  // verticalSnowCover: '', //수직적설량
  const _verticalSnowCover = watch('verticalSnowCover')
  // installHeight: '', //설치높이
  const _installHeight = watch('installHeight')

  useEffect(() => {
    if (editMode === 'NEW') {
      const formData = form.getValues()
      let errors = {}
      if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
        errors.receiveUser = true
      }
      if (!formData.objectName || formData.objectName.trim().length === 0) {
        errors.objectName = true
      }
      if (!formData.objectNameOmit) {
        errors.objectNameOmit = true
      }
      if (!formData.saleStoreId) {
        errors.saleStoreId = true
      }

      if (!formData.zipNo) {
        errors.zipNo = true
      }

      if (!formData.prefId) {
        errors.prefId = true
      }

      if (!formData.areaId) {
        errors.areaId = true
      }

      if (!formData.standardWindSpeedId) {
        errors.standardWindSpeedId = true
      }

      if (!formData.verticalSnowCover) {
        errors.verticalSnowCover = true
      }

      if (!formData.installHeight) {
        errors.installHeight = true
      }

      setIsFormValid(Object.keys(errors).length === 0 ? true : false)
    } else {
      //상세일떄 폼체크
      const formData = form.getValues()
      let errors = {}
      if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
        errors.receiveUser = true
      }
      if (!formData.objectName || formData.objectName.trim().length === 0) {
        errors.objectName = true
      }
      if (!formData.objectNameOmit) {
        errors.objectNameOmit = true
      }
      if (!formData.saleStoreId) {
        errors.saleStoreId = true
      }

      if (!formData.zipNo) {
        errors.zipNo = true
      }

      if (!formData.prefId || formData.prefId === '0') {
        errors.prefId = true
      }

      if (!formData.areaId) {
        errors.areaId = true
      }

      if (!formData.standardWindSpeedId) {
        errors.standardWindSpeedId = true
      }

      if (!formData.verticalSnowCover) {
        errors.verticalSnowCover = true
      }

      if (!formData.installHeight) {
        errors.installHeight = true
      }

      // console.log('상세에러필드:::::', errors)
      setIsFormValid(Object.keys(errors).length === 0 ? true : false)
    }
  }, [
    _receiveUser,
    _objectName,
    _objectNameOmit,
    _saleStoreId,
    _zipNo,
    _prefId,
    _address,
    _areaId,
    _standardWindSpeedId,
    _verticalSnowCover,
    _installHeight,
  ])

  // 주소검색 팝업오픈
  const onSearchPostNumberPopOpen = () => {
    setShowAddressButtonValid(true)
  }

  //설계의뢰 팝업 오픈
  const onSearchDesignRequestPopOpen = () => {
    setShowDesignRequestButtonValid(true)
  }

  // 풍속선택 팝업 오픈
  const onSearchWindSpeedPopOpen = () => {
    const prefName = form.watch('prefName')
    if (prefName === '') {
      alert(getMessage('stuff.windSelectPopup.error.message1'))
    } else {
      setShowWindSpeedButtonValid(true)
    }
  }

  useEffect(() => {
    if (prefValue) {
      // 발전량시뮬레이션 지역 목록
      get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
        if (!isEmptyArray(res)) {
          setAreaIdList(res)
        }
      })
    }
  }, [prefValue])

  // 발전량 시뮬레이션 변경
  const handleAreaIdOnChange = (e) => {
    form.setValue('areaId', e.areaId)
    form.setValue('areaName', e.prefName)
  }

  const onValid = async () => {
    const formData = form.getValues()

    let errors = {}
    let fieldNm
    if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
      fieldNm = getMessage('stuff.detail.receiveUser')
      errors = fieldNm
    }
    if (!formData.objectName || formData.objectName.trim().length === 0) {
      fieldNm = getMessage('stuff.detail.objectStatusId')
      errors = fieldNm
    }
    if (!formData.objectNameOmit) {
      fieldNm = getMessage('stuff.detail.objectNameOmit')
      errors = fieldNm
    }
    if (!formData.saleStoreId) {
      fieldNm = getMessage('stuff.detail.saleStoreId')
      errors = fieldNm
    }

    if (!formData.zipNo) {
      fieldNm = getMessage('stuff.detail.zipNo')
      errors = fieldNm
    }

    if (!formData.prefId || formData.prefId === '0') {
      fieldNm = getMessage('stuff.detail.prefId')
      errors = fieldNm
    }

    if (!formData.areaId) {
      fieldNm = getMessage('stuff.detail.areaId')
      errors = fieldNm
    }

    if (!formData.standardWindSpeedId) {
      fieldNm = getMessage('stuff.detail.standardWindSpeedId')
      errors = fieldNm
    }

    if (!formData.verticalSnowCover) {
      fieldNm = getMessage('stuff.detail.verticalSnowCover')
      errors = fieldNm
    }

    if (!formData.installHeight) {
      fieldNm = getMessage('stuff.detail.installHeight')
      errors = fieldNm
    }

    if (Object.keys(errors).length > 0) {
      return alert(getMessage('stuff.detail.save.valierror3', [errors]))
    }

    const apiUrl = '/api/object/save-object'

    const params = {
      objectNo: objectNo,
      planReqNo: formData.planReqNo,
      saleStoreId: formData.otherSaleStoreId ? formData.otherSaleStoreId : formData.saleStoreId,
      saleStoreName: formData.otherSaleStoreName ? formData.otherSaleStoreName : formData.saleStoreName,
      saleStoreLevel: formData.otherSaleStoreLevel ? formData.otherSaleStoreLevel : formData.saleStoreLevel,
      objectStatusId: formData.objectStatusId,
      objectName: formData.objectName,
      objectNameOmit: formData.objectNameOmit,
      objectNameKana: formData.objectNameKana,
      zipNo: formData.zipNo,
      prefId: formData.prefId,
      prefName: formData.prefName,
      address: formData.address,
      areaId: formData.areaId,
      receiveUser: formData.receiveUser,
      installHeight: formData.installHeight,
      standardWindSpeedId: formData.standardWindSpeedId,
      verticalSnowCover: formData.verticalSnowCover,
      surfaceType: formData.surfaceType,
      conType: formData.conType,
      coldRegionFlg: formData.coldRegionFlg === true ? '1' : '0',
      saltAreaFlg: formData.saltAreaFlg === true ? '1' : '0',
      remarks: formData.remarks,
      tempFlg: '0',
      workNo: null,
      workName: null,
    }

    //수직적설량, 설치높이 0인지 체크
    let snow = params.verticalSnowCover
    let height = params.installHeight

    if (snow === '0') {
      return alert(getMessage('stuff.detail.save.valierror1'))
    }
    if (height === '0') {
      return alert(getMessage('stuff.detail.save.valierror2'))
    }

    let detail_sort = Object.keys(detailData)
      .sort()
      .reduce((obj, key) => ((obj[key] = detailData[key]), obj), {})
    let params_sort = Object.keys(params)
      .sort()
      .reduce((obj, key) => ((obj[key] = params[key]), obj), {})

    delete detail_sort.areaName
    delete detail_sort.contentsPath
    delete detail_sort.createDatetime
    delete detail_sort.createUserName
    delete detail_sort.dispCompanyName
    delete detail_sort.firstAgentId
    delete detail_sort.lastEditDatetime
    delete detail_sort.lastEditUserName
    delete detail_sort.planList
    delete detail_sort.planNo
    delete detail_sort.planTotCnt
    delete detail_sort.receiveCompanyName
    delete detail_sort.saleStoreName
    delete detail_sort.rowNumber
    delete detail_sort.prefName
    delete detail_sort.sameObjectInfo
    delete detail_sort.specificationConfirmDate
    delete detail_sort.totCnt
    delete detail_sort.workNo
    delete detail_sort.workName

    delete params_sort.areaName
    delete params_sort.contentsPath
    delete params_sort.createDatetime
    delete params_sort.createUserName
    delete params_sort.dispCompanyName
    delete params_sort.firstAgentId
    delete params_sort.lastEditDatetime
    delete params_sort.lastEditUserName
    delete params_sort.planList
    delete params_sort.planNo
    delete params_sort.planTotCnt
    delete params_sort.receiveCompanyName
    delete params_sort.saleStoreName
    delete params_sort.rowNumber
    delete params_sort.prefName
    delete params_sort.sameObjectInfo
    delete params_sort.specificationConfirmDate
    delete params_sort.totCnt
    delete params_sort.workNo
    delete params_sort.workName

    // console.log(JSON.stringify(detail_sort) === JSON.stringify(params_sort))
    // console.log(Object.entries(detail_sort).toString() === Object.entries(params_sort).toString())
    if (Object.entries(detail_sort).toString() === Object.entries(params_sort).toString()) {
      return alert(getMessage('stuff.detail.noChgData'))
    }

    if (editMode === 'NEW') {
      await promisePost({ url: apiUrl, data: params }).then((res) => {
        //상세화면으로 전환
        if (res.status === 201) {
          alert(getMessage('stuff.detail.save'))
          router.push(`/management/stuff/detail?objectNo=${res.data.objectNo.toString()}`)
        }
      })
    } else {
      // 수정모드일때는 PUT
      await promisePut({ url: apiUrl, data: params }).then((res) => {
        if (res.status === 201) {
          alert(getMessage('stuff.detail.save'))
          router.refresh()
        }
      })
    }
  }

  // 임시저장
  const onTempSave = async () => {
    const formData = form.getValues()
    const params = {
      planReqNo: formData.planReqNo,
      saleStoreId: formData.otherSaleStoreId ? formData.otherSaleStoreId : formData.saleStoreId,
      saleStoreName: formData.otherSaleStoreName ? formData.otherSaleStoreName : formData.saleStoreName,
      saleStoreLevel: formData.otherSaleStoreLevel ? formData.otherSaleStoreLevel : formData.saleStoreLevel,
      objectStatusId: formData.objectStatusId,
      objectName: formData.objectName,
      objectNameOmit: formData.objectNameOmit,
      objectNameKana: formData.objectNameKana,
      zipNo: formData.zipNo,
      prefId: formData.prefId,
      prefName: formData.prefName,
      address: formData.address,
      areaId: formData.areaId,
      receiveUser: formData.receiveUser,
      installHeight: formData.installHeight,
      standardWindSpeedId: formData.standardWindSpeedId,
      verticalSnowCover: formData.verticalSnowCover,
      surfaceType: formData.surfaceType,
      conType: formData.conType,
      coldRegionFlg: formData.coldRegionFlg === true ? '1' : '0',
      saltAreaFlg: formData.saltAreaFlg === true ? '1' : '0',
      remarks: formData.remarks,
      tempFlg: '1',
      workNo: null,
      workName: null,
    }

    //1차점 or 2차점 안고르고 임시저장하면
    if (params.saleStoreId == '') {
      params.saleStoreId = sessionState.storeId
      params.saleStoreLevel = sessionState.storeLvl
    }
    //수직적설량, 설치높이 0인지 체크
    let snow = params.verticalSnowCover
    let height = params.installHeight

    if (snow === '0') {
      return alert(getMessage('stuff.detail.save.valierror1'))
    }
    if (height === '0') {
      return alert(getMessage('stuff.detail.save.valierror2'))
    }
    await promisePost({ url: '/api/object/save-object', data: params }).then((res) => {
      if (res.status === 201) {
        alert(getMessage('stuff.detail.tempSave.message1'))
        router.push(`${pathname}?objectNo=${res.data.objectNo.toString()}`)
      }
    })
  }

  // 물건삭제
  const onDelete = () => {
    const specificationConfirmDate = detailData.specificationConfirmDate
    if (specificationConfirmDate != null) {
      alert(getMessage('stuff.detail.delete.message1'))
    } else {
      if (confirm(getMessage('common.message.data.delete'))) {
        del({ url: `/api/object/${objectNo}` }).then((res) => {
          router.push('/management/stuff')
        })
      }
    }
  }

  // 숫자만 입력 가능
  const handleKeyUp = (e) => {
    let input = e.target
    input.value = input.value.replace(/[^0-9]/g, '')
  }

  return (
    <>
      {(editMode === 'NEW' && (
        <form onSubmit={handleSubmit(onValid)}>
          <div className="sub-table-box">
            <div className="promise-gudie">
              <span className="important">*</span>
              {getMessage('stuff.detail.required')}
            </div>
            <div className="infomation-table">
              <table>
                <colgroup>
                  <col style={{ width: '200px' }} />
                  <col />
                </colgroup>
                <tbody>
                  <tr>
                    <th>{getMessage('stuff.detail.planReqNo')}</th>
                    <td>
                      <div className="flx-box">
                        <div className="product-input-wrap mr5">
                          <input type="text" className="product-input" readOnly value={form.watch('planReqNo') || ''} />
                          {(form.watch('planReqNo') !== '' && (
                            <button
                              type="button"
                              className="product-delete"
                              onClick={() => {
                                form.setValue('planReqNo', '')
                              }}
                            ></button>
                          )) ||
                            null}
                        </div>
                        <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
                          {getMessage('stuff.planReqPopup.title')}
                        </Button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.receiveUser')} <span className="important">*</span>
                    </th>
                    <td>
                      <div className="input-wrap" style={{ width: '500px' }}>
                        <input type="text" className="input-light" {...form.register('receiveUser')} />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.objectStatusId')} <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        {/* 라디오시작 */}
                        {objectStatusList.map((row) => {
                          return (
                            <div className="d-check-radio light mr10" key={`objectStatusId_${row.clCode}`}>
                              <input
                                type="radio"
                                name="objectStatusId"
                                value={row.clCode}
                                id={`objectStatus${row.clCode}`}
                                {...register('objectStatusId')}
                                onChange={onRadioChange}
                                checked={row.clCode === selectObjectStatusId}
                              />
                              <label htmlFor={`objectStatus${row.clCode}`}>{row.clCodeNm}</label>
                            </div>
                          )
                        })}
                        {/* 라디오끝 */}
                        <div className="input-wrap mr5" style={{ width: '545px' }}>
                          <input type="text" className="input-light" {...form.register('objectName')} />
                        </div>
                        <div className="select-wrap" style={{ width: '120px' }}>
                          <Select
                            {...register('objectNameOmit')}
                            id="long-value-select0"
                            instanceId="long-value-select0"
                            className="react-select-custom"
                            classNamePrefix="custom"
                            placeholder="Select"
                            options={honorificCodeList}
                            onChange={onChangeHonorificCode}
                            getOptionLabel={(x) => x.clCodeNm}
                            getOptionValue={(x) => x.clCode}
                            isClearable={true}
                            isSearchable={false}
                            value={honorificCodeList.filter(function (option) {
                              return option.clCodeNm === selHonorificCode
                            })}
                          ></Select>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>{getMessage('stuff.detail.objectNameKana')}</th>
                    <td>
                      <div className="input-wrap" style={{ width: '789px' }}>
                        <input type="text" className="input-light" {...form.register('objectNameKana')} />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <div className="flx-box">
                        <div className="title">
                          {getMessage('stuff.detail.saleStoreId')}
                          <span className="important">*</span>
                        </div>
                        <div className="tooltips">
                          <span>{getMessage('stuff.detail.tooltip.saleStoreId')}</span>
                        </div>
                      </div>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap mr5" style={{ width: '567px' }}>
                          <Select
                            id="long-value-select1"
                            instanceId="long-value-select1"
                            className="react-select-custom"
                            classNamePrefix="custom"
                            placeholder="Select"
                            options={saleStoreList}
                            onChange={onSelectionChange}
                            getOptionLabel={(x) => x.saleStoreName}
                            getOptionValue={(x) => x.saleStoreId}
                            isClearable={sessionState?.storeLvl === '1' ? true : false}
                            isDisabled={sessionState?.storeLvl !== '1' ? true : false}
                            value={saleStoreList.filter(function (option) {
                              return option.saleStoreId === selOptions
                            })}
                          />
                        </div>
                        <div className="input-wrap" style={{ width: '216px' }}>
                          <input
                            type="text"
                            className="input-light"
                            value={form.watch('saleStoreId') || ''}
                            {...form.register('saleStoreId')}
                            readOnly
                          />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <div className="flx-box">
                        <div className="title">{getMessage('stuff.detail.otherSaleStoreId')}</div>
                        <div className="tooltips">
                          <span>{getMessage('stuff.detail.tooltip.saleStoreId')}</span>
                        </div>
                      </div>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap mr5" style={{ width: '567px' }}>
                          <Select
                            id="long-value-select2"
                            instanceId="long-value-select2"
                            className="react-select-custom"
                            classNamePrefix="custom"
                            placeholder="Select"
                            ref={ref}
                            options={otherSaleStoreList}
                            onChange={onSelectionChange2}
                            getOptionLabel={(x) => x.saleStoreName}
                            getOptionValue={(x) => x.saleStoreId}
                            isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
                            isClearable={sessionState?.storeLvl === '1' ? true : false}
                            value={otherSaleStoreList.filter(function (option) {
                              return option.saleStoreId === otherSelOptions
                            })}
                          />
                        </div>
                        <div className="input-wrap" style={{ width: '216px' }}>
                          <input
                            type="text"
                            className="input-light"
                            value={form.watch('otherSaleStoreId') || ''}
                            {...form.register('otherSaleStoreId')}
                            readOnly
                          />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.zipNo')} <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="input-wrap mr5" style={{ width: '200px' }}>
                          <input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
                        </div>
                        <Button className="btn-origin grey" onClick={onSearchPostNumberPopOpen}>
                          {getMessage('stuff.detail.btn.addressPop')}
                        </Button>
                        <div className="guide">{getMessage('stuff.detail.btn.addressPop.guide')}</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.prefId')}
                      <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap" style={{ width: '200px' }}>
                          {prefCodeList?.length > 0 && (
                            <Select
                              id="long-value-select3"
                              instanceId="long-value-select3"
                              className="react-select-custom"
                              classNamePrefix="custom"
                              placeholder="Select"
                              options={prefCodeList}
                              getOptionLabel={(x) => x.prefName}
                              getOptionValue={(x) => x.prefId}
                              isSearchable={false}
                              value={prefCodeList.filter(function (option) {
                                return option.prefId === prefValue
                              })}
                              isDisabled={true}
                            />
                          )}
                        </div>
                        <div className="input-wrap mr5" style={{ width: '580px' }}>
                          <input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.areaId')} <span className="important">*</span>
                    </th>
                    <td>
                      <div className="select-wrap" style={{ width: '200px' }}>
                        <Select
                          id="long-value-select4"
                          instanceId="long-value-select4"
                          className="react-select-custom"
                          classNamePrefix="custom"
                          options={areaIdList}
                          placeholder="Select"
                          getOptionLabel={(x) => x.prefName}
                          getOptionValue={(x) => x.areaId}
                          isSearchable={false}
                          onChange={handleAreaIdOnChange}
                          value={areaIdList.filter(function (option) {
                            return option.areaId === form.watch('areaId')
                          })}
                          isDisabled={areaIdList.length > 0 ? false : true}
                        />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.standardWindSpeedId')} <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap mr10" style={{ width: '200px' }}>
                          <Select
                            {...register('standardWindSpeedId')}
                            id="long-value-select5"
                            instanceId="long-value-select5"
                            className="react-select-custom"
                            classNamePrefix="custom"
                            placeholder="Select"
                            options={windSpeedList}
                            onChange={onChangeWindSpeedCode}
                            getOptionLabel={(x) => x.clCodeNm}
                            getOptionValue={(x) => x.clCode}
                            isClearable={true}
                            isSearchable={false}
                            value={windSpeedList.filter(function (option) {
                              return option.clCode === watch('standardWindSpeedId')
                            })}
                          ></Select>
                        </div>
                        <span className="mr10">{getMessage('stuff.detail.standardWindSpeedIdSpan')}</span>
                        <Button type="button" className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
                          {getMessage('stuff.detail.btn.windSpeedPop')}
                        </Button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.verticalSnowCover')} <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="input-wrap mr10" style={{ width: '200px' }}>
                          <input
                            type="text"
                            className="input-light"
                            onKeyUp={handleKeyUp}
                            value={form.watch('verticalSnowCover') || ''}
                            {...register('verticalSnowCover')}
                          />
                        </div>
                        <span className="mr10">cm</span>
                        <div className="d-check-box light">
                          <input type="checkbox" id="coldRegionFlg" {...form.register('coldRegionFlg')} />
                          <label htmlFor="coldRegionFlg">{getMessage('stuff.detail.coldRegionFlg')}</label>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.surfaceType')} <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="d-check-radio light mr10">
                          <input type="radio" name="surfaceType" value="III・IV" id="surfaceType0" {...form.register('surfaceType')} />
                          <label htmlFor="surfaceType0">III・IV</label>
                        </div>
                        <div className="d-check-radio light mr10">
                          <input type="radio" name="surfaceType" value="Ⅱ" id="surfaceType1" {...form.register('surfaceType')} />
                          <label htmlFor="surfaceType1">Ⅱ</label>
                        </div>
                        <div className="d-check-box light mr5">
                          <input type="checkbox" id="saltAreaFlg" {...form.register('saltAreaFlg')} />
                          <label htmlFor="saltAreaFlg">{getMessage('stuff.detail.saltAreaFlg')}</label>
                        </div>
                        <div className="tooltips">
                          <span>{getMessage('stuff.detail.tooltip.surfaceType')}</span>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      {getMessage('stuff.detail.installHeight')} <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="input-wrap mr10" style={{ width: '200px' }}>
                          <input
                            type="text"
                            className="input-light"
                            onKeyUp={handleKeyUp}
                            value={form.watch('installHeight') || ''}
                            {...register('installHeight')}
                          />
                        </div>
                        <span>m</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>{getMessage('stuff.detail.conType')}</th>
                    <td>
                      <div className="flx-box">
                        <div className="d-check-radio light mr10">
                          <input type="radio" name="conType" value="0" id="conType0" {...form.register('conType')} />
                          <label htmlFor="conType0">{getMessage('stuff.detail.conType0')}</label>
                        </div>
                        <div className="d-check-radio light mr10">
                          <input type="radio" name="conType" value="1" id="conType1" {...form.register('conType')} />
                          <label htmlFor="conType1">{getMessage('stuff.detail.conType1')}</label>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>{getMessage('stuff.detail.remarks')}</th>
                    <td>
                      <div className="input-wrap">
                        <input type="text" className="input-light" {...form.register('remarks')} />
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div className="sub-right-footer">
              {!isFormValid ? (
                <Button className="btn-origin grey mr5" onClick={onTempSave}>
                  {getMessage('stuff.detail.btn.tempSave')}
                </Button>
              ) : (
                <Button type="submit" className="btn-origin navy mr5">
                  {getMessage('stuff.detail.btn.save')}
                </Button>
              )}
              <Link href="/management/stuff" scroll={false}>
                <button type="button" className="btn-origin grey">
                  {getMessage('stuff.detail.btn.moveList')}
                </button>
              </Link>
            </div>
          </div>
        </form>
      )) || (
        <>
          <form onSubmit={handleSubmit(onValid)}>
            <div className="sub-table-box">
              <div className="promise-gudie">
                <span className="important">*</span> {getMessage('stuff.detail.required')}
              </div>
              <div className="infomation-wrap">
                <div className="infomation-table">
                  <table>
                    <colgroup>
                      <col style={{ width: '200px' }} />
                      <col />
                    </colgroup>
                    <tbody>
                      <tr>
                        <th>{getMessage('stuff.detail.planReqNo')}</th>
                        <td>
                          <div className="flx-box">
                            <div className="product-input-wrap mr5">
                              <input type="text" className="product-input" readOnly value={form.watch('planReqNo') || ''} />
                              {/* {detailData?.tempFlg === '1' && form.watch('planReqNo') ? ( */}
                              {objectNo.substring(0, 1) === 'T' && form.watch('planReqNo') ? (
                                <button
                                  type="button"
                                  className="product-delete"
                                  onClick={() => {
                                    form.setValue('planReqNo', '')
                                  }}
                                ></button>
                              ) : null}
                            </div>
                            {/* {detailData?.tempFlg === '1' ? ( */}
                            {objectNo.substring(0, 1) === 'T' ? (
                              <>
                                <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
                                  {getMessage('stuff.planReqPopup.title')}
                                </Button>
                              </>
                            ) : null}
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <th>
                          {getMessage('stuff.detail.receiveUser')} <span className="important">*</span>
                        </th>
                        <td>
                          <div className="input-wrap" style={{ width: '500px' }}>
                            <input type="text" className="input-light" {...form.register('receiveUser')} value={form.watch('receiveUser') || ''} />
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <th>
                          {getMessage('stuff.detail.objectStatusId')} <span className="important">*</span>
                        </th>
                        <td>
                          <div className="flx-box">
                            {/* 상세라디오시작 */}
                            {objectStatusList.map((row) => {
                              return (
                                <div className="d-check-radio light mr10" key={`objectStatusId_${row.clCode}`}>
                                  <input
                                    type="radio"
                                    name="objectStatusId"
                                    value={row.clCode}
                                    id={`objectStatus${row.clCode}`}
                                    {...register('objectStatusId')}
                                    onChange={onRadioChange}
                                    checked={row.clCode === selectObjectStatusId}
                                  />
                                  <label htmlFor={`objectStatus${row.clCode}`}>{row.clCodeNm}</label>
                                </div>
                              )
                            })}
                            {/* 상세라디오끝 */}
                            <div className="input-wrap mr5" style={{ width: '545px' }}>
                              <input type="text" className="input-light" {...form.register('objectName')} />
                            </div>
                            <div className="select-wrap" style={{ width: '120px' }}>
                              <Select
                                {...register('objectNameOmit')}
                                id="long-value-select0"
                                instanceId="long-value-select0"
                                className="react-select-custom"
                                classNamePrefix="custom"
                                placeholder="Select"
                                options={honorificCodeList}
                                onChange={onChangeHonorificCode}
                                getOptionLabel={(x) => x.clCodeNm}
                                getOptionValue={(x) => x.clCode}
                                isClearable={true}
                                isSearchable={false}
                                value={honorificCodeList.filter(function (option) {
                                  return option.clCodeNm === selHonorificCode
                                })}
                              ></Select>
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <th>{getMessage('stuff.detail.objectNameKana')}</th>
                        <td>
                          <div className="input-wrap" style={{ width: '789px' }}>
                            <input type="text" className="input-light" {...form.register('objectNameKana')} />
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <th>
                          <div className="flx-box">
                            <div className="title">
                              {getMessage('stuff.detail.saleStoreId')}
                              <span className="important">*</span>
                            </div>
                            <div className="tooltips">
                              <span>{getMessage('stuff.detail.tooltip.saleStoreId')}</span>
                            </div>
                          </div>
                        </th>
                        <td>
                          <div className="flx-box">
                            <div className="select-wrap mr5" style={{ width: '567px' }}>
                              <Select
                                id="long-value-select1"
                                instanceId="long-value-select1"
                                className="react-select-custom"
                                classNamePrefix="custom"
                                placeholder="Select"
                                options={saleStoreList}
                                onChange={onSelectionChange}
                                getOptionLabel={(x) => x.saleStoreName}
                                getOptionValue={(x) => x.saleStoreId}
                                isClearable={sessionState?.storeLvl === '1' ? true : false}
                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
                                value={saleStoreList.filter(function (option) {
                                  return option.saleStoreId === selOptions
                                })}
                              />
                            </div>
                            <div className="input-wrap" style={{ width: '216px' }}>
                              <input
                                type="text"
                                className="input-light"
                                value={form.watch('saleStoreId') || ''}
                                {...form.register('saleStoreId')}
                                readOnly
                              />
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <th>
                          <div className="flx-box">
                            <div className="title">{getMessage('stuff.detail.otherSaleStoreId')}</div>
                            <div className="tooltips">
                              <span>{getMessage('stuff.detail.tooltip.saleStoreId')}</span>
                            </div>
                          </div>
                        </th>
                        <td>
                          <div className="flx-box">
                            <div className="select-wrap mr5" style={{ width: '567px' }}>
                              <Select
                                id="long-value-select2"
                                instanceId="long-value-select2"
                                className="react-select-custom"
                                classNamePrefix="custom"
                                placeholder="Select"
                                ref={ref}
                                options={otherSaleStoreList}
                                onChange={onSelectionChange2}
                                getOptionLabel={(x) => x.saleStoreName}
                                getOptionValue={(x) => x.saleStoreId}
                                isDisabled={sessionState?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true}
                                isClearable={sessionState?.storeLvl === '1' ? true : false}
                                value={otherSaleStoreList.filter(function (option) {
                                  return option.saleStoreId === otherSelOptions
                                })}
                              />
                            </div>
                            <div className="input-wrap" style={{ width: '216px' }}>
                              <input
                                type="text"
                                className="input-light"
                                value={form.watch('otherSaleStoreId') || ''}
                                {...form.register('otherSaleStoreId')}
                                readOnly
                              />
                            </div>
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <th>
                          {getMessage('stuff.detail.zipNo')} <span className="important">*</span>
                        </th>
                        <td>
                          <div className="flx-box">
                            <div className="input-wrap mr5" style={{ width: '200px' }}>
                              <input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
                            </div>
                            <Button className="btn-origin grey" onClick={onSearchPostNumberPopOpen}>
                              {getMessage('stuff.detail.btn.addressPop')}
                            </Button>
                            <div className="guide">{getMessage('stuff.detail.btn.addressPop.guide')}</div>
                          </div>
                        </td>
                      </tr>
                      {/* 도도부현 /주소 시작*/}
                      <tr>
                        <th>
                          {getMessage('stuff.detail.prefId')}
                          <span className="important">*</span>
                        </th>
                        <td>
                          <div className="flx-box">
                            <div className="select-wrap" style={{ width: '200px' }}>
                              {prefCodeList?.length > 0 && (
                                <Select
                                  id="long-value-select3"
                                  instanceId="long-value-select3"
                                  className="react-select-custom"
                                  classNamePrefix="custom"
                                  placeholder="Select"
                                  options={prefCodeList}
                                  getOptionLabel={(x) => x.prefName}
                                  getOptionValue={(x) => x.prefId}
                                  isSearchable={false}
                                  value={prefCodeList.filter(function (option) {
                                    return option.prefId === prefValue
                                  })}
                                  isDisabled={true}
                                />
                              )}
                            </div>
                            <div className="input-wrap mr5" style={{ width: '580px' }}>
                              <input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
                            </div>
                          </div>
                        </td>
                      </tr>
                      {/* 도도부현 /주소 끝 */}
                      {/* 발전량시뮬레이션지역시작 */}
                      <tr>
                        <th>
                          {getMessage('stuff.detail.areaId')} <span className="important">*</span>
                        </th>
                        <td>
                          <div className="select-wrap" style={{ width: '200px' }}>
                            <Select
                              id="long-value-select4"
                              instanceId="long-value-select4"
                              className="react-select-custom"
                              classNamePrefix="custom"
                              options={areaIdList}
                              placeholder="Select"
                              getOptionLabel={(x) => x.prefName}
                              getOptionValue={(x) => x.areaId}
                              isSearchable={false}
                              onChange={handleAreaIdOnChange}
                              value={areaIdList.filter(function (option) {
                                return option.areaId === form.watch('areaId')
                              })}
                              isDisabled={areaIdList.length > 0 ? false : true}
                            />
                          </div>
                        </td>
                      </tr>
                      {/* 발전량시뮬레이션지역끝 */}
                      {/* 기준풍속시작 */}
                      <tr>
                        <th>
                          {getMessage('stuff.detail.standardWindSpeedId')} <span className="important">*</span>
                        </th>
                        <td>
                          <div className="flx-box">
                            <div className="select-wrap mr10" style={{ width: '200px' }}>
                              <Select
                                {...register('standardWindSpeedId')}
                                id="long-value-select5"
                                instanceId="long-value-select5"
                                className="react-select-custom"
                                classNamePrefix="custom"
                                placeholder="Select"
                                options={windSpeedList}
                                onChange={onChangeWindSpeedCode}
                                getOptionLabel={(x) => x.clCodeNm}
                                getOptionValue={(x) => x.clCode}
                                isClearable={true}
                                isSearchable={false}
                                value={windSpeedList.filter(function (option) {
                                  return option.clCode === watch('standardWindSpeedId')
                                })}
                              ></Select>
                            </div>
                            <span className="mr10">{getMessage('stuff.detail.standardWindSpeedIdSpan')}</span>
                            <Button type="button" className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
                              {getMessage('stuff.detail.btn.windSpeedPop')}
                            </Button>
                          </div>
                        </td>
                      </tr>
                      {/* 기준풍속끝 */}
                      {/* 수직적설량시작 */}
                      <tr>
                        <th>
                          {getMessage('stuff.detail.verticalSnowCover')} <span className="important">*</span>
                        </th>
                        <td>
                          <div className="flx-box">
                            <div className="input-wrap mr10" style={{ width: '200px' }}>
                              <input
                                type="text"
                                className="input-light"
                                onKeyUp={handleKeyUp}
                                value={form.watch('verticalSnowCover') || ''}
                                {...register('verticalSnowCover')}
                              />
                            </div>
                            <span className="mr10">cm</span>
                            <div className="d-check-box light">
                              <input type="checkbox" id="coldRegionFlg" {...form.register('coldRegionFlg')} />
                              <label htmlFor="coldRegionFlg">{getMessage('stuff.detail.coldRegionFlg')}</label>
                            </div>
                          </div>
                        </td>
                      </tr>
                      {/* 수직적설량끝 */}
                      {/* 면조도구분시작 */}
                      <tr>
                        <th>
                          {getMessage('stuff.detail.surfaceType')} <span className="important">*</span>
                        </th>
                        <td>
                          <div className="flx-box">
                            <div className="d-check-radio light mr10">
                              <input type="radio" name="surfaceType" value="III・IV" id="surfaceType0" {...form.register('surfaceType')} />
                              <label htmlFor="surfaceType0">III・IV</label>
                            </div>
                            <div className="d-check-radio light mr10">
                              <input type="radio" name="surfaceType" value="Ⅱ" id="surfaceType1" {...form.register('surfaceType')} />
                              <label htmlFor="surfaceType1">Ⅱ</label>
                            </div>
                            <div className="d-check-box light mr5">
                              <input type="checkbox" id="saltAreaFlg" {...form.register('saltAreaFlg')} />
                              <label htmlFor="saltAreaFlg">{getMessage('stuff.detail.saltAreaFlg')}</label>
                            </div>
                            <div className="tooltips">
                              <span>{getMessage('stuff.detail.tooltip.surfaceType')}</span>
                            </div>
                          </div>
                        </td>
                      </tr>
                      {/* 면조도구분끝 */}
                      {/* 설치높이시작 */}
                      <tr>
                        <th>
                          {getMessage('stuff.detail.installHeight')} <span className="important">*</span>
                        </th>
                        <td>
                          <div className="flx-box">
                            <div className="input-wrap mr10" style={{ width: '200px' }}>
                              <input
                                type="text"
                                className="input-light"
                                onKeyUp={handleKeyUp}
                                value={form.watch('installHeight') || ''}
                                {...register('installHeight')}
                              />
                            </div>
                            <span>m</span>
                          </div>
                        </td>
                      </tr>
                      {/* 설치높이끝 */}
                      {/* 계약조건시작 */}
                      <tr>
                        <th>{getMessage('stuff.detail.conType')}</th>
                        <td>
                          <div className="flx-box">
                            <div className="d-check-radio light mr10">
                              <input type="radio" name="conType" value="0" id="conType0" {...form.register('conType')} />
                              <label htmlFor="conType0">{getMessage('stuff.detail.conType0')}</label>
                            </div>
                            <div className="d-check-radio light mr10">
                              <input type="radio" name="conType" value="1" id="conType1" {...form.register('conType')} />
                              <label htmlFor="conType1">{getMessage('stuff.detail.conType1')}</label>
                            </div>
                          </div>
                        </td>
                      </tr>
                      {/* 계약조건끝 */}
                      {/* 메모시작 */}
                      <tr>
                        <th>{getMessage('stuff.detail.remarks')}</th>
                        <td>
                          <div className="input-wrap">
                            <input type="text" className="input-light" {...form.register('remarks')} />
                          </div>
                        </td>
                      </tr>
                      {/* 메모끝 */}
                    </tbody>
                  </table>
                </div>
              </div>
              {/* {detailData?.tempFlg === '0' ? ( */}
              {objectNo.substring(0, 1) !== 'T' ? (
                <>
                  {/* 진짜R 플랜시작 */}
                  <div className="table-box-title-wrap">
                    <div className="title-wrap">
                      <h3>{getMessage('stuff.detail.planList.title')}</h3>
                      <ul className="info-wrap">
                        <li>
                          {getMessage('stuff.detail.planList.cnt')}
                          <span className="red"> {detailData.planList?.length}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div className="information-help-wrap">
                    <div className="information-help-tit-wrap">
                      <div className="help-tit-icon"></div>
                      <div className="help-tit">{getMessage('stuff.detail.planList.help')}</div>
                    </div>
                    <div className="information-help-guide">
                      <span>{getMessage('stuff.detail.planList.guide1')}</span>
                      <span>{getMessage('stuff.detail.planList.guide2')}</span>
                      <span>{getMessage('stuff.detail.planList.guide3')}</span>
                    </div>
                  </div>
                  <div className="information-grid">
                    <div className="q-grid no-cols">
                      <StuffPlanQGrid {...planGridProps} />
                    </div>
                  </div>
                  {/* 진짜R 플랜끝 */}
                  <div className="sub-right-footer">
                    <Link href="/management/stuff" scroll={false}>
                      <button type="button" className="btn-origin grey mr5">
                        R상세: {getMessage('stuff.detail.btn.moveList')}
                      </button>
                    </Link>
                    <Button type="submit" className="btn-origin navy mr5">
                      R상세:{getMessage('stuff.detail.btn.save')}
                    </Button>
                    <Button type="button" className="btn-origin grey" onClick={onDelete}>
                      {getMessage('stuff.detail.btn.delete')}
                    </Button>
                  </div>
                </>
              ) : (
                <>
                  <div className="sub-right-footer">
                    {!isFormValid ? (
                      <Button className="btn-origin grey mr5" onClick={onTempSave}>
                        TEMP상세:{getMessage('stuff.detail.btn.tempSave')}
                      </Button>
                    ) : (
                      <Button type="submit" className="btn-origin navy mr5">
                        TEMP상세:{getMessage('stuff.detail.btn.save')}
                      </Button>
                    )}
                    <Link href="/management/stuff" scroll={false}>
                      <button type="button" className="btn-origin grey">
                        TEMP상세:{getMessage('stuff.detail.btn.moveList')}
                      </button>
                    </Link>
                  </div>
                </>
              )}
            </div>
          </form>
        </>
      )}
      {showAddressButtonValid && <FindAddressPop setShowAddressButtonValid={setShowAddressButtonValid} zipInfo={setZipInfo} />}
      {showDesignRequestButtonValid && (
        <PlanRequestPop
          setShowDesignRequestButtonValid={setShowDesignRequestButtonValid}
          saleStoreId={form.watch('saleStoreId')}
          saleStoreLevel={form.watch('saleStoreLevel')}
          otherSaleStoreId={form.watch('otherSaleStoreId')}
          otherSaleStoreLevel={form.watch('otherSaleStoreLevel')}
          planReqInfo={setPlanReqInfo}
        />
      )}
      {showWindSpeedButtonValid && (
        <WindSelectPop setShowWindSpeedButtonValid={setShowWindSpeedButtonValid} prefName={form.watch('prefName')} windSpeedInfo={setWindSppedInfo} />
      )}
    </>
  )
}