'use client'

import React, { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { Button } from '@nextui-org/react'
import Select from 'react-dropdown-select'
import Link from 'next/link'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
import { useMessage } from '@/hooks/useMessage'
import { useForm } from 'react-hook-form'
import { useRecoilValue } from 'recoil'
export default function StuffDetail() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { getMessage } = useMessage()
  const globalLocaleState = useRecoilValue(globalLocaleStore)

  const { get, post, del } = useAxios(globalLocaleState)
  //form
  const formInitValue = {
    // 물건번호 T...(임시) R...(진짜)
    dispCompanyName: '', //담당자
    objectStatusId: '0', //물건구분(신축:0 기축 : 1)
    objectName: '', //물건명
    objectNameOmit: '', //경칭선택
    objectNameKana: '', //물건명 후리가나
    saleStoreId: '', //판매점ID
    saleStoreName: '', //판매점명
    otherSaleStoreId: '',
    otherSaleStoreName: '',
    zipNo: '', //우편번호
    prefId: '', //도도부현
    prefName: '',
    address: '', //주소
    areaId: '', //발전량시뮬레이션지역new
    windSpeed: '', //기준풍속
    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 [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
  const [prefValue, setPrefValue] = useState('')
  const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
  const [otherSaleStoreList, setOtherSaleStoreList] = useState([])

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

  const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
  const [buttonValid, setButtonValid] = useState(false) //주소검색 활성화 컨트롤
  const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set

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

  useEffect(() => {
    if (objectNo) {
      //console.log('수정화면')
      setEditMode('EDIT')

      if (objectNo.substring(0, 1) === 'R') {
        //진짜
        setIsFormValid(true)
      }
      get({ url: `/api/object/${objectNo}/detail` }).then((res) => {
        // console.log('물건번호로 상세 API 호출')
        if (res != null) {
          setDetailData(res)

          // 신규 상세 공통APi
          // 도도부현API
          get({ url: '/api/object/prefecture/list' }).then((res) => {
            if (!isEmptyArray(res)) {
              console.log('도도부현API 결과:::', res)
              setPrefCodeList(res)
            }
          })
          // 판매점목록 API /api/object/saleStore/판매점코드/list - 판매점 목록 조회
          // 임시 1차점 판매점코드 saleStoreId=201TES01
          // T01
          //1차점 : X167
          get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
            if (!isEmptyArray(res)) {
              // console.log('판매점 결과:::::', res)
              setSaleStoreList(res)
              //1차 판매점 자동완성 값 셋팅
              form.setValue('saleStoreId', res[0].saleStoreId)
              //1차 판매점 번호 셋팅
              form.setValue('saleStoreName', res[0].saleStoreId)
              setOtherSaleStoreList([])
            }
          })
        }
      })
    } else {
      // 신규 상세 공통APi
      // 도도부현API
      get({ url: '/api/object/prefecture/list' }).then((res) => {
        if (!isEmptyArray(res)) {
          // console.log('신규화면 도도부현API 결과:::', res)
          setPrefCodeList(res)
        }
      })
      // 판매점목록 API /api/object/saleStore/판매점코드/list - 판매점 목록 조회
      // 임시 1차점 판매점코드 saleStoreId=201TES01
      // T01
      //1차점 : X167
      get({ url: `/api/object/saleStore/X167/list` }).then((res) => {
        if (!isEmptyArray(res)) {
          // console.log('판매점 결과:::::', res)
          const firstList = res.filter((row) => row.saleStoreLevel === '1')
          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
          // console.log('first:::::', firstList)
          // console.log('otherList:::::', otherList)
          //1차점 셀렉트박스
          setSaleStoreList(firstList)
          //1차 판매점 자동완성 값 셋팅
          form.setValue('saleStoreId', firstList[0].saleStoreId)
          //1차 판매점 번호 셋팅
          form.setValue('saleStoreName', firstList[0].saleStoreId)

          //1차점 아닌 판매점 셀렉트박스
          setOtherSaleStoreList(otherList)
          form.setValue('otherSaleStoreId', otherList[0].saleStoreId)
          form.setValue('otherSaleStoreName', otherList[0].saleStoreId)
        }
      })
    }
  }, [objectNo])

  //1차점 변경 이벤트
  const onSelectionChange = (key) => {
    if (key == null) {
      form.setValue('saleStoreId', '')
      form.setValue('saleStoreName', '')
    } else {
      const name = saleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
      form.setValue('saleStoreId', key.target.value)
      form.setValue('saleStoreName', name)
    }
  }

  //2차점 변경 이벤트
  const onSelectionChange2 = (key) => {
    const name = otherSaleStoreList.find((obj) => obj.saleStoreId === key.target.value).saleStoreName
    form.setValue('otherSaleStoreId', key.target.value)
    form.setValue('otherSaleStoreNm', name)
  }
  // 우편번호 숫자만 체크
  const _zipNo = watch('zipNo')
  useEffect(() => {
    if (_zipNo !== '' && _zipNo.length === 7 && !_zipNo.match(/\D/g)) {
      setButtonValid(true)
    } else {
      setButtonValid(false)
    }
  }, [_zipNo])

  //임시저장 저장 버튼 컨트롤
  // dispCompanyName: '', //담당자
  // objectName: '', //물건명
  // objectNameOmit: '', //경칭선택
  // saleStoreId: '', //판매점ID
  // zipNo: '', //우편번호
  // prefId: '', //도도부현
  // address: '', //주소
  // areaId: '', //발전량시뮬레이션지역new
  // windSpeed: '', //기준풍속
  // verticalSnowCover: '', //수직적설량
  // coldRegionFlg: false, //한랭지대책시행
  // surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
  // saltAreaFlg: false, //염해지역용아이템사용
  // installHeight: '', //설치높이
  // conType : '0' //계약조건(잉여 / 전량)
  // remarks: '', //메모
  // tempFlag: 'T', //임시저장(1) 저장(0)
  const _dispCompanyName = watch('dispCompanyName')
  const _objectName = watch('objectName')
  const _objectNameOmit = watch('objectNameOmit')
  const _saleStoreId = watch('saleStoreId')
  const _otherSaleStoreId = watch('otherSaleStoreId')
  const _prefId = watch('prefId')
  const _address = watch('address')
  const _areaId = watch('areaId') //new
  const _windSpeed = watch('windSpeed')
  const _verticalSnowCover = watch('verticalSnowCover')
  const _installHeight = watch('installHeight')

  useEffect(() => {
    // console.log('mode:::::', editMode)
    if (editMode === 'NEW') {
      const formData = form.getValues()
      // console.log('폼::::::::::::', formData)
      let errors = {}
      if (!_dispCompanyName || _dispCompanyName.trim().length === 0) {
        errors.dispCompanyName = true
      }
      if (!_objectName || _objectName.trim().length === 0) {
        errors.objectName = true
      }
      if (!_objectNameOmit) {
        errors.objectNameOmit = true
      }
      if (!_saleStoreId) {
        errors.saleStoreId = true
      }

      // if (!_otherSaleStoreId) {
      //   errors.otherSaleStoreId = true
      // }

      if (!_zipNo || _zipNo.length != 7) {
        errors.zipCode = true
      }

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

      if (!_address.trim().length === 0) {
        errors.address = true
      }

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

      if (!_windSpeed) {
        errors.windSpeed = true
      }

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

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

      // console.log('errors::', errors)
      setIsFormValid(Object.keys(errors).length === 0)
    } else {
      // console.log('상세일때 폼체크')
    }
  }, [
    _dispCompanyName,
    _objectName,
    _objectNameOmit,
    _saleStoreId,
    // _otherSaleStoreId,
    _zipNo,
    _prefId,
    _address,
    _areaId,
    _windSpeed,
    _verticalSnowCover,
    _installHeight,
  ])

  // 주소검색 API
  const onSearchPostNumber = () => {
    const params = {
      zipcode: _zipNo,
    }
    get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
      //7830060
      //9302226
      if (res.status === 200) {
        if (res.results != null) {
          console.log('주소검색::', res.results)
          // console.log('prefcode::', res.results[0].prefcode)
          // console.log('address::', res.results[0].address2 + res.results[0].address3)
          setPrefValue(res.results[0].prefcode)
          form.setValue('prefId', res.results[0].prefcode)
          form.setValue('prefName', res.results[0].address1)
          form.setValue('address', res.results[0].address2 + res.results[0].address3)
        } else {
          alert('등록된 우편번호에서 주소를 찾을 수 없습니다. 다시 입력해주세요.')
          form.setValue('prefId', '')
          form.setValue('prefName', '')
          form.setValue('address', '')
          form.setValue('zipNo', '')
          setPrefValue('')
          setAreaIdList([])
          form.setValue('areaId', '')
        }
      } else {
        alert(res.message)
      }
    })
  }

  useEffect(() => {
    if (prefValue !== '') {
      // console.log('우편번호 검색해서  도도부현골랐을때::::', prefValue)
      // 발전량시뮬레이션 지역 목록
      // /api/object/prefecture/도도부현코드/list
      get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
        if (!isEmptyArray(res)) {
          console.log('발전량 시뮬레이션::::::::', res)
          setAreaIdList(res)
        }
      })
    }
  }, [prefValue])

  //필수값 다 입력했을때
  const onValid = (data) => {
    // 수정모드일때는 PUT
    // console.log('필수값 다 있고 저장')
    // console.log('data::::::', data)
    const formData = form.getValues()
    // console.log('formData::::', formData)
    // const _dispCompanyName = watch('dispCompanyName')
    // const _objectStatusId = watch('objectStatusId')
    // const _objectNameOmit = watch('objectNameOmit')
    // const _zipNo = watch('zipNo')
    // const _prefId = watch('prefId')
    // const _address = watch('address')
    // const _coldRegionFlg = watch('coldRegionFlg')
    // console.log(_dispCompanyName)
    // console.log(_objectStatusId)
    // console.log(_objectNameOmit)
    // console.log(_zipNo)
    // console.log(_prefId)
    // console.log('prefValue::', prefValue)
    // console.log(_address)
    // console.log('_coldRegionFlg::', _coldRegionFlg)
  }

  //필수값 안넣었을때 임시저장 form required사용시
  // const onInvalid = (errors) => {
  //   console.log('22222222222222222222222')
  //   const formData = form.getValues()
  //   console.log('임시저장formData::::', formData)
  // }

  // 임시저장
  const onTempSave = async () => {
    const formData = form.getValues()

    const params = {
      saleStoreId: formData.saleStoreId,
      saleStoreName: formData.saleStoreName,
      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.dispCompanyName,
      installHeight: formData.installHeight,
      windSpeed: formData.windSpeed,
      verticalSnowCover: formData.verticalSnowCover,
      surfaceType: formData.surfaceType,
      conType: formData.conType,
      coldRegionFlg: formData.coldRegionFlg,
      saltAreaFlg: formData.saltAreaFlg,
      tempFlg: '1',
      workNo: null,
      workName: null,
    }
    console.log('임시저장params::', params)
    return
    await post({ url: '/api/object/save-object', data: params }).then((res) => {
      console.log('res::::::', res)
    })
  }

  // 발전량 시뮬레이션 변경
  const handleAreaIdOnChange = (e) => {
    // console.log('가지고있는 도도부현코드:::::::::', prefValue)
    console.log('발전량시뮬레이션변경:::::::::', e.target.value)
    form.setValue('areaId', e.target.value)
    //값 set해주고 그거 useEffect로 기준풍속, 수직적설량 api호출
  }

  // 물건삭제
  const onDelete = () => {
    //http://localhost:8080/api/object/R201TES01240910023
    // console.log('물건번호::::::::', objectNo)
    alert('사양확정일이 있으면 삭제 불가')
    if (confirm(getMessage('common.message.data.delete'))) {
      let testobj = '10'

      del({ url: `/api/object/${testobj}` }).then((res) => {
        // console.log('삭제 결과:::', res)
        router.push('/management/stuff')
      })
    }
  }

  return (
    <>
      {(editMode === 'NEW' && (
        <form onSubmit={handleSubmit(onValid)}>
          <div className="sub-table-box">
            <div className="promise-gudie">
              <span className="important">*</span> 필수 입력항목
            </div>
            <div className="infomation-table">
              <table>
                <colgroup>
                  <col style={{ width: '200px' }} />
                  <col />
                </colgroup>
                <tbody>
                  <tr>
                    <th>
                      담당자 <span className="important">*</span>
                    </th>
                    <td>
                      <div className="input-wrap" style={{ width: '500px' }}>
                        <input type="text" className="input-light" {...form.register('dispCompanyName')} />
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      물건구분/물건명 <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="d-check-radio light mr10">
                          <input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
                          <label htmlFor="objectStatus0">신축</label>
                        </div>
                        <div className="d-check-radio light mr10">
                          <input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
                          <label htmlFor="objectStatus0">기축</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 className="select-light" name="objectNameOmit" {...register('objectNameOmit')}>
                            <option value="">경칭공통코드선택</option>
                            <option value="11">경칭11</option>
                            <option value="22">경칭22</option>
                            <option value="33">경칭33</option>
                          </select>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>물건명 후리가나</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">
                          1차 판매점명 / ID
                          <span className="important">*</span>
                        </div>
                        <div className="tooltips"></div>
                      </div>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap mr5" style={{ width: '567px' }}>
                          {saleStoreList?.length > 0 && (
                            <select className="select-light" onChange={onSelectionChange} value={form.watch('saleStoreId')}>
                              {saleStoreList.map((row) => {
                                return (
                                  <option key={row.saleStoreLevel} value={row.saleStoreId}>
                                    {row.saleStoreName}
                                  </option>
                                )
                              })}
                            </select>
                          )}
                        </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">2차 판매점명 / ID</div>
                        <div className="tooltips"></div>
                      </div>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap mr5" style={{ width: '567px' }}>
                          {otherSaleStoreList?.length > 0 && (
                            <select className="select-light" onChange={onSelectionChange2} value={form.watch('otherSaleStoreId')}>
                              {otherSaleStoreList.map((row) => {
                                return (
                                  <option key={row.saleStoreId} value={row.saleStoreId} text={row.saleStoreName}>
                                    {row.saleStoreName}
                                  </option>
                                )
                              })}
                            </select>
                          )}
                        </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>
                      우편번호 <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="input-wrap mr5" style={{ width: '200px' }}>
                          <input
                            type="text"
                            className="input-light"
                            maxLength={7}
                            {...form.register('zipNo', {
                              minLength: { value: 7, message: '7자리만가능' },
                              pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
                            })}
                          />
                        </div>
                        <Button className="btn-origin grey" isDisabled={!buttonValid} onClick={onSearchPostNumber}>
                          주소검색
                        </Button>
                        <div className="guide">*우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오</div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      도도부현 / 주소 <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="input-wrap mr5" style={{ width: '200px' }}>
                          <input type="text" className="input-light" value={form.watch('prefName')} {...form.register('prefName')} readOnly />
                          {/* {prefCodeList?.length > 0 && (
                            <Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
                              {prefCodeList.map((row) => {
                                return <SelectItem key={row.prefId}>{row.prefName}</SelectItem>
                              })}
                            </Select>
                          )} */}
                          {/* {prefCodeList?.length > 0 && (
                            <select>
                              <option value=""></option>
                            </select>
                          )} */}
                        </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>
                      발전량시뮬레이션지역 <span className="important">*</span>
                    </th>
                    <td>
                      <div className="select-wrap" style={{ width: '200px' }}>
                        {areaIdList?.length > 0 && (
                          <select className="select-light" name="areaId" onChange={handleAreaIdOnChange}>
                            {areaIdList.map((row) => {
                              return (
                                <option key={row.prefName} value={row.prefId}>
                                  {row.prefName}
                                </option>
                              )
                            })}
                          </select>
                        )}
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      기준풍속 <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap mr10" style={{ width: '200px' }}>
                          <select className="select-light" name="windSpeed" {...register('windSpeed')}>
                            <option value="">기준풍속공통코드?</option>
                            <option value="30">30</option>
                            <option value="50">50</option>
                            <option value="60">60</option>
                          </select>
                        </div>
                        <span>m/s이하</span>
                        <button className="btn-origin grey mr5">풍속선택</button>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      수직적설량 <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap mr10" style={{ width: '200px' }}>
                          <select className="select-light" name="verticalSnowCover" {...register('verticalSnowCover')}>
                            <option value="">수직적설량코드?</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                          </select>
                        </div>
                        <span className="mr10">cm</span>
                        <div className="d-check-box light">
                          <input type="checkbox" id="coldRegionFlg" {...form.register('coldRegionFlg')} />
                          <label htmlFor="coldRegionFlg">한랭지대책시행</label>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      면조도구분 <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">염해지역용아이템사용</label>
                        </div>
                        <div className="tooltips"></div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      설치높이 <span className="important">*</span>
                    </th>
                    <td>
                      <div className="flx-box">
                        <div className="select-wrap mr10" style={{ width: '200px' }}>
                          <select className="select-light" name="installHeight" {...register('installHeight')}>
                            <option value="">설치높이공코</option>
                            <option value="11">111</option>
                            <option value="22">222</option>
                            <option value="33">333</option>
                          </select>
                        </div>
                        <span>m</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>계약조건</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">잉여</label>
                        </div>
                        <div className="d-check-radio light mr10">
                          <input type="radio" name="conType" value="1" id="conType1" {...form.register('conType')} />
                          <label htmlFor="conType1">전량</label>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>메모</th>
                    <td>
                      <div className="input-wrap">
                        <input type="text" className="input-light" />
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div className="sub-table-footer">
              {!isFormValid ? (
                <button className="btn-origin grey mr5" onClick={onTempSave}>
                  New화면 임시저장
                </button>
              ) : (
                <button type="submit" className="btn-origin navy mr5">
                  NEW 화면 저장
                </button>
              )}
              <Link href="/management/stuff">
                <button type="button" className="btn-origin grey">
                  NEW화면 물건목록이동
                </button>
              </Link>
            </div>
          </div>
        </form>
      )) || (
        <>
          {objectNo.substring(0, 1) === 'R' ? (
            <>
              <Link href="/management/stuff">
                <button type="button" className="btn-origin grey">
                  R상세:물건목록
                </button>
              </Link>
              <button type="submit" className="btn-origin navy mr5">
                R상세:저장
              </button>
              <button type="submit" className="btn-origin navy mr5" onClick={onDelete}>
                R상세:물건삭제
              </button>
            </>
          ) : (
            <>
              <Link href="/management/stuff">
                <button type="button" className="btn-origin grey">
                  T상세:물건목록
                </button>
              </Link>
              <button type="submit" className="btn-origin navy mr5">
                T상세:저장
              </button>
            </>
          )}
        </>
      )}
      {/* {(editMode === 'NEW' && (
        <form onSubmit={handleSubmit(onValid)}>
          <div>
            <div>(*필수 입력항목)</div>
            <div className="form-input">
              <label>담당자*</label>
              <input type="text" className="input-origin" {...form.register('dispCompanyName')} />
            </div>
            <div className="form-input">
              <label>물건구분/물건명*</label>
              <input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
              <label htmlFor="objectStatus0">신축</label>
              <input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
              <label htmlFor="objectStatus0">기축</label>
              <input type="text" className="input-origin" {...form.register('objectName')} />
              <div className="flex w-full max-w-xs flex-col gap-2">
                <select name="objectNameOmit" {...register('objectNameOmit')}>
                  <option value="">경칭선택</option>
                  <option value="11">111</option>
                  <option value="22">222</option>
                  <option value="33">333</option>
                </select>
              </div>
            </div>
            <div className="form-input">
              <label>물건명 후리가나</label>
              <input type="text" className="input-origin" {...form.register('objectNameKana')} />
            </div>
            <div className="form-input">
              <label>1차 판매점명 / ID</label>
              <div className="flex w-full max-w-xs flex-col gap2">
                {saleStoreList?.length > 0 && (
                  <Autocomplete
                    className="max-w-xs"
                    defaultItems={saleStoreList}
                    label="판매점ID자동완성"
                    selectedKey={form.watch('saleStoreId')}
                    {...form.register('saleStoreId')}
                    onSelectionChange={onSelectionChange}
                  >
                    {(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
                  </Autocomplete>
                )}
                <input type="text" className="input-origin" value={form.watch('saleStoreName')} {...form.register('saleStoreName')} disabled />
              </div>
            </div>
            <div className="form-input">
              <label>2차 판매점명 / ID</label>
              <div className="flex w-full max-w-xs flex-col gap2">
                {otherSaleStoreList?.length > 0 && (
                  <Autocomplete
                    className="max-w-xs"
                    defaultItems={otherSaleStoreList}
                    label="2차판매점ID자동완성"
                    {...form.register('otherSaleStoreId')}
                    onSelectionChange={onSelectionChange2}
                  >
                    {(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
                  </Autocomplete>
                )}
              </div>
            </div>
            <div className="form-input">
              <label>우편번호</label>
              <input
                type="text"
                className="input-origin"
                maxLength={7}
                {...form.register('zipNo', {
                  minLength: { value: 7, message: '7자리만가능' },
                  pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
                })}
              />
              <Button isDisabled={!buttonValid} onClick={onSearchPostNumber}>
                주소검색
              </Button>
              *우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오
            </div>
            <div className="form-input">
              <label>도도부현 / 주소</label>
              <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
                {prefCodeList?.length > 0 && (
                  <Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
                    {prefCodeList.map((row) => {
                      return <SelectItem key={row.prefId}>{row.prefName}</SelectItem>
                    })}
                  </Select>
                )}
              </div>

              <input type="text" className="input-origin" value={form.watch('address')} {...form.register('address')} />
            </div>
            <div className="form-input">
              <label>발전량시뮬레이션지역</label>
              {powerSimAreaList?.length > 0 && (
                <Select
                  className="max-w-xs"
                  selectedKeys={form.watch('powerSimArea')}
                  {...form.register('powerSimArea')}
                  onChange={handlePowerSimAreaOnChange}
                >
                  {powerSimAreaList.map((row) => {
                    // console.log('row::', row)
                    return (
                      <SelectItem key={row.prefName} value={row.prefId}>
                        {row.prefName}
                      </SelectItem>
                    )
                  })}
                </Select>
              )}
            </div>
            <div className="form-input">
              <label>기준풍속</label>
              <div className="flex w-full max-w-xs flex-col gap-2">
                <select name="windSpeed" {...register('windSpeed')}>
                  <option value="">기준풍속</option>
                  <option value="30">30</option>
                  <option value="50">50</option>
                  <option value="60">60</option>
                </select>
              </div>
            </div>
            <div className="form-input">
              <label>수직적설량</label>
              <input
                type="text"
                className="input-origin"
                maxLength={3}
                {...form.register('snowCover', {
                  pattern: { value: /^[0-9]*$/g, message: '정수만 입력' },
                })}
              />{' '}
              cm
              <Checkbox
                onValueChange={(e) => {
                  form.setValue('coldAreaChk', e)
                }}
                {...form.register('coldAreaChk')}
              >
                한랭지대책시행
              </Checkbox>
            </div>
            <div className="form-input">
              <label>면조도구분</label>
              <input type="radio" name="surfaceType" value="Ⅲ・Ⅳ" id="surfaceType0" {...form.register('surfaceType')} />
              <label htmlFor="surfaceType0">Ⅲ・Ⅳ</label>
              <input type="radio" name="surfaceType" value="Ⅱ" id="surfaceType1" {...form.register('surfaceType')} />
              <label htmlFor="surfaceType1">Ⅱ</label>
              <Checkbox
                {...form.register('saltAreaChk')}
                onValueChange={(e) => {
                  form.setValue('saltAreaChk', e)
                }}
              >
                염해지역용아이템사용
              </Checkbox>
            </div>
            <div className="form-input">
              <label>설치높이</label>
              <div className="flex w-full max-w-xs flex-col gap-2">
                <select name="installHeight" {...register('installHeight')}>
                  <option value="">설치높이</option>
                  <option value="11">111</option>
                  <option value="22">222</option>
                  <option value="33">333</option>
                </select>
              </div>
            </div>
            <div className="form-input">
              <label>계약조건</label>
              <input type="radio" name="powerConTerms" value="0" id="powerConTerms0" {...form.register('powerConTerms')} />
              <label htmlFor="powerConTerms0">잉여</label>
              <input type="radio" name="powerConTerms" value="1" id="powerConTerms1" {...form.register('powerConTerms')} />
              <label htmlFor="powerConTerms1">전량</label>
            </div>
            <div className="form-input">
              <label>메모</label>
              <Textarea
                disableAutosize
                classNames={{
                  base: 'max-w-xs',
                  input: 'resize-y min-h-[40px]',
                }}
                {...form.register('remarks')}
                onValueChange={(e) => {
                  // console.log('e::::', e)
                  form.setValue('remarks', e)
                }}
              />
            </div>
          </div>
          {!isFormValid ? (
            <>
              <Button type="submit" onClick={onTempSave}>
                NEW화면임시저장
              </Button>
            </>
          ) : (
            <button type="submit">NEW화면 저장</button>
          )}
          <Link href="/management/stuff">
            <button type="button">NEW화면 물건목록이동</button>
          </Link>
        </form>
      )) || (
        <>
          {objectNo.substring(0, 1) === 'R' ? (
            <>
              <Link href="/management/stuff">
                <button type="button">R상세:물건목록</button>
              </Link>
              <button type="submit">R상세:저장</button>
              <button type="submit" onClick={onDelete}>
                R상세:물건삭제
              </button>
            </>
          ) : (
            <>
              <Link href="/management/stuff">
                <button type="button">T상세:물건목록</button>
              </Link>
              <button type="submit">T상세:저장</button>
            </>
          )}
        </>
      )} */}
    </>
  )
}