<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        table.jambo_table tbody tr td div.plus { background-color: #F54134; padding: 0.3em; color: #FFF; }
        table.jambo_table tbody tr td div.minus { background-color: #0221d0; padding: 0.3em; color: #FFF; }
        
        .summary ul { margin: 0; padding: 0.3em; font-weight: bold; border: solid 1px; color: #000; }
        .summary ul li { display: inline-block; list-style: none; margin: 0; padding: 0.5em; }
        .summary ul li.plus { background-color: #F54134; color: #FFF; }
        .summary ul li.minus { background-color: #0221d0; color: #FFF; }

        .footer-action .float-right { line-height: 3; margin-right: 1em; }
    </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">
            <input type="text" name="keyword" class="form-control keyword" placeholder="關鍵字：姓名、帳號、Email" v-model="query.keyword"
                   @change="query.keyword=$event.target.value" @keypress="keychange($event);" />

            <select name="ddlstatus" class="form-control btn btn-default status" v-model="query.status" @change="goPage(1);">
                <option value="-1">= 狀態 =</option>
                <option value="1">正常</option>
                <option value="0">鎖定</option>
            </select>

            <label>
                <input type="checkbox" name="unclosedonly"
                       :checked="query.unClosedOnly == 1"
                       @click="$event.target.checked ? query.unClosedOnly = 1 : query.unClosedOnly = -1; goPage(1);" />僅列尚未結案
            </label>

            <div class="group-btn">
                <button class="btn btn-success" @click="goPage(1);">搜尋</button>&nbsp;
                <button class="btn btn-primary" @click="clearCriteria();">清除條件</button>
                <input type="hidden" name="currentPage" v-model="pager.currentPage" />
            </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">
        <thead>
            <tr>
                <td>類型</td>
                <td>帳號</td>
                <td>姓名</td>
                <td class="text-center">租賃記錄</td>
                <td class="text-right">應收</td>
                <td></td>
                <td class="text-right">已收</td>
                <td></td>
                <td class="text-center">未收</td>
                <td></td>
                <td class="text-right">應退</td>
                <td></td>
                <td class="text-right">已退</td>
                <td></td>
                <td class="text-center">待退</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in list">
                <td class="small"><label class="label-status" :class="'om-source' + item.type">{{item.typeString}}</label></td>
                <td>{{item.username}}</td>
                <td>{{item.name}}</td>
                <td class="text-center">
                    <a :href="'userorders?uid=' + item.id" class="btn btn-info btn-sm item-count"><i class="fas fa-search"></i></a>
                </td>
                <td class="text-right">{{item.summary.receivableAmt.toLocaleString()}}</td>
                <td class="text-center"><i class="fas fa-minus"></i></td>
                <td class="text-right">{{item.summary.receivedAmt.toLocaleString()}}</td>
                <td class="text-center"><i class="fas fa-equals"></i></td>
                <td class="text-right"><div class="nobr" :class="{'plus': item.summary.unreceivedAmt > 0, 'minus': item.summary.unreceivedAmt < 0}">{{item.summary.unreceivedAmt.toLocaleString()}}</div></td>
                <td></td>
                <td class="text-right">{{item.summary.refundableAmt.toLocaleString()}}</td>
                <td class="text-center"><i class="fas fa-minus"></i></td>
                <td class="text-right">{{item.summary.refundedAmt.toLocaleString()}}</td>
                <td class="text-center"><i class="fas fa-equals"></i></td>
                <td class="text-right"><div class="nobr" :class="{'minus': item.summary.pendingRefundAmt > 0, 'plus': item.summary.pendingRefundAmt < 0}">{{item.summary.pendingRefundAmt.toLocaleString()}}</div></td>
            </tr>
            <tr v-show="list == null || list.length == 0">
                <td colspan="15" 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 class="footer-action">
        <div class="summary float-left">
            <ul>
                <li>合計：</li>
                <li>應收 {{summary.receivableAmt.toLocaleString()}}</li>
                <li><i class="fas fa-minus"></i></li>
                <li>已收 {{summary.receivedAmt.toLocaleString()}}</li>
                <li><i class="fas fa-equals"></i></li>
                <li :class="{'plus': summary.unreceivedAmt > 0, 'minus': summary.unreceivedAmt < 0}">未收 {{summary.unreceivedAmt.toLocaleString()}}</li>
                <li></li>
                <li>應退 {{summary.refundableAmt.toLocaleString()}}</li>
                <li><i class="fas fa-minus"></i></li>
                <li>已退 {{summary.refundedAmt.toLocaleString()}}</li>
                <li><i class="fas fa-equals"></i></li>
                <li :class="{'minus': summary.pendingRefundAmt > 0, 'plus': summary.pendingRefundAmt < 0}">待退 {{summary.pendingRefundAmt.toLocaleString()}}</li>
            </ul>
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="userlist.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>