100 lines
4.6 KiB
JavaScript
100 lines
4.6 KiB
JavaScript
import { useMessage } from '@/hooks/useMessage'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import { useContext, useEffect, useRef, useState } from 'react'
|
|
import Module from '@/components/floor-plan/modal/basic/step/Module'
|
|
import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
|
|
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
|
|
import Placement from '@/components/floor-plan/modal/basic/step/Placement'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { canvasSettingState } from '@/store/canvasAtom'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
|
|
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
|
|
import { useEvent } from '@/hooks/useEvent'
|
|
import { EventContext } from '@/app/floor-plan/EventProvider'
|
|
|
|
export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
|
|
const { getMessage } = useMessage()
|
|
const { closePopup } = usePopup()
|
|
const [tabNum, setTabNum] = useState(1)
|
|
const canvasSetting = useRecoilValue(canvasSettingState)
|
|
const orientationRef = useRef(null)
|
|
// const { initEvent } = useEvent()
|
|
const { initEvent } = useContext(EventContext)
|
|
const { makeModuleInstArea, manualModuleSetup, autoModuleSetup } = useModuleBasicSetting()
|
|
const handleBtnNextStep = () => {
|
|
if (tabNum === 1) {
|
|
orientationRef.current.handleNextStep()
|
|
}
|
|
setTabNum(tabNum + 1)
|
|
}
|
|
|
|
useEffect(() => {
|
|
makeModuleInstArea() //기붕 모듈설치면 생성
|
|
|
|
return () => {
|
|
initEvent() //모듈설치면 선택 이벤트 삭제
|
|
}
|
|
}, [])
|
|
|
|
const placementRef = {
|
|
isChidori: useRef('false'),
|
|
setupLocation: useRef(null),
|
|
isMaxSetup: useRef('false'),
|
|
}
|
|
|
|
return (
|
|
<WithDraggable isShow={true} pos={pos}>
|
|
<div className={`modal-pop-wrap lx-2`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
|
|
<button className="modal-close" onClick={() => closePopup(id)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="roof-module-tab">
|
|
<div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
|
|
<span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
|
|
<div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
|
|
<span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
|
|
<div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
|
|
</div>
|
|
{tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
|
|
{/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
|
|
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
|
|
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
|
|
|
|
{/*배치면 초기설정 - 입력방법: 육지붕*/}
|
|
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
|
|
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && <PitchPlacement setTabNum={setTabNum} />}
|
|
|
|
<div className="grid-btn-wrap">
|
|
{tabNum !== 1 && (
|
|
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
|
|
{getMessage('modal.module.basic.setting.prev')}
|
|
</button>
|
|
)}
|
|
{/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/}
|
|
{tabNum !== 3 && (
|
|
<button className="btn-frame modal" onClick={handleBtnNextStep}>
|
|
Next
|
|
</button>
|
|
)}
|
|
{tabNum === 3 && (
|
|
<>
|
|
<button className="btn-frame modal mr5" onClick={manualModuleSetup}>
|
|
{getMessage('modal.module.basic.setting.passivity.placement')}
|
|
</button>
|
|
<button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
|
|
{getMessage('modal.module.basic.setting.auto.placement')}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
}
|