<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        .multicheck label .red { background-color: #ffd8d4; padding: 0.2em 0.5em; border-radius: 5px; }
        tr.bg-pink td { background-color: #ffd8d4 !important; }
        tr.nofity td { background-color: #fffa00 !important; }
        .jambo_table ul { margin: 0; padding: 0; width: 100%; text-align: left; }
        .jambo_table ul li { margin: 0; padding: 0 0.5em; display: inline-block; list-style: none; font-size: 0.9em; text-align: center; }
        .jambo_table ul li img { height: 50px; }
        
        .prod-img { position: relative; }
            .prod-img .prod-qty { position: absolute; color: #FFF; bottom: 0; right: 0; background-color: #fd7e14; border-radius: 50px; padding: 0px 5px; }
        .receipt img, .contract img { width: 30px !important; }
        .receipt i, .contract i { vertical-align: bottom; }
    </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">
            建立日期:
            <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="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>

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

            <input type="text" name="propertyno" class="form-control propertyno" v-model="query.propertyNo" placeholder="產編"
                   @change="query.propertyNo=$event.target.value" @keypress="keychange($event);" />

            <div></div>
            <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="multicheck">
                <h4>訂單狀態: </h4>
                <label v-for="item in ltStatus" v-show="item.value > 100">
                    <input type="checkbox" name="cbstatus" :value="item.value"
                           @change="changeStatus('status', item.value, $event.target.checked)"
                           :checked="checkedList('status', item.value)" />{{item.name}}
                </label>
            </div>

            <div></div>
            <div class="multicheck">
                <h4>付款方式: </h4>
                <label v-for="item in ltPayMethod">
                    <input type="checkbox" name="cbpaymethod" :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="cbpayment" :value="item.value"
                           @change="changeStatus('payment', item.value, $event.target.checked)"
                           :checked="checkedList('payment', item.value)" />{{item.name}}
                    <span class="red" v-show="item.cnt > 0">{{item.cnt}}</span>
                </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 jambo_table">
        <thead>
            <tr>
                <td></td>
                <td>建立日</td>
                <td>類型</td>
                <td>租借目的</td>
                <td>訂單來源</td>
                <td>來源門市</td>
                <td>訂單編號</td>
                <td class="text-center">狀態</td>
                <td class="width100">承租人</td>
                <td>手機</td>
                <td>租賃品項</td>
                <td>運送方式</td>
                <td>匯款單</td>
                <td>回簽合約</td>
                <td>付款方式</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in list" :class="trCss(item)">
                <td class="text-center">
                    <a @click="gotoEditUrl(item)" class="btn btn-info btn-sm" v-if="item.enStatus == 500"><i class="fas fa-search"></i></a>
                    <a @click="gotoEditUrl(item)" class="btn btn-success btn-sm" v-else><i class="fas fa-edit"></i></a>
                </td>
                <td class="nobr small"><a @click="gotoEditUrl(item)">{{item.createDate}}</a></td>
                <td><a @click="gotoEditUrl(item)" class="label-status" :class="'om-type' + item.enType">{{item.typeString}}</a></td>
                <td><a @click="gotoEditUrl(item)" class="label-status" :class="'om-rentedfor' + item.enRentedFor">{{item.rentedForString}}</a></td>
                <td><a @click="gotoEditUrl(item)" class="label-status" :class="'om-source' + item.enSource">{{item.sourceString}}</a></td>
                <td class="nobr"><a @click="gotoEditUrl(item)" v-if="item.ownerStoreId > 0"><span v-if="item.ownerStoreName == null || item.ownerStoreName == ''" class="small">未設簡稱</span><span v-else>{{item.ownerStoreName}}</span></a></td>
                <td><a @click="gotoEditUrl(item)">{{item.orderNum}}</a></td>
                <td class="nobr text-center" :class="orderCss(item)">
                    <a @click="gotoEditUrl(item)">{{item.statusString}}</a>
                </td>
                <td><a @click="gotoEditUrl(item)"><span v-if="item.enRentedFor == 100">{{item.tenantName}}</span><span v-else>--</span></a></td>
                <td><a @click="gotoEditUrl(item)"><span v-if="item.enRentedFor == 100">{{item.tenantMobile}}</span><span v-else>--</span></a></td>
                <td class="text-center">
                    <ul>
                        <li v-for="obj in item.details">
                            <div class="prod-img" data-toggle="tooltip" data-placement="bottom">
                                <img class="img" :src="obj.coverImage" v-if="obj.coverImage != null && obj.coverImage.length > 0" />
                                <div v-show="obj.qty > 1" class="prod-qty">{{obj.qty}}</div>
                            </div>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </td>
                <td><a @click="gotoEditUrl(item)">{{item.shippingMethodString}}</a></td>
                <td class="receipt">
                    <a v-if="item.enSource != 200 && item.enStatus != 9999" class="btn btn-primary btn-sm hlkUploadMulti" @click="triggerUpload('#fuImg', item, 'receipt')">上傳</a>
                    <a v-for="(img, index) in item.receipts"
                       v-show="index == 0"
                       :data-fancybox="'receipt' + item.id"
                       :href="img"
                       :data-caption="'匯款單' + (index + 1) + '/' + item.receipts.length"><img :src="img" /></a>
                    <i v-if="item.receipts.length > 1" class="fas fa-ellipsis-h"></i>
                </td>
                <td class="contract">
                    <a v-if="item.enType == 100 && item.enStatus != 9999" class="btn btn-primary btn-sm hlkUploadMulti" @click="triggerUpload('#fuImg', item, 'contract')">上傳</a>
                    <a v-for="(img, index) in item.contracts"
                       v-show="index == 0"
                       :data-fancybox="'contract' + item.id"
                       :href="img"
                       :data-caption="'回簽合約' + (index + 1) + '/' + item.contracts.length"><img :src="img" /></a>
                    <i v-if="item.contracts.length > 1" class="fas fa-ellipsis-h"></i>
                </td>
                <td class="small">
                    <a @click="gotoEditUrl(item)">
                        {{item.payMethodString}}
                        <label v-if="item.enPayMethod < 500" class="label"
                               :class="{'label-default': item.enPaymentStatus == 100, 'label-warning': item.enPaymentStatus == 200, 'label-info': item.enPaymentStatus == 300}">{{item.paymentStatusString}}</label>
                    </a>
                </td>
            </tr>
            <tr v-show="list == null || list.length == 0">
                <td colspan="14" class="text-center">No Data.</td>
            </tr>
        </tbody>
    </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 style="display: none;">
        <input type="file" id="fuImg" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuImg" @change="onFileChange" />
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="orderlist.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <!--FinalScript E-->
</body>
</html>