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-flex-wrap mb10">
                <div className="module-table-box">
                    <div className="module-table-inner">
                        <div className="outline-form mb10">
                            <span className="mr10">モジュールの選択</span>
                            <div className="grid-select">
                                <Qselect title={'Search'} option={SelectOption01}/>
                            </div>
                        </div>
                        
                        <div className="roof-module-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th style={{width: '150px'}}>モジュール</th>
                                        <th>高さ (mm)</th>
                                        <th>幅 (mm)</th>
                                        <th>出力 (W)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div className="color-wrap">
                                                <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
                                                <span className="name">Re.RISE-G3 440</span>
                                            </div>
                                        </td>
                                        <td className="al-r">1134</td>
                                        <td className="al-r">1722</td>
                                        <td className="al-r">440</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div className="color-wrap">
                                                <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
                                                <span className="name">Re.RISE MS-G3 290</span>
                                            </div>
                                        </td>
                                        <td className="al-r">1134</td>
                                        <td className="al-r">1722</td>
                                        <td className="al-r">440</td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div className="module-table-box none-flex"> 
                    <div className="module-table-inner">
                        <div className="module-table-tit">商品情報</div>
                        <div className="eaves-keraba-table">
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    綿調道区分
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="grid-select" style={{width: '95.77px', flex: 'none'}}>
                                            <Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    設置高さ
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="grid-select mr10">
                                            <Qselect title={'13'} option={SelectOption01}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    基準風速
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="grid-select mr10">
                                            <Qselect title={'32'} option={SelectOption01}/>
                                        </div>
                                        <span className="thin">m/s</span>
                                    </div>
                                </div>
                            </div>
                            <div className="eaves-keraba-item">
                                <div className="eaves-keraba-th">
                                    基準積雪量
                                </div>
                                <div className="eaves-keraba-td">
                                    <div className="outline-form">
                                        <div className="grid-select mr10">
                                            <Qselect title={'13'} option={SelectOption01}/>
                                        </div>
                                        <span className="thin">mm</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="module-table-box mb10"> 
                <div className="module-box-tab">
                    <button className="module-btn act">屋根材1</button>
                    <button className="module-btn">屋根材2</button>
                    <button className="module-btn">屋根材3</button>
                    <button className="module-btn">屋根材4</button>
                </div>
                <div className="module-table-inner">
                    <div className="module-table-flex-wrap tab2">
                        <div className="module-flex-item">
                            <div className="module-flex-item-tit">屋根材：スレーツ（4寸）</div>
                            <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={'屋根技術研究所'} 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>
                        </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">
                                <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>
                </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="reset-word-wrap">
                <div className="reset-word">
                    ※ 施工方法が選択できません。 基準風速または基準積雪量を確認してください。
                </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>
            </div>
        </>
    )
}