<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        .jambo_table ul { margin: 0; padding: 0; }
        .jambo_table ul li { margin: 0 0.1em; padding: 0.5em; float: left; 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; }

        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="col-md-4 col-sm-4 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">直客帳號</span>
                <span>{{user.username}}</span>
            </li>
            <li>
                <span class="title">姓名</span>
                <span>{{user.name}}</span>
            </li>
        </ul>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12">
        <div class="x_content top_search">
            搜尋:
            <input type="text" name="keyword" class="form-control keyword" v-model="query.keyword" placeholder="訂單編號、姓名、電話、地址(輸入關鍵字查詢)"
                   @change="query.keyword=$event.target.value" @keypress="keychange($event);" />

            <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 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 class="col-md-12 col-sm-12 col-xs-12"></div>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-striped jambo_table">
        <thead>
            <tr>
                <td>訂單編號</td>
                <td></td>
                <td>承租人</td>
                <td>租賃品項</td>
                <td class="text-center">運送方式</td>
                <td>使用人</td>
                <td></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>
                    <div class="nobr small">
                        {{item.orderNum}}
                        <a :href="'userbill?uid=' + item.userId + '&onum=' + item.orderNum" class="btn btn-info btn-sm"><i class="fas fa-search"></i></a>
                    </div>
                    <div v-show="item.renewOrderCount > 0">
                        <label class="label label-default">續租訂單： {{item.renewOrderCount}}</label>
                    </div>
                </td>
                <td class="nobr">{{item.statusString}}</td>
                <td class="nobr">{{item.tenantName}}<br />{{item.tenantMobile}}</td>
                <td>
                    <ul>
                        <li v-for="detail in item.details" data-toggle="tooltip" data-placement="bottom" :title="detail.productCode">
                            <div class="prod-img">
                                <img class="img" :src="detail.coverImage" />
                                <div v-show="detail.qty > 1" class="prod-qty">{{detail.qty}}</div>
                            </div>
                            <div>{{detail.startDate}} ~ {{detail.endDate}} </div>
                        </li>
                    </ul>
                </td>
                <td class="text-center">{{item.shippingMethodString}}</td>
                <td class="nobr small">{{item.deliveryReceiver}}<br />{{item.deliveryMobile}}</td>
                <td class="nobr"><div v-show="item.enShippingMethod == 200"><div class="small">{{item.deliveryCounty}}{{item.deliveryCity}}</div>{{item.deliveryAddress}}</div></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="18" 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 class="float-right">
            <a class="btn btn-info" href="userlist">返回直客列表</a>
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="userorders.js?tf=202506251701" type="module"></script>
    <!--FinalScript E-->
</body>
</html>