<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        .table > tbody + tbody { border-top: 1px solid #ddd; }
        .table-striped > tbody > tr td { background-color: #FFFFFF !important; }
        .table-striped > tbody:nth-of-type(odd) > tr td{ background-color: #f9f9f9 !important; }
        .stockitems .btn-default { text-align: left; cursor: unset; font-size: 15px; line-height: 2; }
        .stockitems .btn-danger { margin: 0 0 0 10px; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="x_panel">
        <div class="x_content top_search">
            <select name="ddlparentId" class="form-control btn btn-default status" v-model="query.parentId" @change="query.categoryId=-1;getList(1);">
                <option value="-1">= 大分類 =</option>
                <option v-for="item in ltCategory" :value="item.id" v-if="item.parentId == null || item.parentId == -1">{{item.name}}</option>
            </select>
            <select name="ddlcategoryId" class="form-control btn btn-default status" v-model="query.categoryId" @change="getList(1);">
                <option value="-1">= 中分類 =</option>
                <option v-for="item in ltCategory" :value="item.id" v-if="query.parentId > 0 && item.parentId == query.parentId">{{item.name}}</option>
            </select>

            <input type="text" name="keyword" class="form-control keyword" v-model="query.keyword" placeholder="型號、品名(輸入關鍵字查詢)"
                   @change="query.keyword=$event.target.value" @keypress="keychange($event);" />

            <div class="group-btn">
                <button class="btn btn-success" @click="getList(1);">搜尋</button>&nbsp;
                <button class="btn btn-primary" @click="clearCriteria();">清除條件</button>
            </div>
            <div></div>
            <div v-if="ltSeatWidthAttrs !== null && ltSeatWidthAttrs.length > 0">
                <div class="multicheck">
                    <h4>座寬: </h4>
                    <label v-for="item in ltSeatWidthAttrs">
                        <input type="checkbox" name="cbseatwidth" :value="item.id" @change="changeCkd('seatwidth', item.id, $event.target.checked)" :checked="checkedList('seatwidth', item.id)" />{{item.name}}
                    </label>
                </div>
            </div>
        </div>
    </div>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-striped jambo_table">
        <thead>
            <tr>
                <td class="col-md-1"></td>
                <td class="col-md-2">輔具</td>
                <td class="col-md-3">品名</td>
                <td class="col-md-1 text-right">售價</td>
                <td class="col-md-1 text-center">座寬</td>
                <td class="col-md-1 text-center">可租用</td>
                <td class="col-md-3">產編</td>
            </tr>
        </thead>
        <tbody v-for="(item, index) in list">
            <tr v-if="item.seatWidthAttrs != null && item.seatWidthAttrs.length > 0"
                v-for="(obj, attrIdx) in item.seatWidthAttrs">
                <td v-show="attrIdx == 0" :rowspan="item.seatWidthAttrs.length" class="text-center"><img :src="item.coverImage" v-if="item.coverImage != null && item.coverImage != ''" /></td>
                <td v-show="attrIdx == 0" :rowspan="item.seatWidthAttrs.length">{{item.productCode}}</td>
                <td v-show="attrIdx == 0" :rowspan="item.seatWidthAttrs.length" class="small">{{item.name}}</td>
                <td v-show="attrIdx == 0" :rowspan="item.seatWidthAttrs.length" class="text-right">
                    <span v-if="item.salePrice >= 0">{{item.salePrice}}</span>
                    <span v-else>--</span>
                </td>
                <td class="text-center">{{obj.name}}</td>
                <td class="text-center">{{obj.availableQty}}</td>
                <td>
                    <div v-if="obj.availableQty > 0" class="stockitems">
                        <div v-for="(stock, idx) in item.stocks"
                             v-show="obj.id == stock.seatWidthAttrId"
                             class="btn btn-default">
                            {{stock.propertyNo}}
                            <a @click="removeItem(item.stocks, idx, stock);" class="btn btn-danger btn-sm float-right"><i class="fas fa-times fa-lg"></i></a>
                        </div>
                        <div class="clear"></div>
                        <a :href="'_stocklist?id=' + item.id + '&aid=' + obj.id + '&oid=' + orderId"
                           v-show="obj.stocks == null || (obj.stocks != null && obj.stocks.length < obj.availableQty)" class="btn btn-success iframeNoClose">選擇</a>
                    </div>
                    <span v-else class="btn btn-sm">無庫存</span>
                </td>
            </tr>
            <tr v-if="item.seatWidthAttrs == null || item.seatWidthAttrs.length == 0">
                <td class="text-center"><img :src="item.coverImage" v-if="item.coverImage != null && item.coverImage != ''" /></td>
                <td>{{item.productCode}}</td>
                <td class="small">{{item.name}}</td>
                <td class="text-right">
                    <span v-if="item.salePrice >= 0">{{item.salePrice}}</span>
                    <span v-else>--</span>
                </td>
                <td></td>
                <td class="text-center">{{item.availableQty}}</td>
                <td>
                    <div v-if="item.availableQty > 0" class="stockitems">
                        <div v-for="(stock, idx) in item.stocks"
                             class="btn btn-default">
                            {{stock.propertyNo}}
                            <a @click="removeItem(item.stocks, idx, stock);" class="btn btn-danger btn-sm float-right"><i class="fas fa-times fa-lg"></i></a>
                        </div>
                        <div class="clear"></div>
                        <a :href="'_stocklist?id=' + item.id + '&aid=-1' + '&oid=' + orderId"
                           v-show="item.stocks == null || (item.stocks != null && item.stocks.length < item.availableQty)" class="btn btn-success iframeNoClose">選擇</a>
                    </div>
                    <span v-else class="btn btn-sm">無庫存</span>
                </td>
            </tr>
            <tr v-show="list == null || list.length == 0">
                <td colspan="5" class="text-center">No Data.</td>
            </tr>
        </tbody>
    </table>
    <div v-if="pager != null" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
        <div class="row">
            <div class="col-sm-4">
                <div class="dataTables_info">總筆數 {{pager.totalRecord}} 筆, 第 {{pager.startItemIndex}} ~ {{pager.endItemIndex}} 筆</div>
            </div>
            <div class="col-sm-8">
                <div class="dataTables_paginate paging_simple_numbers">
                    <ul class="pagination">
                        <li class="paginate_button previous" v-if="pager.currentPage > 1"><a @click="goPage(1);"><i class="fas fa-angle-double-left"></i></a></li>
                        <li class="paginate_button previous" v-if="pager.currentPage > 1"><a @click="goPage(pager.currentPage - 1 );"><i class="fas fa-angle-left"></i></a></li>

                        <li class="paginate_button" :class="{ active: n == pager.currentPage }" v-for="n in pager.endPage" v-if="n >= pager.startPage">
                            <a @click="goPage(n);">{{n}}</a>
                        </li>

                        <li class="paginate_button next" v-if="pager.totalPage > pager.currentPage"><a @click="goPage(pager.currentPage + 1 );"><i class="fas fa-angle-right"></i></a></li>
                        <li class="paginate_button next" v-if="pager.totalPage > pager.currentPage"><a @click="goPage(pager.totalPage);"><i class="fas fa-angle-double-right"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-action">
        <h4>操作：</h4>
        <a class="btn btn-success btn-lg" @click="addProduct()">加入輔具</a>
        <a class="btn btn-info btn-lg" @click="closeAndReloadParent()">關閉</a>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="_productlist.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>