<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</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="multicheck">
                <h4>訂單: </h4>
                <label v-for="item in ltType">
                    <input type="checkbox" name="cbtype" :value="item.value"
                           @change="changeStatus('type', item.value, $event.target.checked)"
                           :checked="checkedList('type', item.value)" />{{item.name}}
                </label>
            </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 ltRentedFor">
                    <input type="checkbox" name="cbrentedFor" :value="item.value"
                           @change="changeStatus('rentedFor', item.value, $event.target.checked)"
                           :checked="checkedList('rentedFor', item.value)" />{{item.name}}
                </label>
            </div>

            <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></div>

            建立日期:
            <date-picker value-type="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :default-value="new Date()"
                         type="date"
                         input-class="form-control"
                         @change="changeDate('createDateS')"
                         :input-attr="{name: 'createDateS'}"
                         v-model="query.createDateS">
            </date-picker>
            ~
            <date-picker value-type="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :default-value="new Date()"
                         type="date"
                         input-class="form-control"
                         @change="getList(1)"
                         :input-attr="{name: 'createDateE'}"
                         v-model="query.createDateE">
            </date-picker>

            <div class="multicheck">
                <h4>運送方式: </h4>
                <label v-for="item in ltShippingMethod" v-show="item.value <= 300">
                    <input type="checkbox" name="shippingMethod" :value="item.value"
                           @change="changeStatus('shippingMethod', item.value, $event.target.checked)"
                           :checked="checkedList('shippingMethod', item.value)" />{{item.name}}
                </label>
            </div>

            <input type="text" name="keyword" class="form-control keyword" v-model="query.keyword" placeholder="訂單編號、姓名、電話、地址(輸入關鍵字查詢)"
                   @change="query.keyword=$event.target.value" @keypress="keychange($event);" />
            <div></div>

            <select name="ddlparentCateId" class="form-control btn btn-default status" v-model="query.parentCateId" @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.parentCateId > 0 && item.parentId == query.parentCateId">{{item.name}}</option>
            </select>

            <div class="multicheck">
                <h4>類型: </h4>
                <label v-for="item in ltBuyType">
                    <input type="checkbox" name="buyType" :value="item.value"
                           @change="changeStatus('buyType', item.value, $event.target.checked)"
                           :checked="checkedList('buyType', item.value)" />{{item.display}}
                </label>
            </div>

            <div class="multicheck">
                <h4>狀態: </h4>
                <label v-for="item in ltDetailStatus" v-if="item.value > 100">
                    <input type="checkbox" name="detailStatus" :value="item.value"
                           @change="changeStatus('detailStatus', item.value, $event.target.checked)"
                           :checked="checkedList('detailStatus', item.value)" />{{item.name}}
                </label>
            </div>
            <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('rentalStartDateS')"
                         :input-attr="{name: 'rentalStartDateS'}"
                         v-model="query.rentalStartDateS">
            </date-picker>
            ~
            <date-picker value-type="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :default-value="new Date()"
                         type="date"
                         input-class="form-control"
                         @change="getList(1)"
                         :input-attr="{name: 'rentalStartDateE'}"
                         v-model="query.rentalStartDateE">
            </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('rentalEndDateS')"
                         :input-attr="{name: 'rentalEndDateS'}"
                         v-model="query.rentalEndDateS">
            </date-picker>
            ~
            <date-picker value-type="YYYY-MM-DD"
                         format="YYYY-MM-DD"
                         :default-value="new Date()"
                         type="date"
                         input-class="form-control"
                         @change="getList(1)"
                         :input-attr="{name: 'rentalEndDateE'}"
                         v-model="query.rentalEndDateE">
            </date-picker>

            <div class="multicheck">
                <h4>付款方式: </h4>
                <label v-for="item in ltPayMethod" v-if="item.value < 500">
                    <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 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="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>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-striped jambo_table nobr small 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" :key="index">
                <td class="text-center" :class="{'text-orange': item.enType == 200}">{{item.typeString}}</td>
                <td>{{item.sourceString}}</td>
                <td>{{item.rentedForString}}</td>
                <td>{{item.ownerStoreName}}</td>
                <td class="text-center">{{item.createDatetime}}</td>
                <td><a :href="'/order/orderedit?id=' + item.orderId">{{item.orderNum}}</a></td>
                <td>{{item.tenantName}}</td>
                <td>{{item.email}}</td>
                <td>{{item.tenantMobile}}</td>
                <td>{{item.shippingMethodString}}</td>
                <td>{{item.deliveryReceiver}}</td>
                <td>{{item.deliveryMobile}}</td>
                <td>{{item.deliveryAddress}}</td>
                <td>{{item.takebackAddress}}</td>
                <td>{{item.parentCategoryName}}</td>
                <td>{{item.categoryName}}</td>
                <td>{{item.buyTypeString}}</td>
                <td>{{item.productCode}}</td>
                <td>{{item.seatWidthAttrName}}</td>
                <td>
                    <div v-if="item.ltStocks != null && item.ltStocks.length > 0">
                        <div v-for="obj in item.ltStocks">{{obj.propertyNo}}</div>
                    </div>
                </td>
                <td>{{item.detailStatusString}}</td>
                <td class="text-center">{{item.startDate}}</td>
                <td class="text-center">{{item.endDate}}</td>
                <td class="text-right">{{item.qty}}</td>
                <td class="text-right nobr"><span v-show="item.enRentedFor == 100">{{item.unitPrice.toLocaleString()}}</span></td>
                <td class="text-center"><span v-show="item.enBuyType == 100 || item.enBuyType == 300">{{item.periodQty.toLocaleString()}}{{item.periodTypeString.substr(0,1)}}</span></td>
                <td class="text-right"><span v-show="item.enRentedFor == 100">{{item.consumableFee.toLocaleString()}}</span></td>
                <td class="text-right"><span v-show="item.enRentedFor == 100">{{item.deposit.toLocaleString()}}</span></td>
                <td class="text-right"><span v-show="item.enRentedFor == 100">{{item.freightage.toLocaleString()}}</span></td>
                <td class="text-center"><span v-show="item.enShipPlace > 0">{{item.shipPlaceString}}</span></td>
                <td class="text-center"><span v-if="item.enSource != 200">{{item.payMethodString}}</span><span v-else>--</span></td>
                <td class="text-center"><span v-if="item.enSource != 200">{{item.paymentStatusString}}</span><span v-else>--</span></td>
                <td class="text-center"><span v-if="item.enSource != 200">{{item.invoiceTypeString}}</span><span v-else>--</span></td>
                <td><span v-if="item.enSource != 200 && item.enInvoiceType == 200">{{item.invoiceTaxNo}}</span><span v-else>--</span></td>
                <td><span v-if="item.enSource != 200 && item.enInvoiceType == 200">{{item.invoiceTitle}}</span><span v-else>--</span></td>
                <td class="text-center"><span v-if="item.enSource != 200">{{item.billTypeString}}</span><span v-else>--</span></td>
                <td><span v-if="item.enSource != 200 && item.enBillType == 200">{{item.mobileBarcode}}</span><span v-else>--</span></td>
                <td><span v-if="item.enSource != 200 && item.enBillType == 100">{{item.invoiceReceiver}}</span><span v-else>--</span></td>
                <td><span v-if="item.enSource != 200 && item.enBillType == 100">{{item.invoiceMobile}}</span><span v-else>--</span></td>
                <td><span v-if="item.enSource != 200 && item.enBillType == 100">{{item.invoiceAddress}}</span><span v-else>--</span></td>
                <td>
                    <div v-if="item.ltOthers != null && item.ltOthers.length > 0">
                        <div v-for="obj in item.ltOthers">{{obj.typeString}} {{obj.fee.toLocaleString()}}</div>
                    </div>
                </td>
                <td>{{item.remark}}</td>
            </tr>
            <tr v-show="list == null || list.length == 0">
                <td :colspan="trColumns.length" class="text-center">No Data.</td>
            </tr>
        </tbody>
        <thead v-show="list != null && list.length > 0">
            <tr>
                <td v-for="(item, idx) in trColumns" @click="sortColumn(idx)" :class="sortIcon(idx)">{{item.title}}</td>
            </tr>
        </thead>
    </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="exportData()"><i class="fas fa-file-excel"></i> 匯出報表</a>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="rental.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>