<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        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; vertical-align: top; }
        .jambo_table ul li img { height: 50px; }
        .fa-hand-holding-usd { color: #ff6a00; }
        tr.bg-pink td { background-color: #fff7f6 !important; color: #333 }
        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; }

        ul.products { min-width: 150px; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="x_panel">
        <div class="x_title">
            <h2>搜尋</h2>
            <a href="orderEdit?id=-1&s=200" class="btn btn-success">建立出貨單</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="autocomplete">
                <input type="search" id="query-market" class="form-control" placeholder="= 代工通路 =" />
                <div style="display: none">
                    <input type="text" v-model="query.oemMarketId" />
                    <input type="text" v-model="query.oemMarketName" />
                </div>
            </div>

            <input type="text" class="form-control ordernum" v-model="query.propertyNo" placeholder="產編" @keypress="keychange($event);" />
            <input type="text" class="form-control ordernum" v-model="query.packingNum" placeholder="出貨單號" @keypress="keychange($event);" />

            <input type="text" class="form-control keyword" v-model="query.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('shippingStart')"
                             :input-attr="{name: 'shippingStartDate'}"
                             v-model="query.shippingStartDate">
                </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: 'shippingEndDate'}"
                             v-model="query.shippingEndDate">
                </date-picker>
            </nobr>

            <select class="form-control btn btn-default status" v-model="query.packingStatuss" @change="getList(1);">
                <option value="-1">= 出貨單狀態 =</option>
                <option v-for="item in ltPackingStatus" :value="item.value">{{item.name}}</option>
            </select>
            <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-7 col-sm-12 col-xs-12">
        <ul class="icon">
            <li><i class="fas fa-clipboard-check"></i> 已簽收</li>
        </ul>
    </div>
    <div class="col-md-5 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 v-show="memberObj.marketId <= 0">代工通路</td>
                <td class="width150">姓名/手機</td>
                <td>品項</td>
                <td class="text-center">運費</td>
                <td>地址</td>
                <td></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 title="icon" class="text-center">
                    <i v-if="item.receivedDate != null" class="fas fa-clipboard-check" data-toggle="tooltip" data-placement="bottom" :title="item.receivedDate + '已簽收'"></i>
                </td>
                <td title="出貨狀態" class="nobr">
                    <div v-if="item.enStatus == 300" class="small">{{item.cancelApplyDatetime}}</div>
                    <div v-if="item.enStatus == 500" class="small">{{item.cancelConfirmDatetime}}</div>
                    <div>{{item.statusString}}</div>
                    <a v-if="item.enStatus == 200" @click="transToCancelApply(item);" class="btn btn-warning btn-sm">申請取消出貨</a>
                    <a v-if="item.enStatus == 300 && item.cancelApplyMarketId != memberObj.marketId" @click="transToCancelConfirm(item);" class="btn btn-danger btn-sm">確認取消出貨</a>
                </td>
                <td title="出貨單號" class="small">
                    <div><a @click="gotoEditUrl(item)">{{item.packingNum}}</a></div>
                    <div v-for="obj in item.oemDetails">
                        <!--<div v-for="s in obj.stocks" class="nobr">{{s.propertyNo}}</div>-->
                        <div v-for="s in obj.stocks" class="nobr"><a :href="'/oem/product/_stocklog?id=' + s.stockId + '&mid=' + obj.productId" target="_blank" class="iframe">{{s.propertyNo}}</a></div>
                    </div>
                </td>
                <td title="Edit Button">
                    <a class="btn btn-sm"
                       :class="[item.enStatus == 100 || (item.enStatus == 200 && memberObj.marketId < 0)? 'btn-success': 'btn-info']"
                       @click="gotoEditUrl(item)">
                        <i v-if="item.enStatus == 100 || (item.enStatus == 200 && memberObj.marketId < 0)" class="fas fa-edit"></i>
                        <i v-else class="fas fa-search"></i>
                    </a>
                </td>
                <td title="預計出貨日" class="nobr small">{{item.scheduleDate}}</td>
                <td title="代工通路" v-show="memberObj.marketId <= 0">{{item.oemMarketName.substring(0, 4)}}</td>
                <td title="姓名/手機">
                    <div>{{item.receiver}}</div>
                    <div>{{item.mobile}}</div>
                </td>
                <td title="品項" class="text-center">
                    <ul class="products">
                        <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 title="運費" class="text-center">{{item.freightage}}</td>
                <td title="地址" class="nobr"><div class="small">{{item.county}}{{item.city}}</div>{{item.address}}</td>
                <td title="Print Button" class="nobr">
                    <div v-if="item.enStatus > 100">
                        <a class="btn btn-info iframe" :href="'/order/@packingDetail?id=' + item.id"><i class="fas fa-print"></i> 出貨單</a>
                    </div>
                </td>
                <td title="品管日/出貨日" class="nobr text-center">
                    <div v-if="item.enStatus == 100">--</div>
                    <div v-else>{{item.qcDate}}</div>
                    <div v-if="item.enStatus > 200">{{item.shippingDate}}</div>
                    <div v-else>--</div>
                </td>
                <td title="簽收" class="nobr">
                    <div v-if="item.enStatus > 100">
                        <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>
                    </div>
                </td>
            </tr>
            <tr v-show="list == null || list.length == 0">
                <td colspan="13" 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>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="shiplist.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>