'use client'

import Pagination from "@/components/common/grid/Pagination";
import QGrid from "@/components/common/grid/QGrid";
import ReactSelect from "@/components/common/reactselect/ReactSelect";
import { useState } from "react";

export default function ProductInfoTable(){
    const [gridProps, setGridProps] = useState({
        gridData: [
            { planNumber: "1", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, SE5500H AC-S-25, " },
            { planNumber: "2", orderStatus: "O", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
            { planNumber: "3", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
            { planNumber: "4", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
            { planNumber: "5", orderStatus: "X", module: "Q.TROM M-G2.4+430", systemCapacity: "5.16kW", roofMaterial: "瓦53A, 瓦53B", constructionMethod: "強化施工", mountingStructure: "ジャイロスレー..", powerConditioner: "SE5500H AC-S-25, P401-5RM4MRM, SE-CTML-0350-070, SE-MTR240-1" },
        ],
        gridColumns:[
            { headerName: "プラン番号 ", field: "planNumber", width: 100, cellStyle: {alignItems: "center"} },
            { headerName: "発注可 ", field: "orderStatus", width: 80, cellStyle: {alignItems: "center"} },
            { headerName: "モジュール ", field: "module", flex: 1, cellStyle: {alignItems: "flex-start"/* 좌측정렬*/  }},
            { headerName: "システム容量 ", field: "systemCapacity", width: 120, cellStyle: { alignItems: "flex-end"/* 우측정렬*/ } },
            { headerName: "屋根材 ", field: "roofMaterial", width: 140, wrapText: true,  autoHeight: true,cellStyle: { alignItems: "flex-start"/* 좌측정렬*/} },
            { headerName: "施工方法 ", field: "constructionMethod",cellStyle: {alignItems: "flex-start"/* 좌측정렬*/ } },
            { headerName: "架台 ", field: "mountingStructure",cellStyle: { alignItems: "flex-start"/* 좌측정렬*/ } },
            { headerName: "パワーコンディショナー ", field: "powerConditioner", flex: 1, wrapText: true,  autoHeight: true, cellStyle: {alignItems: "flex-start"/* 좌측정렬*/}},
            { headerName: "管理 ", field: "management", width: 200, autoHeight: true, cellStyle: { alignItems: "center" }, cellRenderer: (params) => {
                return (
                    <div className='grid-cell-btn'>
                        <button className='grid-btn'><span className="file"></span>見積書の照会</button>
                        <button className='grid-btn'><span className="excel"></span>Excel</button>
                    </div>
                );
            }},
            
        ],
        isPageable: true,
    })

    return(
        <div className="sub-table-box">
            <div className="promise-title-wrap">
                <div className="promise-gudie"><span className="important">*</span> 必須入力項目</div>
                <div className="left-unit-box">
                    <button className="btn-origin grey mr5">商品リスト</button>
                    <button className="btn-origin navy mr5">保存</button>
                    <button className="btn-origin grey">物の削除</button>
                </div>
            </div>
            <div className="infomation-wrap">
                <div className="infomation-table">
                    <table>
                        <colgroup>
                            <col style={{width: '200px'}}/>
                            <col />
                        </colgroup>
                        <tbody>
                            <tr>
                                <th>設計依頼No.</th>
                                <td>
                                    <div className="flx-box">
                                        <div className="product-input-wrap mr5">
                                            <input type="text" className="product-input" defaultValue='1000000002' readOnly/>
                                            <button className="product-delete"></button>
                                        </div>
                                        <button className="btn-origin grey">設計依頼のインポート</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>担当者 <span className="important">*</span></th>
                                <td>
                                    <div className="input-wrap" style={{width : '500px'}}>
                                        <input type="text" className="input-light" defaultValue='Kim Ji Young'/>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>物品区分/物件名 <span className="important">*</span></th>
                                <td>
                                    <div className="flx-box">
                                        <div className="d-check-radio light mr10">
                                            <input type="radio" name="radio01" id="ra01" />
                                            <label htmlFor="ra01">新築</label>
                                        </div>
                                        <div className="d-check-radio light mr10">
                                            <input type="radio" name="radio01" id="ra02" />
                                            <label htmlFor="ra02">基軸</label>
                                        </div>
                                        <div className="input-wrap mr5" style={{width : '545px'}}>
                                            <input type="text" className="input-light" defaultValue='jy0619_0625'/>
                                        </div>
                                        <div className="select-wrap" style={{width : '120px'}}>
                                            <select className="select-light" name="" id="" >
                                                <option>案件</option>
                                                <option>案件</option>
                                                <option>案件</option>
                                                <option>案件</option>
                                                <option>案件</option>
                                            </select>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>商品名 ふりがな</th>
                                <td>
                                    <div className="input-wrap" style={{width : '789px'}}>
                                        <input type="text" className="input-light" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <div className="flx-box">
                                        <div className="title">
                                            一次販売店名/ID <span className="important">*</span>
                                        </div>
                                        <div className="tooltips">
                                            <span>販売代理店または販売代理店IDを1文字以上入力してください。</span>
                                        </div>
                                    </div>
                                </th>
                                <td>
                                    <div className="flx-box">
                                        <div className="select-wrap mr5" style={{width : '567px'}}>
                                            <ReactSelect/>
                                        </div>
                                        <div className="input-wrap" style={{width : '216px'}}>
                                            <input type="text" className="input-light" readOnly/>
                                        </div>
                                        
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <div className="flx-box">
                                        <div className="title">
                                            二次販売店名/ID <span className="important">*</span>
                                        </div>
                                        <div className="tooltips">
                                            <span>販売代理店または販売代理店IDを1文字以上入力してください。</span>
                                        </div>
                                    </div>
                                </th>
                                <td>
                                    <div className="flx-box">
                                        <div className="select-wrap mr5" style={{width : '567px'}}>
                                            <ReactSelect/>
                                        </div>
                                        <div className="input-wrap" style={{width : '216px'}}>
                                            <input type="text" className="input-light" readOnly/>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>郵便番号 <span className="important">*</span></th>
                                <td>
                                    <div className="flx-box">
                                        <div className="input-wrap mr5" style={{width : '200px'}}>
                                            <input type="text" className="input-light" readOnly/>
                                        </div>
                                        <button className="btn-origin grey">住所検索</button>
                                        <div className="guide">※ 郵便番号7桁を入力した後、アドレス検索ボタンをクリックしてください</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>都道府県 / 住所 <span className="important">*</span></th>
                                <td>
                                    <div className="flx-box">
                                        <div className="input-wrap mr5" style={{width : '200px'}}>
                                            <input type="text" className="input-light" readOnly/>
                                        </div>
                                        <div className="input-wrap mr5" style={{width : '580px'}}>
                                            <input type="text" className="input-light" />
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>発電量シミュレーション地域 <span className="important">*</span></th>
                                <td>
                                    <div className="select-wrap" style={{width : '200px'}} >
                                        <select className="select-light" name="" id="" disabled>
                                            <option>東京</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>基準風速 <span className="important">*</span></th>
                                <td>
                                    <div className="flx-box">
                                        <div className="select-wrap mr10" style={{width : '200px'}}>
                                            <select className="select-light" name="" id="">
                                                <option>40</option>
                                            </select>
                                        </div>
                                        <span className="mr10">m/s以下</span>
                                        <button className="btn-origin grey">風速選択</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>垂直説説 <span className="important">*</span></th>
                                <td>
                                    <div className="flx-box">
                                        <div className="select-wrap mr10" style={{width : '200px'}}>
                                            <select className="select-light" name="" id="">
                                                <option>40</option>
                                            </select>
                                        </div>
                                        <span className="mr10">cm</span>
                                        <div className="d-check-box light">
                                            <input type="checkbox" id="ch01" />
                                            <label htmlFor="ch01">寒冷地対策施行</label>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>面調図区分 <span className="important">*</span></th>
                                <td>
                                    <div className="flx-box">
                                        <div className="radio-wrap flx-box" style={{width: '239px'}}>
                                            <div className="d-check-radio light mr10">
                                                <input type="radio" name="radio02" id="ra03" />
                                                <label htmlFor="ra03">III・IV</label>
                                            </div>
                                            <div className="d-check-radio light">
                                                <input type="radio" name="radio02" id="ra04" />
                                                <label htmlFor="ra04">II</label>
                                            </div>
                                        </div>
                                        <div className="d-check-box light mr5">
                                            <input type="checkbox" id="ch02" />
                                            <label htmlFor="ch02">塩害地域用アイテムの使用</label>
                                        </div>
                                        <div className="tooltips"><span>塩害地域の定義は各メーカーの設置マニュアルをご確認ください</span></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>設置高さ <span className="important">*</span></th>
                                <td>
                                    <div className="flx-box">
                                        <div className="select-wrap mr10" style={{width : '200px'}}>
                                            <select className="select-light" name="" id="">
                                                <option>5</option>
                                            </select>
                                        </div>
                                        <span>m</span>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>契約条件</th>
                                <td>
                                    <div className="flx-box">
                                        <div className="d-check-radio light mr10">
                                            <input type="radio" name="radio03" id="ra05" />
                                            <label htmlFor="ra05">余剰</label>
                                        </div>
                                        <div className="d-check-radio light mr10">
                                            <input type="radio" name="radio03" id="ra06" />
                                            <label htmlFor="ra06">全量</label>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th>メモ</th>
                                <td>
                                    <div className="input-wrap">
                                        <input type="text" className="input-light" />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div className="table-box-title-wrap">
                <div className="title-wrap">
                    <h3>プランリスト</h3>
                    <ul className="info-wrap">
                        <li>全体 <span className="red">28</span></li>
                    </ul>
                </div>
            </div>
            <div className="information-help-wrap">
                <div className="information-help-tit-wrap">
                    <div className="help-tit-icon"></div>
                    <div className="help-tit">ヘルプ</div>
                </div>
                <div className="information-help-guide">
                    <span>1.発注は同一品番基準1件のみ可能です。</span>
                    <span>2. [Excelダウンロード]は、見積書、図面、シミュレーション結果をExcelファイルとして一度にダウンロードします。</span>
                    <span>3.プラン情報をダブルクリックすると図面作成画面に移動します。</span>
                </div>
            </div>
            <div className="information-grid">
                <div className='q-grid no-cols'>
                    <QGrid {...gridProps}/>
                    <div className='pagination-wrap'>
                        <Pagination/>
                    </div>
                </div>
            </div>
            <div className="sub-right-footer">
                <button className="btn-origin grey mr5">商品リスト</button>
                <button className="btn-origin navy mr5">保存</button>
                <button className="btn-origin grey">物の削除</button>
            </div>
        </div>
    )
}