<!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 { cursor: pointer; }
        .jambo_table ul li:first-child { cursor: auto; }
        .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; }
        
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="" role="tabpanel" data-example-id="togglable-tabs">
        <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
            <li><a :href="'edit?id=' + store.id">基本資料</a></li>
            <li><a :href="'userlist?sid=' + store.id">門市帳號</a></li>
            <li><a :href="'pricelist?sid=' + store.id">價格</a></li>
            <li><a :href="'freightlist?sid=' + store.id">運費</a></li>
            <li class="active"><a :href="'orderlist?sid=' + store.id">租賃記錄</a></li>
            <li><a :href="'stocklist?sid=' + store.id">輔具動態</a></li>
            <li><a href="list">回列表</a></li>
        </ul>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12"></div>
    <div class="col-md-4 col-sm-4 col-xs-12">
        <ul class="info">
            <li>
                <span class="title">通路</span>
                <span>{{store.marketName}}</span>
            </li>
            <li>
                <span class="title">門市</span>
                <span>{{store.name}} ({{store.shortName}})</span>
                <a :href="'@printqrcode?id=' + store.id" class="iframe alignright"><i class="fas fa-qrcode fa-lg"></i></a>
            </li>
            <li>
                <span class="title">佳醫代收</span>
                <label class="label label-info" v-if="store.isCodConsumableFee == 1">耗材費</label>
                <label class="label label-default" v-if="store.isCodFreight == 1">運費</label>
                <span v-if="store.isCodConsumableFee == 0 && store.isCodFreight == 0">--</span>
            </li>
        </ul>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12"></div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_content top_search">
            搜尋:
            <input type="text" class="form-control keyword" v-model="query.keyword" placeholder="訂單編號、姓名、電話、地址(輸入關鍵字查詢)"
                   @change="query.keyword=$event.target.value" @keypress="keychange($event);" />

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

            <div class="group-btn">
                <button class="btn btn-success" @click="getList();">搜尋</button>&nbsp;
                <button class="btn btn-primary" @click="clearCriteria();">清除條件</button>
            </div>
            <div class="jambo_table float-right">
                <ul>
                    <li>示意：</li>
                    <li class="bg-running" @click="filterStatus = 700">使用中</li>
                    <li class="bg-expired" @click="filterStatus = 701">已逾期</li>
                    <li class="bg-pendingclose" @click="filterStatus = 800">待結案</li>
                    <li class="bg-closed" @click="filterStatus = 9999">已結案</li>
                </ul>
            </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" :class="{'bg-closed': item.enStatus == 9999, 'bg-pendingclose': item.enStatus == 800}" v-show="item.show">
                <td><a :href="viewUrl(item)" class="label-status" :class="'om-rentedfor' + item.enRentedFor">{{item.rentedForString}}</a></td>
                <td class="nobr small"><a :href="viewUrl(item)">{{item.createDate}}</a></td>
                <td>
                    <a :href="viewUrl(item)">{{item.orderNum}}</a>
                    <a :href="viewUrl(item)" target="_blank" class="btn btn-info btn-sm"><i class="fas fa-search"></i></a>
                    <div v-show="item.renewOrderCount > 0">
                        <label class="label label-default">續租訂單： {{item.renewOrderCount}}</label>
                    </div>
                </td>
                <td class="nobr text-center" :class="orderCss(item)"><a :href="viewUrl(item)">{{item.statusString}}</a></td>
                <td>
                    <a :href="viewUrl(item)">
                        <ul>
                            <li v-for="detail in item.details.list" data-toggle="tooltip" data-placement="bottom" :title="detail.productCode"
                                :class="detailStatusCss(detail)">
                                <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.startDateShort}} ~ {{detail.endDateShort}} </div>
                            </li>
                        </ul>
                    </a>
                </td>
                <td>
                    <div v-for="stock in item.ltStocks" class="nobr"><a :href="'/product/_stocklog?id=' + stock.id + '&mid=' + stock.productId" target="_blank" class="iframe">{{stock.propertyNo}}</a></div>
                </td>
                <td class="text-center small"><div v-show="item.enRentedFor == 100">{{item.tenantName}}<div> / </div>{{item.delivery.receiver}}</div></td>
                <td><div v-show="item.enRentedFor == 100">{{item.tenantMobile}}</div></td>
                <td class="text-center"><a :href="viewUrl(item)">{{item.shippingMethodString}}</a></td>
                <td class="text-center small"><a :href="viewUrl(item)">{{item.details.total.toLocaleString()}}</a></td>
                <td class="text-center small"><a :href="viewUrl(item)">{{item.others.total.toLocaleString()}}</a></td>
                <td class="text-center small"><a :href="viewUrl(item)">{{item.codFee.toLocaleString()}}</a></td>
                <td>
                    <div v-show="item.enShippingMethod == 200">
                        <div class="small">{{item.county}}{{item.city}}</div>
                        {{item.address}}
                    </div>
                </td>
            </tr>
            <tr v-show="list == null || list.length == 0">
                <td colspan="10" class="text-center">No Data.</td>
            </tr>
        </tbody>
    </table>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="orderlist.js?tf=202509041001" type="module"></script>
    <!--FinalScript E-->
</body>
</html>