<!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; }
        table.jambo_table tfoot { background: #e3e1e1; }
        ul.info li span.title { width: 8em; }
        .table-striped > tbody > tr.tr0 td { background-color: #FFFFFF !important; }
        .table-striped > tbody:nth-of-type(odd) > tr.tr1 td { background-color: #f9f9f9 !important; }
    </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 href="#rule" class="iframe"><i class="fa fa-question-circle"></i></a>
                    <div id="rule" style="display: none; width: 400px;">
                        <h4>列表規則</h4>
                        <ul>
                            <li>租借目的: 客人租用</li>
                            <li>直客：依收款記錄列營收</li>
                            <li>門市：依門市對帳歸列對帳月份</li>
                        </ul>
                    </div>
                </li>
                <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">
            營收月份:
            <date-picker value-type="YYYY-MM-01"
                         type="month"
                         input-class="form-control"
                         @change="changeDate('start')"
                         :input-attr="{name: 'startMonth'}"
                         v-model="query.startMonth">
            </date-picker>
            ~
            <date-picker value-type="YYYY-MM-01"
                         type="month"
                         input-class="form-control"
                         :input-attr="{name: 'endMonth'}"
                         v-model="query.endMonth">
            </date-picker>
            <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>

            <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 class="multicheck">
                <h4>來源: </h4>
                <label v-for="item in ltSource">
                    <input type="checkbox" name="cbsource" :value="item.value"
                           @change="changeStatus('source', item.value, $event.target.checked)"
                           :checked="checkedList('source', item.value)" />{{item.name}}
                </label>
            </div>
            <div class="multicheck">
                <h4>付款方式: </h4>
                <label v-for="item in ltPayMethod">
                    <input type="checkbox" name="payMethod" :value="item.value"
                           @change="changeStatus('payMethod', item.value, $event.target.checked)"
                           :checked="checkedList('payMethod', item.value)" />{{item.name}}
                </label>
            </div>
            <div class="multicheck">
                <h4>付款狀態: </h4>
                <label v-for="item in ltPaymentStatus">
                    <input type="checkbox" name="paymentStatus" :value="item.value"
                           @change="changeStatus('paymentStatus', item.value, $event.target.checked)"
                           :checked="checkedList('paymentStatus', item.value)" />{{item.name}}
                </label>
            </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="tabIdx == 0" class="col-md-12 col-sm-12 col-xs-12">
                <div class="col-md-8 col-sm-8 col-xs-12">
                    營收 $ {{totalRent.toLocaleString()}} + 運費 $ {{totalFreightage.toLocaleString()}} + 加購 $ {{totalPurchase.toLocaleString()}} = 合計{{(totalRent + totalFreightage + totalPurchase).toLocaleString()}}
                </div>
                <div class="col-md-4 col-sm-4col-xs-12  text-right">
                    共 {{list.length}} 筆
                </div>
                <table border="0" cellpadding="5" cellspacing="1" class="table table-striped jambo_table sort-table">
                    <thead>
                        <tr>
                            <td v-for="(item, idx) in trColumns" @click="sortColumn(idx)" :class="sortIcon(idx)">{{item.title}}</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in sortTable" :class="item.trcss" :key="index">
                            <td class="text-center">{{item.idx}}</td>
                            <td class="text-center nobr">{{item.revenueMonth}}</td>
                            <td class="nobr"><label class="label-status" :class="'om-source' + item.enSource">{{item.sourceString}}</label></td>
                            <td class="nobr">{{item.ownerStoreShortName}}</td>
                            <td class="nobr">{{item.tenantName}}</td>
                            <td class="nobr">{{item.deliveryReceiver}}</td>
                            <td class="nobr">{{item.productCode}}</td>
                            <td class="nobr">{{item.seatWidthAttrName}}</td>
                            <td class="nobr">{{item.buyTypeString}}</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 text-center">{{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.totalRent.toLocaleString()}}</td>
                            <td class="nobr text-right">{{item.totalFreightage.toLocaleString()}}</td>
                            <td class="nobr text-right">{{item.totalPurchase.toLocaleString()}}</td>
                            <td class="nobr small">{{item.shippingMethodString}}</td>
                            <td class="nobr small">{{item.payMethodString}}</td>
                            <td class="nobr small">{{item.paymentStatusString}}</td>
                            <td class="nobr small">{{item.paymentDatetime}}</td>
                            <td class="nobr small"><a :href="'/order/orderedit?id=' + item.orderId">{{item.orderNum}}</a></td>
                            <td class="nobr"><label class="label-status" :class="'om-source' + item.enSource">{{item.sourceString}}</label></td>
                        </tr>
                        <tr v-show="list == null || list.length == 0">
                            <td :colspan="trColumns.length" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <thead>
                        <tr>
                            <td v-for="(item, idx) in trColumns" @click="sortColumn(idx)" :class="sortIcon(idx)">{{item.title}}</td>
                        </tr>
                    </thead>
                    <tfoot v-show="list != null && 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 class="text-right">合計</td>
                            <td class="text-right nobr">$ {{totalPrice.toLocaleString()}}</td>
                            <td class="text-right nobr">{{totalRent.toLocaleString()}}</td>
                            <td class="text-right nobr">{{totalFreightage.toLocaleString()}}</td>
                            <td class="text-right nobr">{{totalPurchase.toLocaleString()}}</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                <div class="col-md-8 col-sm-8 col-xs-12">
                    營收 $ {{totalRent.toLocaleString()}} + 運費 $ {{totalFreightage.toLocaleString()}} + 加購 $ {{totalPurchase.toLocaleString()}} = 合計{{(totalRent + totalFreightage + totalPurchase).toLocaleString()}}
                </div>
                <div class="col-md-4 col-sm-4col-xs-12  text-right">
                    共 {{list.length}} 筆
                </div>
            </div>
            <div v-else-if="tabIdx == 1" class="col-md-8 col-sm-10 col-xs-12">
                <table border="0" cellpadding="5" cellspacing="1" class="table table-striped jambo_table">
                    <thead>
                        <tr>
                            <td>營收月份</td>
                            <td class="text-right">營收</td>
                            <td class="text-right">運費</td>
                            <td class="text-right">加購</td>
                            <td class="text-right">合計</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in summary">
                            <td>{{item.yymm}}</td>
                            <td class="nobr text-right">{{item.totalRent.toLocaleString()}}</td>
                            <td class="nobr text-right">{{item.totalFreightage.toLocaleString()}}</td>
                            <td class="nobr text-right">{{item.totalPurchase.toLocaleString()}}</td>
                            <td class="nobr text-right">{{(item.totalRent + item.totalFreightage + item.totalPurchase).toLocaleString()}}</td>
                        </tr>
                        <tr v-show="summary == null || summary.length == 0">
                            <td colspan="5" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="summary != null && summary.length > 0">
                        <tr>
                            <td class="text-right">合計</td>
                            <td class="text-right nobr">{{totalRent.toLocaleString()}}</td>
                            <td class="text-right nobr">{{totalFreightage.toLocaleString()}}</td>
                            <td class="text-right nobr">{{totalPurchase.toLocaleString()}}</td>
                            <td class="text-right nobr">{{(totalRent + totalFreightage + totalPurchase).toLocaleString()}}</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="operating.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>