<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        select[name='ddlverified'] { max-width : 150px !important; }
        .jambo_table tr.undone td { background-color: rgba(217, 236, 251, 0.3); }
        .jambo_table tr.done td { background-color: #eaeaea; }
        ul.info li span.title { width: 8em; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="x_panel">
        <div class="x_title">
            <h2>搜尋</h2>
            <ul class="nav navbar-right panel_toolbox">
                <li><a class="collapse-link"><i class="fas fa-chevron-up"></i></a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <div class="x_content top_search">
            <div class="autocomplete">
                <input type="search" id="query-market" class="form-control" placeholder="= 通路 =" />
                <div style="display: none">
                    <input type="text" name="marketId" v-model="query.marketId" />
                    <input type="text" name="marketName" v-model="query.marketName" />
                </div>
            </div>

            <div class="autocomplete">
                <input type="search" id="query-store" class="form-control" placeholder="= 門市 =" />
                <div style="display: none">
                    <input type="text" name="storeId" v-model="query.storeId" />
                    <input type="text" name="storeName" v-model="query.storeName" />
                </div>
            </div>
            <select name="ddlverified" class="form-control btn btn-default status" v-model="query.verified" @change="getList();">
                <option value="-1">= 對帳狀態 =</option>
                <option v-for="item in ltVerified" :value="item.value">{{item.name}}</option>
            </select>
            <div></div>
            計租(起):
            <date-picker value-type="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :default-value="new Date()"
                         type="date"
                         input-class="form-control"
                         @change="changeDate('start')"
                         :input-attr="{name: 'startDateFrom'}"
                         v-model="query.startDateFrom">
            </date-picker>
            ~
            <date-picker value-type="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :default-value="new Date()"
                         type="date"
                         input-class="form-control"
                         :input-attr="{name: 'startDateTo'}"
                         v-model="query.startDateTo">
            </date-picker>
            《 或 》
            計租(尾):
            <date-picker value-type="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :default-value="new Date()"
                         type="date"
                         input-class="form-control"
                         @change="changeDate('end')"
                         :input-attr="{name: 'endDateFrom'}"
                         v-model="query.endDateFrom">
            </date-picker>
            ~
            <date-picker value-type="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :default-value="new Date()"
                         type="date"
                         input-class="form-control"
                         :input-attr="{name: 'endDateTo'}"
                         v-model="query.endDateTo">
            </date-picker>

            <div class="group-btn">
                <button class="btn btn-success" @click="getList();">搜尋</button>&nbsp;
                <button class="btn btn-primary" @click="clearCriteria();">清除條件</button>
            </div>
        </div>
    </div>
    <div v-show="!showResult" class="col-md-12 col-sm-12 col-xs-12" style="padding: 20px; border: dotted 1px #ccc; border-radius: 5px;">
        請先選擇通路 & 計租(起)《 或 》計租(尾)!
    </div>
    <div v-show="showResult">
        <div role="tabpanel" data-example-id="togglable-tabs">
            <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                <li v-for="(item, idx) in tabs" :class="{'active': item.show}">
                    <a @click="showDIV(idx)">{{item.name}}</a>
                </li>
            </ul>
        </div>
        <div v-for="(tab, tabIdx) in tabs" v-if="tab.show" class="col-md-12 col-sm-12 col-xs-12">
            <div v-if="!tab.isInvoice">
                <div v-if="(tabIdx == 0 || tabIdx == 2 || tabIdx == 6)" class="col-md-6 col-sm-6 col-xs-12">
                    <a class="btn btn-success" @click="saveVerified(tabIdx)"> 標記為已對帳</a>
                </div>
                <div class="text-right" :class="[(tabIdx == 0 || tabIdx == 2 || tabIdx == 6) ? 'col-md-6 col-sm-6 col-xs-12': 'col-md-12 col-sm-12 col-xs-12']">
                    共 {{tab.list.length}} 筆, 合計 $ {{tab.total.toLocaleString()}}
                </div>
                <!--租賃-->
                <table v-if="tabIdx == 0" border="0" cellpadding="5" cellspacing="1" class="table jambo_table sort-table">
                    <thead>
                        <tr>
                            <td v-for="(item, idx) in tab.trColumns" @click="sortColumn(tabIdx, idx)" :class="sortIcon(tabIdx, idx)">
                                <label v-if="item.title == 'checkbox'"><input type="checkbox" :checked="checkAll" @click="SelectAll($event.target.checked, tabIdx)" />全選</label>
                                <span v-else>{{item.title}}</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in sortRentalTable" :class="{'undone': item.enVerified == 0, 'done': item.enVerified == 1}" :key="index">
                            <td class="text-center">{{item.idx}}</td>
                            <td class="text-center">
                                <input type="checkbox"
                                       v-if="item.enVerified == 0"
                                       :checked="isExistsCheckList(item, tabIdx)"
                                       @click="changeCKD(item, $event.target.checked, tabIdx)"
                                       :tabindex="(index + 1)" />
                                <span v-else-if="item.enVerified == 1" class="label label-default">已對帳</span>
                            </td>
                            <td>
                                <a v-if="item.enVerified == 1" class="btn btn-warning btn-sm" @click="restoreVerified(item, tabIdx);">恢復為未對帳</a>
                            </td>
                            <td class="nobr">{{item.productCode}}</td>
                            <td class="nobr">{{item.seatWidthAttrName}}</td>
                            <td class="nobr"><div v-for="propertyNo in item.stockPropertyNos">{{propertyNo}}</div></td>
                            <td class="nobr">{{item.buyTypeString}}</td>
                            <td class="nobr">{{item.tenantName}}</td>
                            <td class="nobr">{{item.deliveryReceiver}}</td>
                            <td class="nobr">{{item.ownerStoreName}}</td>
                            <td class="nobr text-center">
                                <div v-if="item.enBuyType != 200">{{item.firstDate}}</div>
                                <div v-else>*</div>
                            </td>
                            <td class="nobr text-center">
                                <div v-if="item.enBuyType == 100 || item.enBuyType == 300 || item.enBuyType == 400">{{item.startDate}}</div>
                                <div v-else>*</div>
                            </td>
                            <td class="nobr text-center">
                                <div v-if="item.enBuyType == 100 || item.enBuyType == 300 || item.enBuyType == 400">{{item.endDate}}</div>
                                <div v-else>*</div>
                            </td>
                            <td class="nobr">{{item.statusString}}</td>
                            <td class="nobr text-right">{{item.qty.toLocaleString()}}</td>
                            <td class="nobr text-right"><div v-show="item.enPeriodType > 0">{{item.periodQty.toLocaleString()}}{{item.periodTypeString.substr(0,1)}}</div></td>
                            <td class="nobr text-right"><span v-if="item.enBuyType == 100 || item.enBuyType == 300 || item.enBuyType == 400">$ {{item.totalPrice.toLocaleString()}}</span><span v-else>--</span></td>
                            <td class="nobr text-right"><span v-if="item.enBuyType != 200">$ {{item.totalCost.toLocaleString()}}</span><span v-else>--</span></td>
                            <td class="nobr">
                                <a v-if="item.parentProductId > 0" :href="'/order/detaillist?pid=' + item.parentProductId + '&onum=' + item.orderNum">{{item.orderNum}}</a>
                                <a v-else :href="'/order/detaillist?pid=' + item.productId + '&onum=' + item.orderNum">{{item.orderNum}}</a>
                            </td>
                            <td><div v-if="item.memo != null" v-html="item.memo.replace(/\n/g,'<br />')"></div></td>
                        </tr>
                        <tr v-show="tab.list == null || tab.list.length == 0">
                            <td :colspan="tab.trColumns.length" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="tab.list != null && tab.list.length > 0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right">合計</td>
                            <td class="text-right nobr">$ {{tab.totalPrice.toLocaleString()}}</td>
                            <td class="text-right nobr">$ {{tab.total.toLocaleString()}}</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                <!--運費-->
                <table v-if="tabIdx == 1" border="0" cellpadding="5" cellspacing="1" class="table jambo_table sort-table">
                    <thead>
                        <tr>
                            <td v-for="(item, idx) in tab.trColumns" @click="sortColumn(tabIdx, idx)" :class="sortIcon(tabIdx, idx)">{{item.title}}</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in sortFreightageTable" :key="index">
                            <td class="text-center">{{item.idx}}</td>
                            <td class="nobr">{{item.productCode}}</td>
                            <td class="nobr">{{item.seatWidthAttrName}}</td>
                            <td class="nobr">{{item.tenantName}}</td>
                            <td class="nobr">{{item.deliveryReceiver}}</td>
                            <td class="nobr">{{item.ownerStoreName}}</td>
                            <td class="nobr">{{item.freightageAreaName}}</td>
                            <td class="text-center">{{item.date}}</td>
                            <td class="text-right">{{item.qty.toLocaleString()}}</td>
                            <td class="text-right">{{item.unitFreightage.toLocaleString()}}</td>
                            <td class="text-right">{{item.freightage.toLocaleString()}}</td>
                            <td class="nobr">
                                <a :href="'/order/orderlist?onum=' + item.orderNum">{{item.orderNum}}</a>
                            </td>
                        </tr>
                        <tr v-show="tab.list == null || tab.list.length == 0">
                            <td :colspan="tab.trColumns.length" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="tab.list != null && tab.list.length > 0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right">合計</td>
                            <td class="text-right nobr">$ {{tab.total.toLocaleString()}}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                <!--維修費-->
                <table v-if="tabIdx == 2" border="0" cellpadding="5" cellspacing="1" class="table jambo_table sort-table">
                    <thead>
                        <tr>
                            <td v-for="(item, idx) in tab.trColumns" @click="sortColumn(tabIdx, idx)" :class="sortIcon(tabIdx, idx)">
                                <label v-if="item.title == 'checkbox'"><input type="checkbox" :checked="checkAll" @click="SelectAll($event.target.checked, tabIdx)" />全選</label>
                                <span v-else>{{item.title}}</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in sortRepairingTable" :key="index">
                            <td class="text-center">{{item.idx}}</td>
                            <td class="text-center">
                                <input type="checkbox"
                                       v-if="item.enVerified == 0"
                                       :checked="isExistsCheckList(item, tabIdx)"
                                       @click="changeCKD(item, $event.target.checked, tabIdx)"
                                       :tabindex="(index + 1)" />
                                <span v-else-if="item.enVerified == 1" class="label label-default">已對帳</span>
                            </td>
                            <td>
                                <a v-if="item.enVerified == 1" class="btn btn-warning btn-sm" @click="restoreVerified(item, tabIdx);">恢復為未對帳</a>
                            </td>
                            <td class="nobr">{{item.tenantName}}</td>
                            <td class="nobr">{{item.deliveryReceiver}}</td>
                            <td class="nobr">{{item.paymentStatusString}}</td>
                            <td class="nobr">{{item.repaireDate}}</td>
                            <td class="text-right">{{item.fee.toLocaleString()}}</td>
                            <td class="nobr">{{item.description}}</td>
                            <td>
                                <span v-if="item.paymentDatetime == null">--</span>
                                <span v-else>{{item.paymentDatetime}}</span>
                            </td>
                            <td class="nobr">
                                <a :href="'/order/orderedit?id=' + item.orderId">{{item.orderNum}}</a>
                            </td>
                        </tr>
                        <tr v-show="tab.list == null || tab.list.length == 0">
                            <td :colspan="tab.trColumns.length" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="tab.list != null && tab.list.length > 0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right">合計</td>
                            <td class="text-right nobr">$ {{tab.total.toLocaleString()}}</td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                <!--轉介-->
                <table v-if="tabIdx == 6" border="0" cellpadding="5" cellspacing="1" class="table jambo_table sort-table">
                    <thead>
                        <tr>
                            <td v-for="(item, idx) in tab.trColumns" @click="sortColumn(tabIdx, idx)" :class="sortIcon(tabIdx, idx)">
                                <label v-if="item.title == 'checkbox'"><input type="checkbox" :checked="checkAll" @click="SelectAll($event.target.checked, tabIdx)" />全選</label>
                                <span v-else>{{item.title}}</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in sortTransferTable" :class="{'undone': item.enVerified == 0, 'done': item.enVerified == 1}" :key="index">
                            <td class="text-center">{{item.idx}}</td>
                            <td class="text-center">
                                <input type="checkbox"
                                       v-if="item.enVerified == 0"
                                       :checked="isExistsCheckList(item, tabIdx)"
                                       @click="changeCKD(item, $event.target.checked, tabIdx)"
                                       :tabindex="(index + 1)" />
                                <span v-else-if="item.enVerified == 1" class="label label-default">已對帳</span>
                            </td>
                            <td>
                                <a v-if="item.enVerified == 1" class="btn btn-warning btn-sm" @click="restoreVerified(item, tabIdx);">恢復為未對帳</a>
                            </td>
                            <td class="nobr">{{item.productCode}}</td>
                            <td class="nobr">{{item.seatWidthAttrName}}</td>
                            <td class="nobr">{{item.buyTypeString}}</td>
                            <td class="nobr">{{item.tenantName}}</td>
                            <td class="nobr">{{item.deliveryReceiver}}</td>
                            <td class="nobr">{{item.ownerStoreName}}</td>
                            <td class="nobr text-center">
                                <div v-if="item.enBuyType == 100 || item.enBuyType == 300 || item.enBuyType == 400">{{item.firstDate}}</div>
                                <div v-else>*</div>
                            </td>
                            <td class="nobr text-center">
                                <div v-if="item.enBuyType == 100 || item.enBuyType == 300 || item.enBuyType == 400">{{item.startDate}}</div>
                                <div v-else>*</div>
                            </td>
                            <td class="nobr text-center">
                                <div v-if="item.enBuyType == 100 || item.enBuyType == 300 || item.enBuyType == 400">{{item.endDate}}</div>
                                <div v-else>*</div>
                            </td>
                            <td class="nobr">{{item.statusString}}</td>
                            <td class="nobr text-right">{{item.qty.toLocaleString()}}</td>
                            <td class="nobr text-right"><div v-show="item.enPeriodType > 0">{{item.periodQty.toLocaleString()}}{{item.periodTypeString.substr(0,1)}}</div></td>
                            <td class="nobr text-right">$ {{item.totalPrice.toLocaleString()}}</td>
                            <td class="nobr text-right">$ {{item.totalCost.toLocaleString()}}</td>
                            <td class="nobr">
                                <a v-if="item.parentProductId > 0" :href="'/order/detaillist?pid=' + item.parentProductId + '&onum=' + item.orderNum">{{item.orderNum}}</a>
                                <a v-else :href="'/order/detaillist?pid=' + item.productId + '&onum=' + item.orderNum">{{item.orderNum}}</a>
                            </td>
                            <td><div v-if="item.memo != null" v-html="item.memo.replace(/\n/g,'<br />')"></div></td>
                        </tr>
                        <tr v-show="tab.list == null || tab.list.length == 0">
                            <td :colspan="tab.trColumns.length" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="tab.list != null && tab.list.length > 0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right">合計</td>
                            <td class="text-right nobr">$ {{tab.totalPrice.toLocaleString()}}</td>
                            <td class="text-right nobr">$ {{tab.total.toLocaleString()}}</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <!--發票-->
            <div v-if="tab.isInvoice">
                <div class="col-md-7 col-sm-6 col-xs-12">
                    <ul class="info">
                        <li>
                            <span class="title">申請日期：</span>
                            <span>{{tab.obj.applyDate}}</span>
                        </li>
                        <li>
                            <span class="title">買受人：</span>
                            <span>{{tab.obj.buyer.title}}</span>
                        </li>
                        <li>
                            <span class="title">統編：</span>
                            <span>{{tab.obj.buyer.taxNo}}</span>
                        </li>
                        <li v-show="tab.obj.buyer.address != ''">
                            <span class="title">地址：</span>
                            <span>{{tab.obj.buyer.county}}{{tab.obj.buyer.city}}{{tab.obj.buyer.address}}</span>
                        </li>
                        <li v-show="tab.obj.buyer.phone != ''">
                            <span class="title">電話：</span>
                            <span>{{tab.obj.buyer.phone}}</span>
                        </li>
                    </ul>
                </div>
                <div class="col-md-5 col-sm-6 col-xs-12">
                    <ul class="info">
                        <li>
                            <span class="title">發票格式：</span>
                            <span v-for="item in ltInvoiceTypes" v-if="item.value == tab.obj.buyer.enInvoiceType">{{item.name}}</span>
                        </li>
                        <li>
                            <span class="title">請款發票：</span>
                            <span v-for="item in ltBillTypes" v-if="item.value == tab.obj.buyer.enBillType">{{item.name}}</span>
                        </li>
                    </ul>
                </div>
                <table border="0" cellpadding="5" cellspacing="1" class="table jambo_table">
                    <thead>
                        <tr>
                            <td class="text-center">項次</td>
                            <td>JDE料號</td>
                            <td>品名</td>
                            <td class="text-right">數量</td>
                            <td class="text-right">單價(未稅)</td>
                            <td class="text-right">金額</td>
                            <td>備註</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in tab.obj.list">
                            <td class="nobr text-center">{{index + 1}}</td>
                            <td class="nobr">{{item.modelNo}}</td>
                            <td class="nobr">{{item.productName}}</td>
                            <td class="nobr text-right">{{item.qty.toLocaleString()}}</td>
                            <td class="nobr text-right">$ {{item.unitPrice.toLocaleString('zh', { minimumFractionDigits: 4, useGrouping: true })}}</td>
                            <td class="nobr text-right">$ {{item.subtotal.toLocaleString()}}</td>
                            <td></td>
                        </tr>
                        <tr v-show="tab.obj.list == null || tab.obj.list.length == 0">
                            <td colspan="7" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="tab.obj.list != null && tab.obj.list.length > 0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right">合計</td>
                            <td class="text-right">$ {{tab.obj.subtotal.toLocaleString()}}</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right">稅額</td>
                            <td class="text-right">$ {{tab.obj.totalTax.toLocaleString()}}</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td class="text-right">總合計(含稅)</td>
                            <td class="text-right">$ {{tab.obj.totalAmt.toLocaleString()}}</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="footer-action">
            <h4>操作：</h4>
            <a class="btn btn-success btn-lg" @click="exportData()"><i class="fas fa-file-excel"></i> 匯出報表</a>
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="storebill.js?tf=202507221557" type="module"></script>
    <!--FinalScript E-->
</body>
</html>