257 lines
11 KiB
TypeScript
257 lines
11 KiB
TypeScript
import { SurveyBasicInfo, SurveyDetailInfo } from '@/types/Survey'
|
|
import DetailButton from './detailButton'
|
|
import { roof_material, supplementary_facilities } from '../form/etcProcess/MultiCheckEtc'
|
|
import { selectBoxOptions } from '../form/etcProcess/SelectBoxEtc'
|
|
import { radioEtcData } from '../form/etcProcess/RadioEtc'
|
|
|
|
export default function RoofDetailForm({
|
|
surveyDetail,
|
|
isLoadingSurveyDetail,
|
|
}: {
|
|
surveyDetail: SurveyBasicInfo | null
|
|
isLoadingSurveyDetail: boolean
|
|
}) {
|
|
console.log(surveyDetail)
|
|
|
|
const makeNumArr = (value: string) => {
|
|
return value
|
|
.split(',')
|
|
.map((v) => v.trim())
|
|
.filter((v) => v.length > 0)
|
|
}
|
|
|
|
if (isLoadingSurveyDetail) {
|
|
return <div>Loading...</div>
|
|
}
|
|
return (
|
|
<>
|
|
<div className="sale-frame">
|
|
<div className="data-form-wrap">
|
|
<div className="data-input-form-bx">
|
|
{/* 전기 계약 용량 */}
|
|
<div className="data-input-form-tit">電気契約容量</div>
|
|
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.CONTRACT_CAPACITY ?? ''} />
|
|
</div>
|
|
{/* 전기 소매 회사 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">電気小売会社</div>
|
|
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.RETAIL_COMPANY ?? ''} />
|
|
</div>
|
|
{/* 전기 부대 설비 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">電気附属設備</div>
|
|
<div className="data-check-wrap">
|
|
{supplementary_facilities.map((item) => (
|
|
<div className="check-form-box" key={item.id}>
|
|
<input
|
|
type="checkbox"
|
|
id={`${item.id}`}
|
|
checked={makeNumArr(surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))}
|
|
readOnly
|
|
/>
|
|
<label htmlFor={`${item.id}`}>{item.name}</label>
|
|
</div>
|
|
))}
|
|
<div className="check-form-box">
|
|
<input
|
|
type="checkbox"
|
|
id={`supplementary_facilities_etc`}
|
|
checked={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC !== null}
|
|
readOnly
|
|
/>
|
|
<label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
|
|
</div>
|
|
</div>
|
|
<div className="data-input">
|
|
<input
|
|
type="text"
|
|
className="input-frame"
|
|
placeholder="-"
|
|
readOnly
|
|
value={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC ?? ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 설치 희망 시스템 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">設置希望システム</div>
|
|
<SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 건축 연수 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">建築年数</div>
|
|
<SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 지붕재 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">屋根材</div>
|
|
<div className="data-check-wrap">
|
|
{roof_material.map((item) => (
|
|
<div className="check-form-box" key={item.id}>
|
|
<input
|
|
type="checkbox"
|
|
id={`${item.id}`}
|
|
checked={makeNumArr(surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL ?? '').includes(String(item.id))}
|
|
readOnly
|
|
/>
|
|
<label htmlFor={`${item.id}`}>{item.name}</label>
|
|
</div>
|
|
))}
|
|
<div className="check-form-box">
|
|
<input type="checkbox" id={`roof_material_etc`} checked={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC !== null} readOnly />
|
|
<label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
|
|
</div>
|
|
</div>
|
|
<div className="data-input">
|
|
<input type="text" className="input-frame" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC ?? ''} />
|
|
</div>
|
|
</div>
|
|
{/* 지붕 모양 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">屋根の形状</div>
|
|
<SelectedBox column="ROOF_SHAPE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 지붕 경사도 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">屋根の斜面</div>
|
|
<div className="data-input flex">
|
|
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_SLOPE ?? ''} />
|
|
<span>寸</span>
|
|
</div>
|
|
</div>
|
|
{/* 주택 구조 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">住宅構造</div>
|
|
<RadioSelected column="HOUSE_STRUCTURE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 서까래 재질 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">垂木の材質</div>
|
|
<RadioSelected column="RAFTER_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 서까래 크기 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">垂木の大きさ</div>
|
|
<SelectedBox column="RAFTER_SIZE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 서까래 피치 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">垂木のピッチ</div>
|
|
<SelectedBox column="RAFTER_PITCH" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 서까래 방향 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">垂木の方向</div>
|
|
<RadioSelected column="RAFTER_DIRECTION" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 노지판 종류 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">路地板の種類</div>
|
|
<SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 노지판 두께 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">路地板厚</div>
|
|
<div className="data-input flex">
|
|
<input
|
|
className="input-frame"
|
|
type="text"
|
|
placeholder="-"
|
|
readOnly
|
|
value={surveyDetail?.DETAIL_INFO?.OPEN_FIELD_PLATE_THICKNESS ?? ''}
|
|
/>
|
|
<span>mm</span>
|
|
</div>
|
|
</div>
|
|
{/* 누수 흔적 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">水漏れの痕跡</div>
|
|
<RadioSelected column="LEAK_TRACE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 방수재 종류 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">防水材の種類</div>
|
|
<RadioSelected column="WATERPROOF_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 단열재 유무 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">断熱材の有無</div>
|
|
<RadioSelected column="INSULATION_PRESENCE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 구조 순서 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">屋根構造の順序</div>
|
|
<SelectedBox column="STRUCTURE_ORDER" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 설치 가능 여부 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">設置可能な場合</div>
|
|
<SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} />
|
|
</div>
|
|
{/* 메모 */}
|
|
<div className="data-input-form-bx">
|
|
<div className="data-input-form-tit">メモ</div>
|
|
<div className="data-input">
|
|
<textarea className="textarea-form" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.MEMO ?? ''} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<DetailButton surveyDetail={surveyDetail} />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
|
|
const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
|
|
const etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
|
|
|
|
return (
|
|
<>
|
|
<select className="select-form mb10" name={column} id={column} disabled value={selectedId ? 'selected' : etcValue ? 'etc' : ''}>
|
|
<option value="">-</option>
|
|
<option value="etc">その他 (直接入力)</option>
|
|
<option value="selected">{selectBoxOptions[column as keyof typeof selectBoxOptions][Number(selectedId)]?.name}</option>
|
|
</select>
|
|
{etcValue && <input type="text" className="input-frame" readOnly value={etcValue.toString()} />}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
|
|
let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
|
|
if (column === 'LEAK_TRACE') {
|
|
selectedId = Number(selectedId)
|
|
if (!selectedId) selectedId = 2
|
|
}
|
|
|
|
let etcValue = null
|
|
if (column !== 'RAFTER_DIRECTION') {
|
|
etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo]
|
|
}
|
|
const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''
|
|
|
|
console.log('column: selectedId', column, selectedId)
|
|
return (
|
|
<>
|
|
{radioEtcData[column as keyof typeof radioEtcData].map((item) => (
|
|
<div className="radio-form-box mb10" key={item.id}>
|
|
<input type="radio" name={column} id={`${item.id}`} disabled checked={Number(selectedId) === item.id} />
|
|
<label htmlFor={`${item.id}`}>{item.label}</label>
|
|
</div>
|
|
))}
|
|
{column !== 'RAFTER_DIRECTION' && column !== 'LEAK_TRACE' && column !== 'INSULATION_PRESENCE' && (
|
|
<div className="radio-form-box mb10">
|
|
<input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} />
|
|
<label htmlFor={`${column}_ETC`}>その他 (直接入力)</label>
|
|
</div>
|
|
)}
|
|
{etcChecked && (
|
|
<div className="data-input">
|
|
<input type="text" className="input-frame" placeholder="-" readOnly value={etcValue?.toString() ?? ''} />
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|