
export default function HexagonalRoofTab03({setTabNum}){
    return(
        <>
        <div className="hexagonal-flex-wrap">
            <div className="module-table-box ">
                <div className="module-table-inner">
                    <div className="roof-module-table">
                        <table>
                            <thead>
                                <tr>
                                    <th style={{width: '70px'}}>
                                        <div className="d-check-box no-text pop">
                                            <input type="checkbox" id="ch01" disabled/>
                                            <label htmlFor="ch01"></label>
                                        </div>
                                    </th>
                                    <th >モジュール</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td className="al-c">
                                        <div className="d-check-box no-text pop">
                                            <input type="checkbox" id="ch02" />
                                            <label htmlFor="ch02"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div className="color-wrap">
                                            <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
                                            <span className="name">Re.RISE-G3 440</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td className="al-c">
                                        <div className="d-check-box no-text pop">
                                            <input type="checkbox" id="ch03" />
                                            <label htmlFor="ch03"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div className="color-wrap">
                                            <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
                                            <span className="name">Re.RISE MS-G3 290</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div className="module-table-box non-flex">
                <div className="module-table-inner">
                    <div className="roof-module-table">
                        <table>
                            <thead>
                                <tr>
                                    <th>配置基準の設定</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div className="hexagonal-radio-wrap">
                                            <div className="d-check-radio pop mb10">
                                                <input type="radio" name="radio01" id="ra01" />
                                                <label htmlFor="ra01">南向きに設置す</label>
                                            </div>
                                            <div className="d-check-radio pop">
                                                <input type="radio" name="radio01" id="ra02" />
                                                <label htmlFor="ra02">指定した辺を基準に設置する</label>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
            {/* <div className="module-table-box">
                <div className="module-table-inner">
                    <div className="hexagonal-wrap">
                        <div className="hexagonal-item">
                            <div className="bold-font">割り当て設定</div>
                        </div>
                        <div className="hexagonal-item">
                            <div className="hexagonal-flx-auto">
                                <div className="outline-form">
                                    <span className="mr10" style={{width: 'auto'}}>単数</span>
                                    <div className="input-grid mr5" style={{width: '70px'}}>
                                        <input type="text" className="input-origin block" defaultValue={1}/>
                                    </div>
                                    <span className="thin">mm</span>
                                </div>
                                <div className="outline-form">
                                    <span className="mr10" style={{width: 'auto'}}>上下間隔</span>
                                    <div className="input-grid mr5" style={{width: '70px'}}>
                                        <input type="text" className="input-origin block" defaultValue={1}/>
                                    </div>
                                    <span className="thin">mm</span>
                                </div>
                                <div className="outline-form">
                                    <span className="mr10" style={{width: 'auto'}}>熱水</span>
                                    <div className="input-grid mr5" style={{width: '70px'}}>
                                        <input type="text" className="input-origin block" defaultValue={1}/>
                                    </div>
                                    <span className="thin">mm</span>
                                </div>
                                <div className="outline-form">
                                    <span className="mr10" style={{width: 'auto'}}>左右間隔</span>
                                    <div className="input-grid mr5" style={{width: '70px'}}>
                                        <input type="text" className="input-origin block" defaultValue={300}/>
                                    </div>
                                    <span className="thin">mm</span>
                                </div>
                            </div>
                        </div>
                        <div className="hexagonal-item">
                            <div className="hexagonal-flx">
                                <div className="normal-font">※バッチパネルの種類が1種類の場合にのみ使用できます。</div>
                                <button className="btn-frame self">北面許可配置登録</button>
                            </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 mr5">手動配置</button>
                <button className="btn-frame modal act">設定値に自動配置</button>
            </div>
        </>
    )
}