<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        ul.relation { padding: 0 1.5em; }
        ul.pictures { margin: 0; padding: 0; }
        ul.pictures li { margin: 0.2em; padding: 0; list-style: none; display: inline-block; width: 30%; }
        ul.pictures li a.center { left: 35%; top: 35%; }
        .box { display: flex; justify-content: space-around; align-items: baseline; margin-bottom: 5px !important; border: 1px solid #ccc; cursor: move; }
        #dvMain .cke_contents { min-height: 400px; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="" role="tabpanel" data-example-id="togglable-tabs">
        <ul v-if="modifyObj.id > 0" id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
            <li class="active"><a :href="'edit?id=' + modifyObj.id">輔具編輯</a></li>
            <li><a :href="'productrelation?mid=' + modifyObj.id + '&t=200'">可加租耗材&配件</a></li>
            <li><a :href="'productrelation?mid=' + modifyObj.id + '&t=300'">可加購配件</a></li>
            <li v-show="modifyObj.enProductType == 100"><a :href="'stocklist?mid=' + modifyObj.id">庫存</a></li>
            <li v-show="modifyObj.enProductType == 200"><a :href="'productrelation?mid=' + modifyObj.id + '&t=400'">組合內容</a></li>
            <li><a href="list">回列表</a></li>
        </ul>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12"></div>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-bordered">
        <tr>
            <th class="required">類型</th>
            <td colspan="3">
                <div class="btn-group btn-toggle productType">
                    <div class="btn btn-default" v-for="item in ltProductType"
                         :class="'productType' + item.value"
                         @click="toggleBTN('productType', item.value)">{{item.name}}</div>
                </div>
            </td>
        </tr>
        <tr>
            <th class="required">分類</th>
            <td colspan="3">
                <div v-show="ltCategory == null || ltCategory.length == 0">請先建立輔具分類</div>
                <div v-show="ltCategory != null && ltCategory.length > 0">
                    <label>大分類</label>
                    <div class="btn-group btn-toggle parentCategoryId">
                        <div v-for="item in ltCategory" v-if="item.parentId == null || item.parentId == -1"
                             class="btn btn-default" :class="'parentCategoryId' + item.id" @click="toggleBTN('parentCategoryId', item.id)">{{item.name}}</div>
                    </div>
                    <label>中分類</label>
                    <div class="btn-group btn-toggle categoryId">
                        <div class="btn btn-default categoryId-1" v-show="parentCategoryId < 0">= 請先選擇大分類 =</div>
                        <div v-for="item in ltCategory" v-if="parentCategoryId > 0 && item.parentId == parentCategoryId"
                             class="btn btn-default" :class="'categoryId' + item.id" @click="toggleBTN('categoryId', item.id)">{{item.name}}</div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <th class="required">排序</th>
            <td colspan="3">
                <input type="number" class="form-control" ref="sort" v-model="modifyObj.sort" />
            </td>
        </tr>
        <tr>
            <th class="required">品名</th>
            <td colspan="3">
                <input type="text" class="form-control" ref="name" v-model="modifyObj.name" />
            </td>
        </tr>
        <tr>
            <th class="required">型號</th>
            <td>
                <input type="text" class="form-control" ref="productCode" v-model="modifyObj.productCode" />
            </td>
            <th class="required">JDE料號(發票用)</th>
            <td>
                <input type="text" class="form-control" ref="modelNo" v-model="modifyObj.modelNo" />
            </td>
        </tr>
        <tr>
            <th class="required">運費類型</th>
            <td colspan="3">
                <div class="btn-group btn-toggle freightTypeId">
                    <div class="btn btn-default" v-for="item in ltFreightType"
                         :class="'freightTypeId' + item.id"
                         @click="toggleBTN('freightTypeId', item.id)">{{item.name}}</div>
                </div>
            </td>
        </tr>
        <tr>
            <th class="required">售價</th>
            <td>
                <input type="number" class="form-control" ref="salePrice" v-model="modifyObj.salePrice" min="-1" />
                ※如不適用請於輸入 -1 即可。
            </td>
            <th class="required">對帳金額(售價)</th>
            <td>
                <input type="number" class="form-control" ref="salePriceCost" v-model="modifyObj.salePriceCost" min="-1" />
                ※如不適用請於輸入 -1 即可。
            </td>
        </tr>
        <tr>
            <th class="required">月租費</th>
            <td>
                <input type="number" class="form-control" ref="monthlyCharge" v-model="modifyObj.monthlyCharge" min="-1" />
                ※如不適用請於輸入 -1 即可。
            </td>
            <th class="required">對帳金額(月租費)</th>
            <td>
                <input type="number" class="form-control" ref="monthlyCost" v-model="modifyObj.monthlyCost" min="-1" />
                ※如不適用請於輸入 -1 即可。
            </td>
        </tr>
        <tr>
            <th class="required">週租費</th>
            <td>
                <input type="number" class="form-control" ref="weeklyCharge" v-model="modifyObj.weeklyCharge" min="-1" />
                ※如不適用請於輸入 -1 即可。
            </td>
            <th class="required">對帳金額(週租費)</th>
            <td>
                <input type="number" class="form-control" ref="weeklyCost" v-model="modifyObj.weeklyCost" min="-1" />
                ※如不適用請於輸入 -1 即可。
            </td>
        </tr>
        <tr>
            <th class="required">是否需回收</th>
            <td>
                <div class="btn-group btn-toggle btn-group-yn recovery">
                    <div class="btn btn-default recovery1" @click="toggleBTN('recovery', 1)">是（租借）</div>
                    <div class="btn btn-default recovery0" @click="toggleBTN('recovery', 0)">否（買斷）</div>
                </div>
            </td>
            <th class="required">加租(購)</th>
            <td>
                <div class="btn-group btn-toggle btn-group-yn requiredAddition">
                    <div class="btn btn-default requiredAddition1" @click="toggleBTN('requiredAddition', 1)">必選</div>
                    <div class="btn btn-default requiredAddition0" @click="toggleBTN('requiredAddition', 0)">非必選</div>
                </div>
            </td>
        </tr>
        <tr>
            <th class="required">續租是否收費</th>
            <td colspan="3">
                <div class="btn-group btn-toggle btn-group-yn renewCharged">
                    <div class="btn btn-default renewCharged1" @click="toggleBTN('renewCharged', 1)">是</div>
                    <div class="btn btn-default renewCharged0" @click="toggleBTN('renewCharged', 0)">否</div>
                </div>
            </td>
        </tr>
        <tr v-show="modifyObj.enRecovery == 1">
            <th class="required">押金</th>
            <td colspan="3">
                <input type="number" class="form-control" ref="deposit" v-model="modifyObj.deposit" min="0" />
            </td>
        </tr>
        <tr v-show="modifyObj.enRecovery == 1">
            <th class="required">耗材費</th>
            <td>
                <input type="number" class="form-control" ref="consumableFee" v-model="modifyObj.consumableFee" min="0" />
            </td>
            <th class="required">
                耗材費包含(贈品)
            </th>
            <td>
                <div v-if=" modifyObj.id < 0">※新增輔具後再加入產品。</div>
                <div v-else>
                    <a :href="'_relationproductlist?mid=' + modifyObj.id + '&t=100'" class="btn btn-success iframe">加入產品</a>
                    <ul v-show="relations != null && relations.length > 0" class="relation">
                        <li v-for="item in relations">
                            {{item.name}} x <input type="number" v-model="item.bundleQty" /> ($ {{item.salePrice}})
                            <a class="btn btn-sm btn-danger" @click="removeRelation(item)"><i class="fas fa-trash-alt"></i></a>
                        </li>
                    </ul>
                    <a v-show="relations != null && relations.length > 0" class="btn btn-success" @click="updateRelationQty()">儲存數量</a>
                </div>
            </td>
        </tr>
        <tr>
            <th>輔具圖</th>
            <td colspan="3">
                <div class="col-md-5 col-sm-5 col-xs-12">
                    <div>
                        <a class="hlkUploadMulti" @click="triggerUpload('#fuImg')">
                            <div class="btn-upload-single-img">
                                <img src="/assets/img/drive_upload.png" width="30" border="0" align="middle" />上傳封面圖<br /> gif, jpg, jpeg, png only
                            </div>
                            <div style="display: none;">
                                <input type="file" id="fuImg" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuImg" @change="onFileChange" />
                            </div>
                        </a>
                        <div class="text-center">建議規格：500 x 500 (px)</div>
                    </div>
                    <div class="img-with-remove" v-if="(modifyObj.coverImage != null && modifyObj.coverImage != '')">
                        <img :src="modifyObj.coverImage" />
                        <a class="btn btn-danger center" @click="modifyObj.coverImage = null;"><i class="fas fa-trash-alt"></i></a>
                    </div>
                </div>
                <div class="col-md-7 col-sm-7 col-xs-12">
                    <div>
                        <a class="hlkUploadMulti" @click="triggerUpload('#fuPictures')">
                            <div class="btn-upload-single-img">
                                <img src="/assets/img/drive_upload.png" width="30" border="0" align="middle" />上傳內頁圖<br /> gif, jpg, jpeg, png only
                            </div>
                            <div style="display: none;">
                                <input type="file" id="fuPictures" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuPictures" @change="onFileChange" />
                            </div>
                        </a>
                        <div class="text-center">建議尺寸：1000 x 1000 (px) ，圖片需大於 500 x 500 才會有放大的效果</div>
                        <div class="text-center">※請用拖移方式調整排序</div>
                    </div>
                    <draggable id="img-sort" :list="newPictures">
                        <ul v-for="(item, idx) in newPictures" :key="item" class="pictures box">
                            <li style="width:10%;" class="img-with-remove"><img :src="item.url" /></li>
                            <li style="width:10%;"><p>排序:{{idx + 1}}</p></li>
                            <li style="width:10%;"><a class="btn btn-sm btn-danger center" @click="removePicture(idx)"><i class="fas fa-trash-alt"></i></a></li>
                        </ul>
                    </draggable>
                </div>
            </td>
        </tr>
        <tr>
            <th>簡述</th>
            <td colspan="3">
                <textarea class="form-control" v-model="modifyObj.brief"></textarea>
            </td>
        </tr>
        <tr>
            <th>內容</th>
            <td colspan="3">
                <ckeditor name="content" v-model="modifyObj.content"></ckeditor>
                <a class="hlkUploadMulti" @click="triggerUpload('#fuFile')">
                    <div class="btn-editor-upload"><img src="/assets/img/drive_upload.png" width="30" border="0" align="middle" />上傳&插入圖片</div>
                    <div style="display: none;">
                        <input type="file" id="fuFile" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuFile" @change="onFileChange" />
                    </div>
                </a>
            </td>
        </tr>
        <tr>
            <th class="required">上架</th>
            <td colspan="3">
                <div class="btn-group btn-toggle btn-group-yn status">
                    <div class="btn btn-default status1" @click="toggleBTN('status', 1)">是</div>
                    <div class="btn btn-default status0" @click="toggleBTN('status', 0)">否</div>
                </div>
            </td>
        </tr>
        <tr>
            <th></th>
            <td colspan="3" class="tdModify">
                <button class="btn btn-success" @click="createItem();" v-if="modifyObj.id <= 0">新增</button>
                <button class="btn btn-success" @click="updateItem();" v-if="modifyObj.id > 0">修改</button>
                <button class="btn btn-primary" @click="resetItem();">重填</button>
                <button class="btn btn-danger" @click="deleteItem();" v-if="modifyObj.id > 0">刪除</button>
                <a class="btn btn-info" href="list">回列表頁</a>
            </td>
        </tr>
    </table>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-bordered" v-if="modifyObj.id > 0">
        <tr>
            <th>建檔</th>
            <td>{{modifyObj.creatorName}} {{modifyObj.createDate}}</td>
            <th>異動</th>
            <td>{{modifyObj.modifierName}} {{modifyObj.modifyDate}}</td>
        </tr>
    </table>
    <!--Content E-->
    <!--FinalScript S-->
    <!--CKEditor4文字編輯器-->
    <script src="/assets/third-party/ckeditor.min.js"></script>
    <script src="/assets/plugins/ckeditor/ckeditor.js?tf=202309201517"></script>
    <script type="text/javascript">
        // 如要修改CKEditor4 config.js檔，請修改下方時間參數以及ckeditor.js後方時間參數後即可
        CKEDITOR.timestamp = '202309201517';
    </script>

    <!--拖曳用 js-->
    <script src="/assets/plugins/sortablejs/Sortable.min.js"></script>
    <script src="/assets/plugins/vuedraggable/dist/vuedraggable.umd.min.js"></script>

    <script src="edit.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>