import Qselect from "@/components/common/select/Qselect";

const SelectOption01 = [
    {name: '0',}, {name: '0'}, {name: '0'}, {name: '0'}
]

export default function RoofModuleOptionTab02({setTabNum}){

    return(
        <>
        <div className="roof-module-tab2-overflow">
            <div className="module-table-box mb10"> 
                <div className="module-box-tab">
                    <button className="module-btn act">アスファルトシングル（21.8度）</button>
                    <button className="module-btn">アスファルトシングル（21.8度）</button>
                    <button className="module-btn">アスファルトシングル（21.8度）</button>
                    <button className="module-btn">アスファルトシングル（21.8度）</button>
                </div>
                <div className="module-table-inner">
                    <div className="module-table-flex-wrap tab2">
                        <div className="module-flex-item">
                            <div className="eaves-keraba-table">
                                {/* <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        マンドンピッチ
                                    </div>
                                    <div className="eaves-keraba-td">
                                        <div className="keraba-flex">
                                            <div className="grid-select">
                                                <Qselect title={'455'} option={SelectOption01}/>
                                            </div>
                                            <div className="outline-form">
                                                <span>垂木の間隔</span>
                                                <div className="grid-select">
                                                    <Qselect title={'455'} option={SelectOption01}/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> */}
                                <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        垂木の間隔
                                    </div>
                                    <div className="eaves-keraba-td">
                                        <div className="grid-select">
                                            <Qselect title={'屋根技術研究所'} option={SelectOption01}/>
                                        </div>
                                    </div>
                                </div>
                                <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        架台メーカー
                                    </div>
                                    <div className="eaves-keraba-td">
                                        <div className="grid-select">
                                            <Qselect title={'屋根技術研究所'} option={SelectOption01}/>
                                        </div>
                                    </div>
                                </div>
                                <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        工法
                                    </div> 
                                    <div className="eaves-keraba-td">
                                        <div className="grid-select">
                                            <Qselect title={'スレート金具4'} option={SelectOption01}/>
                                        </div>
                                    </div>
                                </div>
                                <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        屋根の下
                                    </div>
                                    <div className="eaves-keraba-td">
                                        <div className="grid-select">
                                            <Qselect title={'構造用合板12mm以上 又はOSB12mm以上'} option={SelectOption01}/>
                                        </div>
                                    </div>
                                </div>
                                <div className="eaves-keraba-item">
                                    <div className="eaves-keraba-th">
                                        屋根の下
                                    </div>
                                    <div className="eaves-keraba-td">
                                        <div className="grid-select">
                                            <Qselect title={'構造用合板12mm以上 又はOSB12mm以上'} option={SelectOption01}/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="module-flex-item non-flex">
                            <div className="flex-item-btn-wrap">
                                <button className="btn-frame roof blue">標準施工(I)</button>
                                <button className="btn-frame roof white">多設施工</button>
                                <button className="btn-frame roof">標準施工</button>
                                <button className="btn-frame roof">多設施工（II）</button>
                                <button className="btn-frame roof">強化施工</button>
                            </div>
                            <div className="grid-check-form-flex">
                                <div className="d-check-box pop">
                                    <input type="checkbox" id="ch01" />
                                    <label htmlFor="ch01">軒カバーの設置</label>
                                </div>
                                <div className="d-check-box pop">
                                    <input type="checkbox" id="ch02" />
                                    <label htmlFor="ch02">落雪防止金具設置</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/* 2025-05-07 st */}
                    <div className="module-input-area">
                        <div className="module-area-title">モジュール配置領域</div>
                        <div className="module-input-wrap">
                            <div className="outline-form">
                                <span>軒側</span>
                                <div className="input-grid mr10" >
                                    <input type="text" className="input-origin block" defaultValue={13}/>
                                </div>
                                <span className="thin">mm</span>
                            </div>
                            <div className="outline-form">
                                <span>棟側</span>
                                <div className="input-grid mr10" >
                                    <input type="text" className="input-origin block" defaultValue={13}/>
                                </div>
                                <span className="thin">mm</span>
                            </div>
                            <div className="outline-form">
                                <span>けらぱ</span>
                                <div className="input-grid mr10" >
                                    <input type="text" className="input-origin block" defaultValue={13}/>
                                </div>
                                <span className="thin">mm</span>
                            </div>
                        </div>
                    </div>
                    <div className="module-input-area">
                        <div className="module-area-title">モジュール間の間隙</div>
                        <div className="module-input-wrap">
                            <div className="outline-form">
                                <span>左右</span>
                                <div className="input-grid mr10" >
                                    <input type="text" className="input-origin block" defaultValue={13} readOnly/>
                                </div>
                                <span className="thin">mm</span>
                            </div>
                            <div className="outline-form">
                                <span>上下</span>
                                <div className="input-grid mr10" >
                                    <input type="text" className="input-origin block" defaultValue={13} readOnly/>
                                </div>
                                <span className="thin">mm</span>
                            </div>
                        </div>
                    </div>
                    {/* 2025-05-07 ed */}
                </div>
            </div>
            <div className="module-bottom">
                <div className="module-table-box ">
                    <div className="warning-guide">
                        <div className="warning">
                            ※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か
                            施工マニュアルを確認してください。<br/>
                            モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/>
                            ※勾配の 範囲には制限があります。屋根傾斜が2.5値未満、10値を超える場合には施工が可能か
                            施工マニュアルを確認してください。<br/>
                            モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ず確認してください<br/>
                        </div>
                    </div>
                </div>
                {/* 설정 오류시 노출 */}
                
            </div>
        </div>
        <div className="grid-btn-wrap">
            <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>前に戻る</button>
            <button className="btn-frame modal act" onClick={() => setTabNum(3)}>Next</button>
        </div>
        </>
    )
}