import WithDraggable from "@/components/common/draggable/withDraggable";
import PlacementGuidePop from "./PlacementGuidePop";
import RoofingMaterialGudiePop from "./RoofingMaterialGuidePop";
import Qselect from "@/components/common/select/Qselect";

const SelectOption01 = [
    {name: '瓦53A',}, {name: '瓦53A'}, {name: '瓦53A'}, {name: '瓦53A'}
]
const SelectOption04 = [
    {name: '455'}, {name: '455'}, {name: '455'}, {name: '455'}
]

export default function PlacementSettingPop(){
    return(
        <WithDraggable isShow={true} size={'ll'}>
                <div className="modal-head handle">
                    <h1 className="title">配置面初期設定</h1>
                    <button className="modal-close">닫기</button>
                </div>
                <div className="modal-body">
                    <div className="left-bar handle"></div>
                    <div className="right-bar handle"></div>
                    <div className="placement-table">
                        <table>
                            <colgroup>
                                <col style={{width: '151px'}}/>
                                <col />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <th>図面の作成方法</th>
                                    <td>
                                        <div className="placement-name-wrap">
                                            寸法入力による物品作成 <span className="placement-name-guide">※数字は[半角]入力のみ可能です。</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <div className="tip-wrap">
                                            寸法入力方法 <button className="tooltip"></button>
                                        </div>
                                    </th>
                                    <td>
                                        <div className="pop-form-radio">
                                            <div className="d-check-radio pop">
                                                <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 className="d-check-radio pop">
                                                <input type="radio" name="radio01" id="ra03" />
                                                <label htmlFor="ra03">陸上屋根</label>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>屋根角度設定</th>
                                    <td>
                                        <div className="pop-form-radio place">
                                            <div className="outline-form">
                                                <span>
                                                    <div className="d-check-radio pop">
                                                        <input type="radio" name="radio02" id="ra04" defaultChecked={true}/>
                                                        <label htmlFor="ra04">傾斜</label>
                                                    </div>
                                                </span>
                                                <div className="input-grid mr5" >
                                                    <input type="number" className="input-origin block" defaultValue={4}/>
                                                </div>
                                                <span className="thin">寸</span>
                                            </div>
                                            <div className="outline-form">
                                                <span>
                                                    <div className="d-check-radio pop">
                                                        <input type="radio" name="radio02" id="ra05" />
                                                        <label htmlFor="ra05">角度</label>
                                                    </div>
                                                </span>
                                                <div className="input-grid mr5" >
                                                    <input type="number" className="input-origin block" defaultValue={21.8} disabled/>
                                                </div>
                                                <span className="thin">度</span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <div className="tip-wrap">
                                            屋根材の選択(単位:mm) 
                                            <button className="tooltip"></button>
                                        </div>
                                    </th>
                                    <td>
                                        {/* case01 */}
                                        <div className="placement-option">
                                            <div className="grid-select no-flx" style={{width: '171px'}}>
                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
                                            </div>
                                            <div className="flex-ment">
                                                <span>W</span>
                                                <div className="input-grid" style={{width: '84px'}}>
                                                    <input type="text" className="input-origin block" defaultValue={100} readOnly/>
                                                </div>
                                            </div>
                                            <div className="flex-ment">
                                                <span>L</span>
                                                <div className="input-grid" style={{width: '84px'}}>
                                                    <input type="text" className="input-origin block" defaultValue={100} readOnly/>
                                                </div>
                                            </div>
                                            <div className="flex-ment">
                                                <span>垂木の間隔</span>
                                                <div className="grid-select no-flx" style={{width: '160px'}}>
                                                    <Qselect title={'세로 455mm이하'} option={SelectOption04} disabled={true}/>
                                                </div>
                                            </div>
                                        </div>
                                        

                                        {/* case02 */}
                                        {/* <div className="placement-option">
                                            <div className="grid-select no-flx" style={{width: '171px'}}>
                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
                                            </div>
                                            <div className="flex-ment">
                                                <span>ハゼビーチ</span>
                                                <div className="input-grid" style={{width: '84px'}}>
                                                    <input type="text" className="input-origin block" defaultValue={100} readOnly/>
                                                </div>
                                            </div>
                                            <div className="flex-ment">
                                                <span>垂木の間隔</span>
                                                <div className="grid-select no-flx right" style={{width: '160px'}}>
                                                    <Qselect title={'455'} option={SelectOption04}/>
                                                </div>
                                            </div>
                                        </div> */}

                                        {/* case03 */}
                                        {/* <div className="placement-option">
                                            <div className="grid-select no-flx" style={{width: '171px'}}>
                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
                                            </div>
                                            <div className="flex-ment">
                                                <span>ハゼビーチ</span>
                                                <div className="input-grid" style={{width: '84px'}}>
                                                    <input type="text" className="input-origin block" defaultValue={100} readOnly/>
                                                </div>
                                            </div>
                                        </div> */}

                                        {/* case04 */}
                                        {/* <div className="placement-option">
                                            <div className="grid-select no-flx" style={{width: '171px'}}>
                                                <Qselect title={'瓦53A'} option={SelectOption01}/>
                                            </div>
                                            <div className="flex-ment">
                                                <span>L</span>
                                                <div className="input-grid" style={{width: '84px'}}>
                                                    <input type="text" className="input-origin block" defaultValue={100} readOnly/>
                                                </div>
                                            </div>
                                            <div className="flex-ment">
                                                <span>垂木の間隔</span>
                                                <div className="grid-select no-flx right" style={{width: '160px'}}>
                                                    <Qselect title={'455'} option={SelectOption04}/>
                                                </div>
                                            </div>
                                        </div> */}

                                        {/* <div className="placement-roof-btn-wrap">
                                            <div className="icon-btn-wrap mt10">
                                                <button className="act" disabled>並列式<i className="allocation01"></i></button>
                                                <button disabled>カスケード <i className="allocation02"></i></button>
                                            </div>
                                        </div> */}
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                    <div className="grid-btn-wrap">
                        <button className="btn-frame modal act">保存</button>
                    </div>
                </div>
                <div className="modal-foot handle"></div>
                {/* <PlacementGuidePop/>
                <RoofingMaterialGudiePop/> */}
        </WithDraggable>
    )
}