onsitesurvey/src/components/survey-sale/detail/BasicForm.tsx

'use client'

import { SurveyBasicRequest } from '@/types/Survey'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

const defaultBasicInfoForm: SurveyBasicRequest = {
  representative: '',
  store: null,
  construction_point: null,
  investigation_date: null,
  building_name: null,
  customer_name: null,
  post_code: null,
  address: null,
  address_detail: null,
  submission_status: false,
  submission_date: null,
}

export default function BasicForm() {
  const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)

  const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
    setBasicInfoData({ ...basicInfoData, [key]: value })
  }

  const router = useRouter()
  const handleSave = () => {
    console.log('save')
  }
  const handleDelete = () => {
    console.log('delete')
  }
  return (
    <>
      <div className="sale-frame">
        <div className="data-form-wrap">
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">担当者名</div>
            <input type="text" className="input-frame" id='representative' value={basicInfoData.representative} onChange={(e) => handleChange('representative', e.target.value)} />
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">販売店</div>
            <input type="text" className="input-frame" id='store' value={basicInfoData.store ?? ''} onChange={(e) => handleChange('store', e.target.value)} />
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">施工店</div>
            <input type="text" className="input-frame" id='construction_point' value={basicInfoData.construction_point ?? ''} onChange={(e) => handleChange('construction_point', e.target.value)} />
          </div>
        </div>
      </div>

      <div className="sale-frame">
        <div className="data-form-wrap">
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">現地調査日</div>
            <div className="date-input">
              <button className="date-btn">
                <i className="date-icon"></i>
              </button>
              <input type="date" className="date-frame" id='investigation_date' value={basicInfoData.investigation_date ?? ''} onChange={(e) => handleChange('investigation_date', e.target.value)} />
            </div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">建物名</div>
            <input type="text" className="input-frame" id='building_name' value={basicInfoData.building_name ?? ''} onChange={(e) => handleChange('building_name', e.target.value)} />
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">顧客名</div>
            <input type="text" className="input-frame" id='customer_name' value={basicInfoData.customer_name ?? ''} onChange={(e) => handleChange('customer_name', e.target.value)} />
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">建物の住所</div>
            <div className="form-flex">
              <div className="form-bx">
                <input type="text" className="input-frame" defaultValue={'1050013'} disabled />
              </div>
              <div className="form-bx">
                <select className="select-form" name="" id="">
                  <option value="">東京都</option>
                  <option value="">東京都</option>
                  <option value="">東京都</option>
                  <option value="">東京都</option>
                  <option value="">東京都</option>
                </select>
              </div>
            </div>
            <div className="form-btn">
              <button className="btn-frame n-blue icon">
                郵便番号<i className="btn-arr"></i>
              </button>
            </div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">市区町村名, 以後の住所</div>
            <input type="text" className="input-frame" defaultValue={'浜松 浜松町'} />
          </div>
        </div>
        <div className="btn-flex-wrap">
          <div className="btn-bx">
            <button className="btn-frame n-blue icon" onClick={handleSave}>
              一時保存<i className="btn-arr"></i>
            </button>
          </div>
          <div className="btn-bx">
            <button className="btn-frame red icon" onClick={handleDelete}>
              保存<i className="btn-arr"></i>
            </button>
          </div>
          <div className="btn-bx">
            <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
              リスト<i className="btn-arr"></i>
            </button>
          </div>
        </div>
      </div>
    </>
  )
}