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

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

export default function CircuitStandTab01({setTabNum}){
    return(
        <>
            <div className="outline-form mb15">
                <span className="mr10">分類 (余剰)</span>
                <div className="grid-select mr10">
                    <Qselect title={'HQJPシリーズ'} option={SelectOption01}/>
                </div>
                <span className="thin">寒冷地仕様</span>
            </div>
            <div className="module-table-box mb10">
                <div className="module-table-inner">
                    <div className="circuit-check-inner overflow">
                        <div className="d-check-box pop sel">
                            <input type="checkbox" id="ch01" />
                            <label htmlFor="ch01">屋内PCS（HQJP-KA-5シリーズ）</label>
                        </div>
                        <div className="d-check-box pop sel">
                            <input type="checkbox" id="ch02" />
                            <label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label>
                        </div>
                        <div className="d-check-box pop sel">
                            <input type="checkbox" id="ch03" />
                            <label htmlFor="ch03">屋外マルチPCS（HQJP-RA5シリーズ）</label>
                        </div>
                        <div className="d-check-box pop sel">
                            <input type="checkbox" id="ch04" />
                            <label htmlFor="ch04">屋外マルチPCS（HQJP-RA5シリーズ）</label>
                        </div>
                    </div>
                </div>
            </div>
            <div className="module-table-box mb15">
                <div className="module-table-inner">
                    <div className="x-scroll-table mb10">
                        <div className="roof-module-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th style={{width: '15%'}}>シリーズ</th>
                                        <th style={{width: '15%'}}>名称</th>
                                        <th style={{width: '10%'}}>定格出力 (kW)</th>
                                        <th style={{width: '10%'}}>回路数</th>
                                        <th style={{width: '10%'}}>最大接続枚数</th>
                                        <th style={{width: '10%'}}>過積最大枚数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>屋内PCS&#40;HQJP</td>
                                        <td>HQJP-KA30-5</td>
                                        <td className="al-c"><span className="warning">PCSオプションマスター</span></td>
                                        <td className="al-r">2</td>
                                        <td className="al-r">2</td>
                                        <td className="al-c">-</td>
                                    </tr>
                                    <tr className="on">
                                        <td>屋内PCS&#40;HQJP</td>
                                        <td>HQJP-KA40-5</td>
                                        <td className="al-r">1.00</td>
                                        <td className="al-r">2</td>
                                        <td className="al-r">2</td>
                                        <td className="al-c">-</td>
                                    </tr>
                                    <tr>
                                        <td>屋内PCS&#40;HQJP</td>
                                        <td>HQJP-KA50-5</td>
                                        <td className="al-r">1.00</td>
                                        <td className="al-r">2</td>
                                        <td className="al-r">2</td>
                                        <td className="al-c">-</td>
                                    </tr>
                                    <tr>
                                        <td>屋内PCS&#40;HQJP</td>
                                        <td>HQJP-KA50-5</td>
                                        <td className="al-r">1.00</td>
                                        <td className="al-r">2</td>
                                        <td className="al-r">2</td>
                                        <td className="al-c">-</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div className="circuit-right-wrap mb10">
                        <button className="btn-frame self mr5">追加</button>
                    </div>
                    <div className="circuit-data-form">
                        <span className="normal-font">HQJP-KA40-5 <button className="del"></button></span>
                        <span className="normal-font">HQJP-KA40-5 <button className="del"></button></span>
                        <span className="normal-font">HQJP-KA40-5 <button className="del"></button></span>
                    </div>
                </div> 
            </div>
            <div className="slope-wrap">
                <div className="d-check-box pop mb15">
                    <input type="checkbox" id="ch03" />
                    <label htmlFor="ch03">同一傾斜同一方面の面積の場合、同じ面として回路を分ける。</label>
                </div>
                <div className="d-check-box pop">
                    <input type="checkbox" id="ch04" />
                    <label className="red" htmlFor="ch04">MAX接続（過積）で回路を分ける。</label>
                </div>
            </div>
            <div className="grid-btn-wrap">
                <button className="btn-frame modal mr5 act" onClick={() => setTabNum(3)}>回路割当&#40;昇圧設定&#41;</button>
                <button className="btn-frame modal act" onClick={() => setTabNum(2)}>手動回路構成</button>
            </div>
        </>
    )
}