<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--Header S-->
    <style>
        .twzipcode .address {
            width: 56% !important;
            max-width: 50%;
        }
    </style>
    <!--Header E-->
</head>
<body>
    <!--Content S-->
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h3>
            訂單編號: {{orderObj.orderNum}}
            <span v-if="modifyObj.id > 0 && modifyObj.enVerified == 1" class="label label-default">已對帳</span>
        </h3>
    </div>
    <table border="0" cellpadding="5" cellspacing="1" class="table table-bordered">
        <tr>
            <th class="required">費用類型</th>
            <td>
                <div class="btn-group btn-toggle type">
                    <div class="btn btn-default" v-for="item in ltType"
                         :class="'type' + item.value"
                         @click="toggleBTN('type', item.value)">{{item.name}}</div>
                </div>
            </td>
        </tr>
        <tr>
            <th class="required">收費對象</th>
            <td>
                <div class="btn-group btn-toggle billing">
                    <div class="btn btn-default" v-for="item in ltBillingTarget"
                         :class="'billing' + item.value"
                         @click="toggleBTN('billing', item.value)">{{item.name}}</div>
                </div>
            </td>
        </tr>
        <tr>
            <th class="required">金額</th>
            <td>
                <input type="number" class="form-control" ref="fee" v-model="modifyObj.fee" />
            </td>
        </tr>
        <tr>
            <th class="required">說明</th>
            <td>
                <input type="text" class="form-control" ref="description" v-model="modifyObj.description" />
            </td>
        </tr>
        <tr v-show="modifyObj.enType == 100">
            <th class="required">運送</th>
            <td>
                <div class="btn-group btn-toggle shippingMethod">
                    <div class="btn btn-default" v-for="item in ltShippingMethods"
                         :class="'shippingMethod' + item.value"
                         v-show="showShippingMethod(item)"
                         @click="toggleBTN('shippingMethod', item.value)">{{item.name}}</div>
                </div>
            </td>
        </tr>
        <tr v-show="modifyObj.enType == 100 && modifyObj.enShippingMethod != 800">
            <th>
                <div v-if="orderObj.takeback.storeId > 0">原歸還門市</div>
                <div v-else>原回收地址</div>
            </th>
            <td>
                <div v-if="orderObj.takeback.storeId > 0">
                    <span v-for="item in ltStores" v-if="orderObj.takeback.storeId == item.id">
                        {{item.shortName}}<span v-if="item.zipCode != null && item.zipCode != ''">  ({{item.county}}{{item.city}}{{item.address}})</span>
                    </span>
                </div>
                <div v-else>{{orderObj.takeback.county}}{{orderObj.takeback.city}}{{orderObj.takeback.address}}</div>
            </td>
        </tr>
        <tr v-show="modifyObj.enType == 100 && modifyObj.enShippingMethod != 800">
            <th class="required">
                <span v-if="modifyObj.enShippingMethod == 400 || modifyObj.enShippingMethod == 700">歸還門市</span>
                <span v-else>回收地址</span>
            </th>
            <td class="top_search">
                <div v-show="modifyObj.enShippingMethod == 400 || modifyObj.enShippingMethod == 700">
                    <div class="autocomplete">
                        <input type="search" id="query-market" class="form-control" placeholder="= 通路 =" />
                        <div style="display: none">
                            <input type="text" name="marketId" v-model="modifyObj.delivery.marketId" />
                            <input type="text" name="marketName" v-model="modifyObj.delivery.marketName" />
                        </div>
                    </div>

                    <div class="autocomplete">
                        <input type="search" id="query-store" class="form-control" placeholder="= 門市 =" />
                        <div style="display: none">
                            <input type="text" name="storeId" v-model="modifyObj.delivery.storeId" />
                            <input type="text" name="storeName" v-model="modifyObj.delivery.storeName" />
                        </div>
                    </div>
                </div>
                <div v-show="modifyObj.enShippingMethod == 500 || modifyObj.enShippingMethod == 600">
                    <div class="twzipcode" id="twzipcode">
                        <select class="form-control" data-role="county" v-model="modifyObj.delivery.county" ref="county"></select>
                        <select class="form-control" data-role="district" v-model="modifyObj.delivery.city" @change="changeCity()"></select>
                        <input type="hidden" data-role="zipcode" />
                        <input type="text" class="form-control address" v-model="modifyObj.delivery.address" maxlength="128" placeholder="路/街/巷/弄/號/樓" ref="address" />
                    </div>
                </div>
            </td>
        </tr>
        <tr v-show="modifyObj.enType == 200">
            <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: 'repaireDate'}"
                             v-model="modifyObj.repaireDate">
                </date-picker>
            </td>
        </tr>
        <tr>
            <th class="required">付款狀態</th>
            <td colspan="3">
                <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>備註</th>
            <td>
                <textarea class="form-control" v-model="modifyObj.memo"></textarea>
            </td>
        </tr>
        <tr>
            <th></th>
            <td colspan="3" class="tdModify">
                <button class="btn btn-success" @click="createItem();" v-if="modifyObj.id <= 0">新增</button>
                <button class="btn btn-success" @click="updateItem();" v-if="modifyObj.id > 0">修改</button>
                <button class="btn btn-primary" @click="resetItem();">重填</button>
                <button class="btn btn-danger" @click="deleteItem();" v-if="modifyObj.id > 0 && modifyObj.enVerified == 0">刪除</button>

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