<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        img.icon { width: auto; height: 20px; vertical-align: middle; }
        img.pickupman { width: auto; height: 20px; vertical-align: middle; }
        img.pickuptruck { width: 25px; height: auto; vertical-align: middle; }

        ul.icon { margin: 0; padding: 0; }
        ul.icon li { margin: 0.8em 0; padding: 0 0.5em; list-style: none; display: inline-block; }
        .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; }
        .jambo_table .mx-datepicker { width: 120px; }
        tr.bg-pink td { background-color: #fff7f6 !important; color: #333 }
        tr.bg-pink td.red { color: #E74C3C; }
        tr.bg-pink td.blue { color: #0094FF; }
        tr.nofity td { background-color: #fffa00 !important; }

        .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; }
        td a span { line-height: unset; }
        .swal2-popup #swal2-content ul { width: 50%; margin: 0 auto; padding: 0; }
        .swal2-popup #swal2-content ul li { width: 100%; list-style: none; }
        .swal2-popup #swal2-content ul li label { width: 5em; text-align: left; }
        .swal2-popup #swal2-content ul li price { width: 5em; text-align: right; display: inline-block; }
        .swal2-popup #swal2-content ul li:last-child { border-top: solid 1px; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="x_panel">
        <div class="x_title">
            <h2>搜尋</h2>
            <a href="/oem/order/_orderList?rid=-1" class="btn btn-success iframeNoClose">建立代工回收單</a>
            <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 ltRecycleType">
                    <input type="checkbox" name="cbrecycleTypes" :value="item.value"
                           @change="changeStatus('recycleTypes', item.value, $event.target.checked)"
                           :checked="checkedList('recycleTypes', 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.oemMarketId" />
                    <input type="text" name="marketName" v-model="query.oemMarketName" />
                </div>
            </div>
            <input type="text" class="form-control ordernum" v-model="query.propertyNo" name="propertyno" placeholder="產編" @keypress="keychange($event);" />
            <input type="text" class="form-control ordernum" v-model="query.recycleNum" name="recyclenum" placeholder="回收單號" @keypress="keychange($event);" />
            <input type="text" class="form-control ordernum" v-model="query.orderNum" name="ordernum" placeholder="訂單編號" @keypress="keychange($event);" />

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

            <nobr>
                退租申請日:
                <date-picker value-type="YYYY-MM-DD"
                             format="YYYY-MM-DD"
                             :default-value="new Date()"
                             type="date"
                             input-class="form-control"
                             @change="changeDate('start')"
                             :input-attr="{name: 'startDate'}"
                             v-model="query.startDate">
                </date-picker>
                ~
                <date-picker value-type="YYYY-MM-DD"
                             format="YYYY-MM-DD"
                             :default-value="new Date()"
                             type="date"
                             input-class="form-control"
                             :input-attr="{name: 'endDate'}"
                             v-model="query.endDate">
                </date-picker>
            </nobr>

            <nobr>
                預計回收日:
                <date-picker value-type="YYYY-MM-DD"
                             format="YYYY-MM-DD"
                             :default-value="new Date()"
                             type="date"
                             input-class="form-control"
                             @change="changeDate('scheduleStart')"
                             :input-attr="{name: 'scheduleStartDate'}"
                             v-model="query.scheduleStartDate">
                </date-picker>
                ~
                <date-picker value-type="YYYY-MM-DD"
                             format="YYYY-MM-DD"
                             :default-value="new Date()"
                             type="date"
                             input-class="form-control"
                             :input-attr="{name: 'scheduleEndDate'}"
                             v-model="query.scheduleEndDate">
                </date-picker>
            </nobr>

            <select class="form-control btn btn-default status" name="recyclestatus" v-model="query.recycleStatus" @change="getList(1);">
                <option value="-1">= 回收單狀態 =</option>
                <option v-for="item in ltRecycleStatus" :value="item.value">{{item.name}}</option>
            </select>

            <label>
                <input type="checkbox"
                       :checked="query.isEmptyReceiptsOnly == 1"
                       @click="$event.target.checked ? query.isEmptyReceiptsOnly = 1 : query.isEmptyReceiptsOnly = -1; goPage(1);" />僅列未上傳簽收單
                <label v-if="emptyReceiptsCount > 0" class="label label-success">{{emptyReceiptsCount}}</label>
            </label>

            <label>
                <input type="checkbox"
                       :checked="query.isUnRefundOnly == 1"
                       @click="$event.target.checked ? query.isUnRefundOnly = 1 : query.isUnRefundOnly = -1; goPage(1);" />僅列未退還押金
                <label v-if="unRefundCount > 0" class="label label-primary">{{unRefundCount}}</label>
            </label>

            <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 ltShippingMethod" v-show="item.value < 300">
                    <input type="checkbox" name="cbshippingMethod" :value="item.value"
                           @change="changeStatus('shippingMethod', item.value, $event.target.checked)"
                           :checked="checkedList('shippingMethod', 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-8 col-sm-12 col-xs-12">
        <ul class="icon">
            <li><i class="fas fa-users-cog"></i> 代工清消收送</li>
            <li><i class="fas fa-people-carry"></i> 到店自取及歸還</li>
            <li><i class="fas fa-truck"></i> 到府收送</li>
        </ul>
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12">
        <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>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-striped jambo_table">
        <thead>
            <tr>
                <td></td>
                <td>回收狀態</td>
                <td>回收單號</td>
                <td></td>
                <td>退租申請日</td>
                <td class="text-center">預計回收日</td>
                <td>訂單編號/來源</td>
                <td class="width150">承租人/目的/代工通路</td>
                <td class="width150">手機</td>
                <td><label><input type="checkbox" :checked="checkAll" @click="SelectAll($event.target.checked)" />全選</label></td>
                <td>租賃品項(租用起始日)</td>
                <td class="text-center">應退押金</td>
                <td class="text-center">其它費用</td>
                <td class="text-center">總計</td>
                <td class="text-center">運送方式</td>
                <td>使用人/手機</td>
                <td>地址</td>
                <td></td>
                <td class="text-center">回收品管日</td>
                <td class="text-center">簽收</td>
                <td class="text-center">退押金</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in list" :class="trCss(item)">
                <td class="text-center">
                    <i class="fas fa-users-cog" v-if="item.enRecycleType == 200" data-toggle="tooltip" data-placement="top" title="代工清消收送"></i>
                </td>
                <td data-col="回收狀態" class="nobr">
                    <div v-if="item.enStatus == 200" class="small">{{item.cancelApplyDatetime}}</div>
                    <div v-if="item.enStatus == 400" class="small">{{item.cancelConfirmDatetime}}</div>
                    <div>{{item.statusString}}</div>
                    <div v-if="item.enRecycleType == 100">
                        <a v-if="item.enStatus < 200" @click="transToCancelRecycle(item);" class="btn btn-warning btn-sm">取消回收</a>
                    </div>
                    <div v-else-if="item.enRecycleType == 200">
                        <a v-if="item.enStatus < 200 && item.scheduleDate != null" @click="transToCancelApply(item);" class="btn btn-warning btn-sm">申請取消回收</a>
                        <a v-if="item.enStatus == 200 && item.cancelApplyMarketId != memberObj.marketId" @click="transToCancelConfirm(item);" class="btn btn-danger btn-sm">確認取消回收</a>
                    </div>
                </td>
                <td data-col="回收單號" class="small">
                    <div v-if="item.enRecycleType == 100">
                        <div>{{item.recycleNum}}</div>
                        <div v-for="obj in item.orderDetails">
                            <div v-for="s in obj.stocks" class="nobr">{{s.propertyNo}}</div>
                        </div>
                        <div v-if="item.total != 0">
                            <a v-if="item.isRefund == 0" class="btn btn-primary" @click="refund(item);">
                                <span v-if="item.total > 0">應收</span><span v-else>應退</span>已結清
                            </a>
                        </div>
                    </div>
                    <div v-else-if="item.enRecycleType == 200">
                        <div><a @click="gotoEditUrl(item)">{{item.recycleNum}}</a></div>
                        <div v-for="obj in item.oemDetails">
                            <div v-for="s in obj.stocks" class="nobr">{{s.propertyNo}}</div>
                        </div>
                    </div>
                    <a v-if="(item.enStatus == 100 || item.enStatus == 300) && item.receipts == null" class="btn btn-success hlkUploadMulti" @click="triggerUpload('#fuImg', item)">上傳簽收單</a>
                </td>
                <td data-col="link icon">
                    <a v-if="item.enRecycleType == 100"
                       :href="'/order/orderlist?onum=' + item.originalOrderNum" class="btn btn-info btn-sm">
                        <i class="fas fa-search"></i>
                    </a>
                    <a v-else-if="item.enRecycleType == 200"
                       :class="[item.enStatus == 100 && item.scheduleDate == null ? 'btn-success': 'btn-info']"
                       :href="'/oem/order/recycleEdit?id=' + item.id + '&s=100'" class="btn btn-sm">
                        <i v-if="item.enStatus == 100 && item.scheduleDate == null" class="fas fa-edit"></i>
                        <i v-else class="fas fa-search"></i>
                    </a>
                </td>
                <td data-col="退租申請日" class="nobr">{{item.applyDate}}</td>
                <td data-col="預計回收日" class="nobr">
                    <div v-show="item.enStatus == 100">
                        <date-picker value-type="YYYY-MM-DD"
                                     format="YYYY-MM-DD"
                                     :default-value="new Date()"
                                     type="date"
                                     input-class="form-control"
                                     :input-attr="{name: 'scheduleDate' + item.id}"
                                     v-model="item.scheduleDate">
                        </date-picker>
                    </div>
                    <div v-show="item.enStatus != 100">{{item.scheduleDate}}</div>
                </td>
                <td data-col="訂單編號/來源">
                    <div v-if="item.enRecycleType == 100">
                        <div class="small">
                            <a :href="'/order/orderlist?onum=' + item.originalOrderNum">{{item.orderNum}}</a>
                        </div>
                        <span class="label-status" :class="'om-source' + item.enSource">{{item.sourceString}}</span>
                    </div>
                    <div v-else>{{item.oemMarketName.substring(0, 4)}}</div>
                </td>
                <td data-col="姓名/目的">
                    <div v-if="item.enRecycleType == 100">
                        <div v-if="item.enRentedFor == 100">{{item.tenantName}}</div>
                        <div v-else>{{item.ownerStoreName}}</div>
                        <span class="label-status" :class="'om-rentedfor' + item.enRentedFor">{{item.rentedForString}}</span>
                    </div>
                    <div v-else>{{item.tenantName}}</div>
                </td>
                <td data-col="手機">{{item.tenantMobile}}</td>
                <td class="text-center">
                    <input type="checkbox"
                           :checked="isExistsCheckList(item.id)"
                           @click="changeCKD(item, $event.target.checked)"
                           :tabindex="(index + 1)" />
                </td>
                <td data-col="租賃品項(租用起始日)" class="text-center">
                    <ul>
                        <li v-for="obj in item.orderDetails" v-show="obj.parentProductId == -1">
                            <div class="prod-img" data-toggle="tooltip" data-placement="bottom" :title="obj.productCode">
                                <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>
                            <div>{{obj.startDateShort}}~{{obj.endDateShort}}</div>
                            <div v-if="obj.seatWidthAttrId != null && obj.seatWidthAttrId > 0">{{obj.seatWidthAttrName}}</div>
                        </li>
                        <li v-for="obj in item.oemDetails">
                            <div class="prod-img" data-toggle="tooltip" data-placement="bottom" :title="obj.productCode">
                                <img class="img" :src="obj.coverImage" v-if="obj.coverImage != null && obj.coverImage.length > 0" />
                                <img class="img" src="/assets/img/defaultImg.png" v-else />
                                <div v-show="obj.qty > 1" class="prod-qty">{{obj.qty}}</div>
                            </div>
                            <div v-if="obj.seatWidthAttrId != null && obj.seatWidthAttrId > 0">{{obj.seatWidthAttrName}}</div>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                </td>
                <td data-col="應退押金" class="text-center">
                    <div v-if="item.enRecycleType == 100">
                        <div v-if="item.enSource != 200">
                            <span v-if="item.deposit > 0">-</span>{{item.deposit.toLocaleString()}}
                        </div>
                        <div v-else class="text-center">--</div>
                    </div>
                    <div v-else>--</div>
                </td>
                <td data-col="其它費用" class="text-center">
                    <div v-if="item.enRecycleType == 100">
                        <div v-if="item.otherFee != 0">
                            <span v-if="item.otherFee > 0">+</span>{{item.otherFee.toLocaleString()}}
                        </div>
                        <div v-else class="text-center">--</div>
                    </div>
                    <div v-else>--</div>
                </td>
                <td data-col="總計" class="text-center nobr" :class="{'red': item.total > 0, 'blue': item.total < 0}">
                    <div v-if="item.enRecycleType == 100">
                        <div v-if="item.total != 0">
                            <b><span v-if="item.total > 0">+</span>{{item.total.toLocaleString()}}</b>
                        </div>
                        <div v-else class="text-center">--</div>
                    </div>
                    <div v-else>--</div>
                </td>
                <td data-col="運送方式" class="text-center">
                    <i v-if="item.enShippingMethod == 100" class="fas fa-store-alt" data-toggle="tooltip" data-placement="right" :title="item.shippingMethodString"></i>
                    <i v-else-if="item.enShippingMethod == 200" class="fas fa-truck" data-toggle="tooltip" data-placement="right" :title="item.shippingMethodString"></i>
                    <i v-else-if="item.enShippingMethod == 250" class="fas fa-warehouse" data-toggle="tooltip" data-placement="right" :title="item.shippingMethodString"></i>
                    <div v-else>{{item.shippingMethodString}}</div>
                </td>
                <td class="nobr small">
                    <div>{{item.receiver}}</div><div>{{item.mobile}}</div>
                </td>
                <td data-col="地址" class="nobr">
                    <div v-if="item.enRecycleType == 100">
                        <div v-if="item.enShippingMethod == 100" class="nobr"><i class="fas fa-caret-square-right"></i> {{item.returnStoreName}}</div>
                    </div>
                    <div class="small">{{item.county}}{{item.city}}</div>{{item.address}}
                    <div v-if="item.enShippingMethod == 250">{{item.shippingMethodString}}</div>
                </td>
                <td data-col="print">
                    <a class="btn btn-info iframe" :href="'@recycleDetail?id=' + item.id"><i class="fas fa-print"></i> 回收單</a>
                </td>
                <td data-col="回收品管日" class="nobr text-center">
                    <div v-if="item.enStatus == 100">--</div>
                    <div v-else>{{item.qcDate}}</div>
                </td>
                <td data-col="簽收" class="nobr">
                    <a v-if="item.receipts != null" class="btn btn-info iframe" :href="item.receipts">簽收單</a>
                    <div v-if="item.receivedDate != null" class="nobr small">{{item.receivedDate}}</div>
                </td>
                <td data-col="退押金" class="nobr text-center">
                    <div v-if="item.enSource != 200">
                        <div v-if="item.isRefund == 1">{{item.refundDate}}</div>
                        <div v-else class="text-center">--</div>
                    </div>
                    <div v-else class="text-center">--</div>
                </td>
            </tr>
            <tr v-show="list == null || list.length == 0">
                <td colspan="20" 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">
        <h4>操作：</h4>
        <a class="btn btn-success btn-lg" @click="saveScheduleDate()">儲存預計回收日</a>
        <a class="btn btn-success btn-lg" @click="exportData()"><i class="fas fa-file-excel"></i> 匯出回收單</a>

        <div style="display: none;">
            <input type="file" id="fuImg" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuImg" @change="onFileChange" />
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="recyclelist.js?tf=202506251701" type="module"></script>
    <!--FinalScript E-->
</body>
</html>