<!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; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="" role="tabpanel" data-example-id="togglable-tabs">
        <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
            <li><a :href="'edit?id=' + store.id">基本資料</a></li>
            <li><a :href="'userlist?sid=' + store.id">門市帳號</a></li>
            <li><a :href="'pricelist?sid=' + store.id">價格</a></li>
            <li><a :href="'freightlist?sid=' + store.id">運費</a></li>
            <li><a :href="'orderlist?sid=' + store.id">租賃記錄</a></li>
            <li class="active"><a :href="'stocklist?sid=' + store.id">輔具動態</a></li>
            <li><a href="list">回列表</a></li>
        </ul>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12"></div>
    <div class="col-md-4 col-sm-4 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">通路</span>
                <span>{{store.marketName}}</span>
            </li>
            <li>
                <span class="title">門市</span>
                <span>{{store.name}} ({{store.shortName}})</span>
                <a :href="'@printqrcode?id=' + store.id" class="iframe alignright"><i class="fas fa-qrcode fa-lg"></i></a>
            </li>
            <li>
                <span class="title">佳醫代收</span>
                <label class="label label-info" v-if="store.isCodConsumableFee == 1">耗材費</label>
                <label class="label label-default" v-if="store.isCodFreight == 1">運費</label>
                <span v-if="store.isCodConsumableFee == 0 && store.isCodFreight == 0">--</span>
            </li>
        </ul>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12">
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12"></div>

    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="" role="tabpanel" data-example-id="togglable-tabs">
            <ul id="myTab2" class="nav nav-tabs bar_tabs" role="tablist">
                <li v-for="(tab, idx) in panel" :class="{'active': tab.show}"><a @click="showDIV(idx)">{{tab.name}}</a></li>
            </ul>
        </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12"
         v-for="(tab, tabIdx) in panel" v-show="tab.show">
        <table border="0" cellpadding="5" cellspacing="1" class="table table-striped jambo_table">
            <thead>
                <tr>
                    <td>型號</td>
                    <td>品名</td>
                    <td>座寬</td>
                    <td>庫存量 {{tab.totalQty}}</td>
                    <td></td>
                </tr>
            </thead>
            <tbody v-for="(item, index) in tab.list">
                <tr v-if="item.ltOrders != null && item.ltOrders.length > 0">
                    <td class="small"><a :href="'/product/edit?id=' + item.productId">{{item.productCode}}</a></td>
                    <td class="small"><a :href="'/product/edit?id=' + item.productId">{{item.productName}}</a></td>
                    <td></td>
                    <td class="text-center">
                        <div v-if="item.qty > 0">
                            <span>{{item.qty}}</span>
                            <a @click="showInfo(item);"
                               :href="'_stockinfo?sid=' + store.id + '&pid=' + item.productId + '&tab=' + tabIdx" class="btn btn-info iframe"><i class="fas fa-search"></i></a>
                        </div>
                        <div v-else>--</div>
                    </td>
                    <td>
                        <div v-for="order in item.ltOrders">
                            <div v-for="stock in order.ltStocks">{{stock.propertyNo}}</div>
                        </div>
                    </td>
                </tr>
                <tr v-if="item.ltSeatWidthAttrs != null && item.ltSeatWidthAttrs.length > 0"
                    v-for="(obj, attrIdx) in item.ltSeatWidthAttrs"
                    v-show="obj.qty > 0">
                    <td v-show="attrIdx == 0" :rowspan="item.ltSeatWidthAttrs.length" class="small"><a :href="'/product/edit?id=' + item.productId">{{item.productCode}}</a></td>
                    <td v-show="attrIdx == 0" :rowspan="item.ltSeatWidthAttrs.length" class="small"><a :href="'/product/edit?id=' + item.productId">{{item.productName}}</a></td>
                    <td>{{obj.name}}</td>
                    <td class="text-center">
                        <div v-if="obj.qty > 0">
                            <span>{{obj.qty}}</span>
                            <a @click="showInfo(item);"
                               :href="'_stockinfo?sid=' + store.id + '&pid=' + item.productId + '&a=' + obj.id + '&tab=' + tabIdx" class="btn btn-info iframe"><i class="fas fa-search"></i></a>
                        </div>
                        <div v-else>--</div>
                    </td>
                    <td>
                        <div v-for="order in obj.ltOrders">
                            <div v-for="stock in order.ltStocks">{{stock.propertyNo}}</div>
                        </div>
                    </td>
                </tr>
                <tr v-show="tab.list == null || tab.list.length == 0">
                    <td colspan="6" class="text-center">No Data.</td>
                </tr>
            </tbody>
        </table>
        <div v-if="tab.pager != null" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
            <div class="row">
                <div class="col-sm-4">
                    <div class="dataTables_info">總筆數 {{tab.pager.totalRecord}} 筆, 第 {{tab.pager.startItemIndex}} ~ {{tab.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="tab.pager.currentPage > 1"><a @click="goPage(1, tabIdx);"><i class="fas fa-angle-double-left"></i></a></li>
                            <li class="paginate_button previous" v-if="tab.pager.currentPage > 1"><a @click="goPage(tab.pager.currentPage - 1, tabIdx);"><i class="fas fa-angle-left"></i></a></li>

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

                            <li class="paginate_button next" v-if="tab.pager.totalPage > tab.pager.currentPage"><a @click="goPage(tab.pager.currentPage + 1, tabIdx);"><i class="fas fa-angle-right"></i></a></li>
                            <li class="paginate_button next" v-if="tab.pager.totalPage > tab.pager.currentPage"><a @click="goPage(tab.pager.totalPage, tabIdx);"><i class="fas fa-angle-double-right"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="stocklist.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>