<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        .label { font-size: unset; }
        .notify { background-color: #FFD800 !important; color: #FF0000 !important; display: inline-block; padding: 0.3em 0.5em; }
        input.deliveryreceiver{ width: 80%; display: inline-block; }

        .table ul { padding: 0; margin: 0; }
        .table ul li { list-style: none; margin-bottom: 0.5em; display: inline-block; width: 30%; }
        .table ul li:last-child { margin-bottom: 0; }
        .table ul li.address { display: block; width: 100%; }
        .stockitems .btn-default { text-align: left; cursor: unset; font-size: 15px; line-height: 2; }
        .stockitems .btn-danger { margin: 0 0 0 10px; }
        input[type=number] { min-width: 5em; }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="col-md-12 col-sm-12 col-xs-12 x_panel">
        <div class="x_title">
            <h2>購買資訊</h2>
            <h2 v-if="packingObj.id > 0">[{{packingObj.packingNum}}]</h2>
            <label class="label" v-if="packingObj.id > 0" :class="{'label-info': packingObj.enStatus < 300, 'label-default': packingObj.enStatus == 400 }">{{packingObj.statusString}}</label>
            <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="col-md-12 col-sm-12 col-xs-12 x_content">
            <table border="0" cellpadding="5" cellspacing="1" class="table table-bordered">
                <tr>
                    <th colspan="4">收件資訊</th>
                </tr>
                <tr>
                    <th class="required">出貨日</th>
                    <td>
                        <date-picker value-type="YYYY-MM-DD"
                                     format="YYYY-MM-DD"
                                     :default-value="new Date()"
                                     type="date"
                                     input-class="form-control"
                                     :input-attr="{id: 'shippingDate'}"
                                     v-model="modifyObj.shippingDate">
                        </date-picker>
                    </td>
                </tr>
                <tr>
                    <th class="required">
                        收件人姓名
                        <a v-show="modifyObj.id <= 0 || (modifyObj.id > 0 && packingObj.enStatus == 100)"
                           class="btn btn-info btn-sm iframe"
                           :href="'_orderAddress?oid=' + modifyObj.id"
                           @click="openAddressList()">選擇</a>
                    </th>
                    <td><input type="text" class="form-control deliveryreceiver" v-model="modifyObj.delivery.receiver" maxlength="128" ref="deliveryreceiver" /></td>
                </tr>
                <tr>
                    <th class="required">收件人電話</th>
                    <td><input type="tel" class="form-control" v-model="modifyObj.delivery.mobile" maxlength="20" ref="deliverymobile" /></td>
                </tr>
                <tr>
                    <th class="required">收件人地址</th>
                    <td id="twzipcode" class="twzipcode">
                        <select class="form-control" data-role="county" v-model="modifyObj.delivery.county"></select>
                        <select class="form-control" data-role="district" v-model="modifyObj.delivery.city" @change="changeCity('delivery')"></select>
                        <input type="hidden" data-role="zipcode" />
                        <input type="text" class="form-control address" v-model="modifyObj.delivery.address" maxlength="128" placeholder="路/街/巷/弄/號/樓" ref="deliveryaddress" />
                    </td>
                </tr>
                <tr>
                    <th colspan="4">發票資訊</th>
                </tr>
                <tr>
                    <th>售價合計</th>
                    <td>$ {{modifyObj.totalPrice}}</td>
                </tr>
                <tr>
                    <th class="required">付款方式</th>
                    <td>
                        <div class="btn-group btn-toggle payMethod">
                            <div class="btn btn-default" v-for="item in ltPayMethod"
                                 :class="'payMethod' + item.value"
                                 v-if="item.value < 500"
                                 @click="toggleBTN('payMethod', item.value)">{{item.name}}</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th class="required">付款狀態</th>
                    <td>
                        <div class="btn-group btn-toggle paymentStatus">
                            <div class="btn btn-default" v-for="item in ltPaymentStatus"
                                 :class="'paymentStatus' + item.value"
                                 @click="toggleBTN('paymentStatus', item.value)">{{item.name}}</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th :class="{'required': modifyObj.enPaymentStatus == 300}">付款日期</th>
                    <td>
                        <date-picker value-type="YYYY-MM-DD"
                                     format="YYYY-MM-DD"
                                     :default-value="new Date()"
                                     type="date"
                                     input-class="form-control"
                                     :input-attr="{id: 'paymentDatetime'}"
                                     v-model="modifyObj.paymentDatetime">
                        </date-picker>
                    </td>
                </tr>
                <tr>
                    <th class="required">發票格式</th>
                    <td>
                        <div class="btn-group btn-toggle invoiceType">
                            <div class="btn btn-default" v-for="item in ltInvoiceTypes"
                                 :class="'invoiceType' + item.value"
                                 @click="toggleBTN('invoiceType', item.value)">{{item.name}}</div>
                        </div>
                    </td>
                </tr>
                <tr v-if="modifyObj.invoice.enInvoiceType == 200">
                    <th class="required">買受人</th>
                    <td>
                        <ul>
                            <li>
                                <input type="text" class="form-control" v-model="modifyObj.invoice.invoiceTaxNo" ref="invoiceTaxNo" placeholder="統一編號" maxlength="8" />
                            </li>
                            <li>
                                <input type="text" class="form-control" v-model="modifyObj.invoice.invoiceTitle" ref="invoiceTitle" placeholder="公司名稱" />
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <th class="required">索取方式</th>
                    <td>
                        <div class="btn-group btn-toggle billType">
                            <div class="btn btn-default" v-for="item in ltBillTypes"
                                 :class="'billType' + item.value"
                                 v-show="modifyObj.invoice.enInvoiceType == -1 || modifyObj.invoice.enInvoiceType == 100 || (modifyObj.invoice.enInvoiceType == 200 && item.value ==100)"
                                 @click="toggleBTN('billType', item.value)">{{item.name}}</div>
                        </div>
                    </td>
                </tr>
                <tr v-show="modifyObj.invoice.enBillType > 0">
                    <th class="required">
                        <span v-if="modifyObj.invoice.enBillType == 100">發票寄送地址</span>
                        <span v-if="modifyObj.invoice.enBillType == 200">手機條碼載具</span>
                    </th>
                    <td>
                        <ul v-show="modifyObj.invoice.enBillType == 100">
                            <li>
                                <input type="text" class="form-control" v-model="modifyObj.invoice.receiver" ref="invoiceReceiver" placeholder="收件姓名" />
                            </li>
                            <li>
                                <input type="text" class="form-control" v-model="modifyObj.invoice.mobile" ref="invoiceMobile" placeholder="收件電話" />
                            </li>
                            <li class="address">
                                <div id="twzipcodeToBill" class="twzipcode">
                                    <select class="form-control" data-role="county" v-model="modifyObj.invoice.county"></select>
                                    <select class="form-control" data-role="district" v-model="modifyObj.invoice.city" @change="changeCity('invoice')"></select>
                                    <input type="hidden" data-role="zipcode" />
                                    <input type="text" class="form-control address" v-model="modifyObj.invoice.address" maxlength="128" placeholder="路/街/巷/弄/號/樓" ref="invoiveaddress" />
                                </div>
                            </li>
                        </ul>
                        <ul v-if="modifyObj.invoice.enBillType == 200">
                            <li>
                                <input type="text" class="form-control" v-model="modifyObj.invoice.mobileBarcode" ref="mobileBarcode" placeholder="例如 /ABC123D" maxlength="8" />
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <th>備註</th>
                    <td><textarea class="form-control" v-model="modifyObj.memo"></textarea></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12 x_panel">
        <div class="x_title">
            <h2>
                輔具品項&nbsp;&nbsp;&nbsp;&nbsp;
                <a v-if="packingObj.enStatus == 100"
                   :href="'_productlist?oid=' + modifyObj.id + '&id=-1'"
                   @click="showProductList()" class="btn btn-success iframeNoClose">加入輔具</a>
            </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="col-md-12 col-sm-12 col-xs-12 x_content">
            <table border="0" cellpadding="5" cellspacing="1" class="table jambo_table">
                <thead>
                    <tr>
                        <td class="text-center"></td>
                        <td></td>
                        <td>輔具</td>
                        <td>品名</td>
                        <td>座寬</td>
                        <td class="text-center">售價</td>
                        <td class="text-center">數量</td>
                        <td class="col-md-4">產編</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in modifyObj.details">
                        <td class="text-center">{{index + 1}}</td>
                        <td class="text-center">
                            <img class="img" :src="item.coverImage" v-if="item.coverImage != null && item.coverImage.length > 0" />
                            <img class="img" src="/assets/img/defaultImg.png" v-else />
                        </td>
                        <td>{{item.productCode}}</td>
                        <td>{{item.productName}}</td>
                        <td>{{item.seatWidthAttrName}}</td>
                        <td class="text-center"><input type="number" class="text-right" v-model="item.unitPrice" /></td>
                        <td class="text-center">{{item.qty}}</td>
                        <td class="stockitems">
                            <div v-for="(stock, idx) in item.stocks"
                                 class="btn btn-default">
                                {{stock.propertyNo}}
                                <a v-if="packingObj.enStatus == 100" @click="removeStock(stock.stockId);" class="btn btn-danger btn-sm float-right"><i class="fas fa-times fa-lg"></i></a>
                            </div>
                        </td>
                    </tr>
                    <tr v-show="modifyObj.details == null || modifyObj.details.length == 0">
                        <td colspan="8" class="text-center">No Data.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="footer-action">
        <h4>操作：</h4>
        <a class="btn btn-success btn-lg" @click="confirmQC()" v-if="modifyObj.id > 0 && packingObj.enStatus == 100">轉為出貨準備中</a>
        <a class="btn btn-warning btn-lg" @click="restoreQC()" v-if="modifyObj.id > 0 && packingObj.enStatus == 200">轉回待出貨</a>

        <a class="btn btn-success btn-lg" @click="createItem();" v-if="modifyObj.id <= 0">新增</a>
        <a class="btn btn-success btn-lg" @click="updateItem();" v-if="modifyObj.id > 0 && packingObj.enStatus == 100">修改</a>
        <a class="btn btn-primary btn-lg" @click="clearStorage();resetItem();" v-if="modifyObj.id <= 0 || packingObj.enStatus == 100">重填</a>
        <a class="btn btn-danger btn-lg" @click="deleteItem();" v-if="modifyObj.id > 0 && packingObj.enStatus == 100">刪除</a>
        <a class="btn btn-info btn-lg" @click="backToList()">回列表頁</a>
        <div class="notify" v-show="isNotify()">
            資料有異動，記得點擊“修改”做儲存。
        </div>
        <span class="dark" v-show="modifyObj.id > 0 && packingObj.enStatus == 200 && memberObj.marketId > 0">
            欲調整出貨單請聯繫佳醫人員。
        </span>


        <div v-show="modifyObj.id > 0" class="modifylog">
            <div>{{modifyObj.creatorName}} {{modifyObj.createDate}} 建檔</div>
            <div v-show="modifyObj.modifyDatetime != null">{{modifyObj.modifierName}} {{modifyObj.modifyDate}} 異動</div>
        </div>
    </div>
    <!--Content E-->
    <!--FinalScript S-->
    <script src="/assets/third-party/twzipcode.assistive.js"></script>
    <script src="/assets/third-party/twzipcode.latest.js"></script>
    <script src="orderEdit.js" type="module"></script>
    <!--FinalScript E-->
</body>
</html>