<!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.stock-item { margin: 0; padding: 0; }
        ul.stock-item li { margin: 0; padding: 0; width: 24%; min-width: 150px; float: left; list-style: none; }
        @media (max-width: 1800px) {
            ul.stock-item li { width: 30%; }
        }
        @media (max-width: 1600px) {
            ul.stock-item li { width: 48%; }
        }
        @media (max-width: 1400px) {
            ul.stock-item li { width: 90%; float: unset; }
        }
        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 href="#rule" class="iframe"><i class="fa fa-question-circle"></i></a>
                    <div id="rule" style="display: none; width: 400px;">
                        <h4>運費規則</h4>
                        <ul>
                            <li>
                                出貨：<br />
                                ※已出貨：出貨日<br />
                                ※出貨中止：預計出貨日
                            </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">
            <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>

            執行日期:
            <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: 'startDate'}"
                         v-model="query.startDate">
            </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: 'endDate'}"
                         v-model="query.endDate">
            </date-picker>

            <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 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="memberObj.marketId < 0" 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="[memberObj.marketId < 0 ? '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)"
                                v-if="idx != 2 || (idx == 2 && memberObj.marketId < 0)">
                                <span v-if="item.title == 'checkbox'">
                                    <label v-if="memberObj.marketId < 0"><input type="checkbox" :checked="checkAll" @click="SelectAll($event.target.checked, tabIdx)" />全選</label>
                                </span>
                                <span v-else>{{item.title}}</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in sortShipmentTable" :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="memberObj.marketId < 0 && 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 v-if="memberObj.marketId < 0">
                                <a v-if="item.enVerified == 1" class="btn btn-warning btn-sm" @click="restoreVerified(item, tabIdx);">恢復為未對帳</a>
                            </td>
                            <td class="nobr">{{item.chargeTypeString}}<span v-if="item.isCancel" class="small">(取消)</span></td>
                            <td class="nobr text-center">{{item.eventDate}}</td>
                            <td class="nobr">{{item.receiver}}</td>
                            <td class="nobr">{{item.freightAreaName}}</td>
                            <td class="nobr">
                                <ul class="stock-item">
                                    <li v-for="(stock, idx) in item.stocks"><span class="small">({{idx+1}}) </span>{{stock.propertyNo}}</li>
                                </ul>
                            </td>
                            <td class="text-right">{{item.qty}}</td>
                            <td class="text-right">{{item.charge}}</td>
                            <td class="text-right">{{item.subTotal}}</td>
                            <td class="nobr">
                                <a v-if="item.chargeType == 200" :href="'/oem/order/orderEdit?id=' + item.orderMainId">{{item.chargeTypeNum}}</a>
                                <a v-else-if="item.chargeType == 300" :href="'/oem/order/recycleEdit?id=' + item.chargeTypeId">{{item.chargeTypeNum}}</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="13" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="tab.list != null && tab.list.length > 0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td v-if="memberObj.marketId < 0"></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>
                            <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)"
                                v-if="idx != 2 || (idx == 2 && memberObj.marketId < 0)">
                                <span v-if="item.title == 'checkbox'">
                                    <label v-if="memberObj.marketId < 0"><input type="checkbox" :checked="checkAll" @click="SelectAll($event.target.checked, tabIdx)" />全選</label>
                                </span>
                                <span v-else>{{item.title}}</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in sortCleanTable" :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="memberObj.marketId < 0 && 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 v-if="memberObj.marketId < 0">
                                <a v-if="item.enVerified == 1" class="btn btn-warning btn-sm" @click="restoreVerified(item, tabIdx);">恢復為未對帳</a>
                            </td>
                            <td class="nobr text-center">{{item.eventDate}}</td>
                            <td class="nobr">{{item.modelNo}}</td>
                            <td class="nobr">{{item.productCode}}</td>
                            <td class="nobr">{{item.productName}}</td>
                            <td class="nobr">{{item.propertyNo}}</td>
                            <td class="text-right">{{item.qty}}</td>
                            <td class="text-right">{{item.charge}}</td>
                            <td class="text-right">{{item.subTotal}}</td>
                        </tr>
                        <tr v-show="tab.list == null || tab.list.length == 0">
                            <td colspan="11" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="tab.list != null && tab.list.length > 0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td v-if="memberObj.marketId < 0"></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>
                        </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)"
                                v-if="idx != 2 || (idx == 2 && memberObj.marketId < 0)">
                                <span v-if="item.title == 'checkbox'">
                                    <label v-if="memberObj.marketId < 0"><input type="checkbox" :checked="checkAll" @click="SelectAll($event.target.checked, tabIdx)" />全選</label>
                                </span>
                                <span v-else>{{item.title}}</span>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in sortRepairTable" :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="memberObj.marketId < 0 && 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 v-if="memberObj.marketId < 0">
                                <a v-if="item.enVerified == 1" class="btn btn-warning btn-sm" @click="restoreVerified(item, tabIdx);">恢復為未對帳</a>
                            </td>
                            <td class="nobr text-center">{{item.repaireDate}}</td>
                            <td class="nobr">{{item.productCode}}</td>
                            <td class="nobr">{{item.productName}}</td>
                            <td class="nobr">{{item.propertyNo}}</td>
                            <td class="nobr">{{item.items}}</td>
                            <td class="nobr">{{item.repairingStatusString}}</td>
                            <td class="text-right">{{item.cost}}</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="11" class="text-center">No Data.</td>
                        </tr>
                    </tbody>
                    <tfoot v-show="tab.list != null && tab.list.length > 0">
                        <tr>
                            <td></td>
                            <td></td>
                            <td v-if="memberObj.marketId < 0"></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>
            </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>
                                <div v-if="item.stocks != null" v-for="(propertyNo, idx) in item.stocks"><span class="small">({{idx+1}}) </span>{{propertyNo}}</div>
                            </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="marketbill.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>