<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>佳醫創照健康</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes" />
    <link rel="icon" type="image/png" sizes="48x48" href="../../assets/images/icons/logo-icon.svg">
    <!--Header S-->
    <link rel="stylesheet" type="text/css" href="/assets/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/animate.min.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/swiper-bundle.min.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/master.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/date.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/contact.css" />
    <link rel="stylesheet" type="text/css" href="/assets/css/member.css" />
    <script type="text/javascript" src="/assets/js/jquery-3.7.0.min.js"></script>
    <script type="text/javascript" src="/assets/js/vue.js"></script>
    <script type="text/javascript" src="/assets/js/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="/assets/js/swiper-bundle.min.js"></script>
    <script type="text/javascript" src="/assets/js/font-awesome-5.13.0-all.min.js"></script>
    <script type="text/javascript" src="/assets/js/lazyload.min.js"></script>
    <script type="text/javascript" src="/assets/js/site.js"></script>
    <script type="text/javascript" src="/assets/js/uj.js?tf=202411271828"></script>
    <script type="text/javascript" src="/assets/js/frame.js"></script>

    <link rel="stylesheet" href="/assets/plugins/vue2-datepicker/index.css">
    <script src="/assets/plugins/vue2-datepicker/index.js"></script>
    <script src="/assets/plugins/vue2-datepicker/moment.min.js"></script>
    <style>
        .order-info-item { position: relative; }
        .order-info-item .order-info-item-action { position: absolute; right: 0; }
        .order-info-item .order-info-item-action ul li { margin: 0 0 0.5em 0; }
        .order-info-item .order-info-item-action ul li label.prettier-input { padding: 0; }
		.member-block .info .pd-wrap:first-child .text { color: #285F91; }
        .member-block .info .stores .orderinfo .product-info ul li { height: auto; margin: 0 0.2em 0.2em 0.2em; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box { display: block; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box:not(:last-child) { border-bottom: 1px solid #EFEFEF; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex { display: block !important; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex a { width: 10%; min-width: 80px; text-align: center; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex a img { margin-bottom: 10px; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info { display: inline-block; max-width: 85%; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap { display: block; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap { display: block; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box { padding: 5px; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box a { width: 15%; padding: 0 10px; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box a img { margin: 0 auto; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box .text-wrap { display: inline-block; }
        .member-block .info .orders .list .order-details .info-middle-product .pd-box .d-flex .pd-info .pd-wrap .li-wrap .add-pd-box .text-wrap .price { margin-left: 20px; }
        .member-block .info .orders .list .order-details .info-bottom { border-top: 2px double #ccc;  }
        
        .popup-sty .card-body .detail-info ul li .products, .popup-sty .card-body .detail-info ul li .relations { display: block; vertical-align: top; }
        .popup-sty .card-body .detail-info ul li .relations .pd-wrap { display: flex; flex-wrap: wrap; }
        .popup-sty .card-body .detail-info ul li .relations .pd-wrap .relations-item { display: flex; width: calc((100% - 20px) / 2); padding: 5px; margin: 5px; border-radius: 5px; background-color: #F4FAFF; border: 1px solid #ccc; }
        .popup-sty .card-body .detail-info ul li .relations .pd-wrap .relations-item img { width: 50px; height: fit-content; }
        .popup-sty .card-body .detail-info ul li .relations .pd-wrap .relations-item .text-wrap { padding: 0 5px; font-size: 16px; line-height: 1.5; }
        .popup-sty .card-body .detail-info ul li .span-price { color: #285F91; font-size: 20px; }
        .popup-sty .card-body .detail-info ul.renew li:nth-child(2) { width: 38%; }
        .popup-sty .card-body .detail-info ul.renew li:nth-child(3) { width: 10%; }
        .popup-sty .card-body .detail-info ul.renew li:nth-child(4) { width: 40%; }
        .popup-sty .card-body .detail-info ul.renew li .renewstatus { border: solid 1px; padding: 5px 10px; text-align: center; border-radius: 5px; }
        .popup-sty .card-body .detail-info ul.renew li .renewstatus100 { color: #285F91; }
        .popup-sty .card-body .detail-info ul.renew li .renewstatus200 { color: #B02E0C; }
        .popup-sty .card-body .renew-order-info { padding: 10px 20px 5px; font-size: 20px; font-weight: bold; }
        .popup-sty .card-body .renew-order-info .recycle-info, 
        .popup-sty .card-body .renew-order-info .renew-info { width: 100%; max-width: 350px; margin: 10px auto 0 auto; padding: 10px; }
        .popup-sty .card-body .renew-order-info .recycle-info { background-color: #EFEFEF; }
        .popup-sty .card-body .renew-order-info .list-box { display: flex; justify-content: space-between; }
        .popup-sty .card-body .renew-order-info .recycle-info .input-date input { background-color: #FFF; }
        .popup-sty .card-body .renew-order-info .renew-info { border: solid 1px #EFEFEF; }
        .popup-sty .card-body .renew-order-info .renew-info .cod-freightage { margin-top: 15px; }
       
        .popup-sty .card-body .product { padding: 0; }
        .popup-sty .card-body .product .list-box.title { display: block; padding: 0 20px; margin-bottom: 10px; font-size: 28px; color: #285F91; border: 0; }
        .popup-sty .card-body textarea { width: 100%; }
        .card .change-order .pd-box .pd-list .pd-info { width: 60%; }
        .card .change-order .pd-box .pd-list .pd-info .list-box { border-top: 1px solid #EFEFEF; padding-top: 10px; margin-top: 10px; }
        .card .change-order .pd-box .pd-list .pd-info .list-box .pd-list:not(:last-child) { border-bottom-width: 0px; }
        .card .change-order .pd-box .pd-list .pd-info .pd-img { width: 10%; min-width: 80px; }
        .card .change-order .pd-box .pd-list .pd-info .pd-img img { width: 70px; margin: 0 5px; }
        .card .change-order .pd-box .pd-list .pd-subtotal { width: 12%; padding: 0 10px; }
        @media (max-width: 768px) {
            .popup-sty .block .btn { display: inline-block; }
            .popup-sty .card-body .detail-info ul li img { width: 100%; }
            .popup-sty .card-body .detail-info ul li .relations .pd-wrap .relations-item { width: calc((100% - 20px) / 2); }
            .popup-sty .card-body .detail-info ul.renew li { width: 100% !important; }
            .popup-sty .card-body .detail-info ul.renew li:nth-child(1) { max-width: 200px; }
        }
    </style>
    <!--Header E-->
</head>
<body>
	<header class="top-fixed gold-bar">
		<div class="default-w">
			<div class="m-top">
				<div class="logo"><a href="../index.html"><img src="../../assets/images/icons/ablc-logo.svg" /><em class="invisible-txt"></em></a></div>
				<div class="m-icon">
					<div class="search">
						<input type="text" placeholder="請輸入輔具名稱..." />
						<a><img src="../../assets/images/icons/search.png" /></a>
					</div>
					<div class="cart">
						<a><img src="../../assets/images/icons/cart.png" /></a>
					</div>
					<div class="member">
						<a><img src="../../assets/images/icons/user-icon.png" /></a>
					</div>
				</div>
			</div>
			<div class="menu-wrap">
				<div id="sub-menu" class="sub-menu"><a href="#" onclick="return false;">menu<span class="b-top"></span><span class="b-middle"></span><span class="b-bottom"></span><em class="t-btn"></em></a></div>
				<div class="menu-disp">
					<ul class="ul-wrap">
						<li>
							<div class="search">
								<input type="text" placeholder="請輸入輔具名稱..." />
								<a><img src="../../assets/images/icons/search.png" /></a>
							</div>
						</li>
						<li>
							<div><a href="#" class="menu-lv1">我要租輔具</a></div>
						</li>
						<li>
							<div><a href="../../Template/news/list.html" class="menu-lv1">最新消息</a></div>
						</li>
						<li>
							<div><a href="#" class="menu-lv1">關於我們</a></div>
						</li>
						<li>
							<div><a href="../Template/member/edit.html" class="menu-lv1">常見問題</a></div>
						</li>
						<li>
							<div><a class="pr-0" href="../Template/member/edit.html" class="menu-lv1">出租排行榜</a></div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</header>
    <div id="content">
        <!--Content S-->
        <div id="div-main" class="default-w content-p-page">
            <div class="content">
                <div class="member-block" id="member-block">
                    <div class="h-title">通路專區</div>
                    <div class="bookmark">
                        <ul>
                            <li v-for="item in pageTitle"
                                :class="{'selected' : item == bookmarkName }" :key="item"
                                @click="clickBookMark(item)"><a>{{item}}</a></li>
                        </ul>
                    </div>
                    <div class="info" :class="{ 'bg-color': bookmarkName !== '會員中心' && bookmarkName !== '訂單記錄' && bookmarkName !== '輔具動態' , 'border-b': bookmarkName !== '門市資訊' && bookmarkName !== '變更密碼'}">
                        <!-- 會員中心 -->
                        <ul class="this product-info" data-box="會員中心" :class="{'d-block': bookmarkName == '會員中心', 'd-none': bookmarkName != '會員中心'}">
                            <li>
                                <div style="margin: 0 0 1em 0; font-size: 16px;">
                                    篩選：
                                    <input type="text" v-model="billboard.keyword" placeholder="客人姓名、電話、訂單編號"
                                           @change="filterOrderList();" @keypress="keychange($event, 'filter');" style="width: 50%; display: inline-block; font-size: 16px; padding: 0.5em; " />
                                    <button class="search-btn" @click="filterOrderList()">查詢</button>
                                </div>
                            </li>
                            <li class="pd-wrap stores" v-if="billboard.expirings.length > 0">
                                <div class="text red">即將結束租用品項</div>
                                <ul class="orderinfo light-red" v-for="order in  billboard.expirings" v-show="order.isShow">
                                    <li @click="getOrderDetail(order.id)">
                                        <div class="font-bold">訂單編號：{{order.orderNum}}</div>
                                        <div v-if="order.enRentedFor == 100"><span v-show="order.tenantRelation != '同承租人'">承租：</span>{{order.tenantName}} {{order.tenantMobile}}</div>
                                        <div v-if="order.enRentedFor == 100 && order.tenantRelation != '同承租人'">使用：{{order.delivery.receiver}} {{order.delivery.mobile}}</div>
                                        <div v-else>{{order.rentedForString}}</div>
                                        <div>{{order.shippingMethodString}}</div>
                                        <div> <p class="order-btn">查看訂單</p></div>
                                    </li>
                                    <li class="product-info" @click="renewOrder(order, 200)">
                                        <ul>
                                            <li v-for="item in order.details">
                                                <div v-for="s in item.stocks">{{s.propertyNo}}</div>
                                                <img :src="item.coverImage" />
                                                <div v-show="item.qty > 1" class="qty">{{item.qty}}</div>
                                                <div>{{item.startDateString}} ~ {{item.endDateString}}</div>
                                                {{item.statusString}}
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="action-btn" @click="renewOrder(order, 200)">
                                        <a class="order-btn renew btn-plus" v-if="order.showRenewBtn">是否續租</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="pd-wrap stores" v-if="billboard.returnables.length > 0">
                                <div class="text">轉退租清單</div>
                                <ul class="orderinfo store" v-for="order in billboard.returnables" v-show="order.isShow">
                                    <li @click="getOrderDetail(order.id)">
                                        <div class="font-bold">訂單編號：{{order.orderNum}}</div>
                                        <div v-if="order.enRentedFor == 100"><span v-show="order.tenantRelation != '同承租人'">承租：</span>{{order.tenantName}} {{order.tenantMobile}}</div>
                                        <div v-if="order.enRentedFor == 100 && order.tenantRelation != '同承租人'">使用：{{order.delivery.receiver}} {{order.delivery.mobile}}</div>
                                        <div v-else>{{order.rentedForString}}</div>
                                        <div>{{order.shippingMethodString}}</div>
                                        <div> <p class="order-btn">查看訂單</p></div>
                                    </li>
                                    <li class="product-info" @click="getOrderDetail(order.id)">
                                        <ul>
                                            <li v-for="item in order.details">
                                                <div v-for="s in item.stocks">{{s.propertyNo}}</div>
                                                <img :src="item.coverImage" />
                                                <div v-show="item.qty > 1" class="qty">{{item.qty}}</div>
                                                <div>{{item.startDateString}} ~ {{item.endDateString}}</div>
                                                {{item.statusString}}
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="pd-wrap stores">
                                <div class="text">正在租用中品項</div>
                                <div v-if="billboard.renteds.length > 0">
                                    <ul class="orderinfo lessee" v-for="order in billboard.renteds" v-show="order.isShow">
                                        <li @click="getOrderDetail(order.id)">
                                            <div class="font-bold">訂單編號：{{order.orderNum}}</div>
                                            <div v-if="order.enRentedFor == 100"><span v-show="order.tenantRelation != '同承租人'">承租：</span>{{order.tenantName}} {{order.tenantMobile}}</div>
                                            <div v-if="order.enRentedFor == 100 && order.tenantRelation != '同承租人'">使用：{{order.delivery.receiver}} {{order.delivery.mobile}}</div>
                                            <div v-else>{{order.rentedForString}}</div>
                                            <div>{{order.shippingMethodString}}</div>
                                            <div> <p class="order-btn">查看訂單</p></div>
                                        </li>
                                        <li class="product-info" @click="renewOrder(order, 100)">
                                            <ul>
                                                <li v-for="item in order.details">
                                                    <div v-for="s in item.stocks">{{s.propertyNo}}</div>
                                                    <img :src="item.coverImage" />
                                                    <div v-show="item.qty > 1" class="qty">{{item.qty}}</div>
                                                    <div>{{item.startDateString}} ~ {{item.endDateString}}</div>
                                                    {{item.statusString}}
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="action-btn" @click="renewOrder(order, 100)">
                                            <a class="order-btn renew btn-plus" v-if="order.showRenewBtn">是否續租</a>
                                        </li>
                                    </ul>
                                </div>
                                <div v-else>無</div>
                            </li>
                        </ul>
                        <!-- 訂單記錄 -->
                        <ul class="orders this" data-box="訂單記錄" :class="{'d-block': bookmarkName == '訂單記錄', 'd-none': bookmarkName != '訂單記錄'}">
                            <li class="state">
                                <ul>
                                    <li :class="{'selected' : orderPanel.query.status == -1 }" :key="-1" @click="clickStates(-1)"><a>全部訂單({{orderPanel.orderCount.total}})</a></li>
                                    <li v-for="item in orderPanel.ltOrderStatuss" :class="{'selected' : item.value == orderPanel.query.status }"
                                        :key="item.value" @click="clickStates(item.value)">
                                        <a>
                                            {{item.name}}
                                            <span v-for="cnt in orderPanel.orderCount.list" v-if="cnt.status == item.value">({{cnt.count}})</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="list">
                                <ul>
                                    <li v-if="orderPanel.orderObj === null" class="title">訂單明細<span class="s-tip">(只顯示兩年內的訂單明細)</span></li>
                                    <li v-if="orderPanel.orderObj === null">
                                        <div style="margin: 0 0 1em 0; font-size: 16px;">
                                            篩選：
                                            <input type="text" v-model="orderPanel.query.keyword" placeholder="姓名、電話、訂單編號"
                                                   @change="getOrders(1);" @keypress="keychange($event, 'order');" style="width: 50%; display: inline-block; font-size: 16px; padding: 0.5em;" />
                                            <button class="search-btn" @click="getOrders(1)">查詢</button>
                                        </div>
                                    </li>
                                    <li v-if="orderPanel.orderObj === null" class="order-box" :style="{'background': item.enStatus == 9999 ? '#F9F9F9': '' }"
                                        v-for="item in orderPanel.orders.list">
                                        <div class="order-info-item">
                                            <ul class="states-list">
                                                <li>
                                                    <ul v-if="item.enStatus != 500" class="list">
                                                        <li v-for="s in orderPanel.ltOrderStatuss" v-if="s.value != 500" class="s-block" :class="{selected: item.enStatus === s.value}">
                                                            <span v-if="item.enRentedFor == 200 && s.value == 700">展示中</span>
                                                            <span v-else>{{s.name}}</span>
                                                        </li>
                                                    </ul>
                                                    <ul v-if="item.enStatus == 500" class="list">
                                                        <li class="s-block s-cancel">{{item.statusString}}</li>
                                                    </ul>
                                                </li>
                                            </ul>
                                            <div class="order-info-item-action">
                                                <ul class="states-list">
                                                    <li>
                                                        <ul>
                                                            <li class="order-info"><a href="#" @click="getOrderDetail(item.id)">查看明細 ></a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </div>
                                            <ul class="info-top product-info">
                                                <li class="black">訂單編號：{{item.orderNum}}</li>
                                                <li>日期：{{item.createDatetime}}</li>
                                            </ul>
                                            <div class="order-info-item-action">
                                                <ul>
                                                    <li v-if="item.enStatus == 210"><a class="btn-color btn-plus" @click="changeOrder(item)">訂單修改</a></li>
                                                    <li v-if="item.enType == 100 && item.enStatus != 500 && item.enStatus >= 400"><a class="btn-print" :href="'@packingDetail?oid=' + item.id" target="_blank">出貨單</a></li>
                                                    <li v-if="item.enType == 100 && item.enRentedFor == 100 && item.enStatus != 500 && item.enStatus >= 400"><a class="btn-print" :href="'@contract?oid=' + item.id" target="_blank">合約書</a></li>
                                                    <li v-if="item.enType == 100 && item.enRentedFor == 100 && item.enStatus != 500 && item.enStatus >= 400">
                                                        <label class="prettier-input">
                                                            <input type="file" id="fuContract" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuContract" @change="onFileChange" />
                                                            <a class="btn-upload" @click="triggerContractUpload(item.id)">合約上傳</a>
                                                        </label>
                                                    </li>
                                                </ul>
                                            </div>
                                            <ul class="info-bottom">
                                                <li v-if="item.enRentedFor == 100">承租人：{{item.tenantName}}</li>
                                                <li v-if="item.enRentedFor == 100">運送方式：{{item.shippingMethodString}}</li>
                                                <li v-else>{{item.rentedForString}}</li>
                                                <li>
                                                    <ul class="cost-box info-middle-product">
                                                        <li class="pd-box" v-for="detail in item.details.list">
                                                            <a href="#" @click="getOrderDetail(item.id)"><img class="img" :src="detail.coverImage" /></a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li v-if="orderPanel.orders.list == null || orderPanel.orders.list.length == 0" class="order-box">無訂單資料</li>
                                    <li v-if="orderPanel.orderObj === null">
                                        <div class="pagination" v-if="orderPanel.orders.pager.totalPage >1 ">
                                            <span class="page-item" :class="{disabled: orderPanel.query.currentPage <= 1}"><a href="#member-block" class="arrow-btn" @click="goPage(orderPanel.query.currentPage - 1, 'order');"><img src="../../assets/images/icons/arrow-prev.svg" /></a></span>
                                            <span v-for="n in orderPanel.orders.pager.endPage" v-if="n >= orderPanel.orders.pager.startPage" class="page-item" :class="{active: n == orderPanel.query.currentPage }"><a href="#member-block" class="page-num" @click="goPage(n, 'order');">{{n}}</a></span>
                                            <span class="page-item" :class="{disabled: orderPanel.orders.pager.totalPage <= orderPanel.orders.pager.currentPage}"><a href="#member-block" class="arrow-btn" @click="goPage(orderPanel.query.currentPage + 1, 'order');"><img src="../../assets/images/icons/arrow-next.svg" /></a></span>
                                        </div>
                                    </li>
                                    <!-- 訂單明細 -->
                                    <li v-if="orderPanel.orderObj !== null" class="back-to-list"><button @click="backToOrderList"><<  返回列表</button></li>
                                    <li v-if="orderPanel.orderObj !== null" class="order-box order-details">
                                        <ul class="states-list">
                                            <li>
                                                <ul class="list">
                                                    <li class="s-block selected" v-if="orderPanel.orderObj.enRentedFor == 200 && orderPanel.orderObj.enStatus == 700">展示中</li>
                                                    <li class="s-block selected" v-else>{{orderPanel.orderObj.statusString}}</li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <div class="order-info-item">
                                            <ul class="info-top">
                                                <li class="black">訂單編號：{{orderPanel.orderObj.orderNum}}</li>
                                                <li>日期：{{orderPanel.orderObj.createDatetime}}</li>
                                                <li v-if="orderPanel.orderObj.enRentedFor == 100">其它費用：{{orderPanel.orderObj.storeOtherFee}}</li>
                                            </ul>
                                            <div class="order-info-item-action">
                                                <ul>
                                                    <li v-if="orderPanel.orderObj.enStatus == 210"><a class="btn-color btn-plus" @click="changeOrder(orderPanel.orderObj)">訂單修改</a></li>
                                                    <li v-if="orderPanel.orderObj.enType == 100 && orderPanel.orderObj.enStatus != 500 && orderPanel.orderObj.enStatus >= 400"><a class="btn-print" :href="'@packingDetail?oid=' + orderPanel.orderObj.id" target="_blank">出貨單</a></li>
                                                    <li v-if="orderPanel.orderObj.enType == 100 && orderPanel.orderObj.enRentedFor == 100 && orderPanel.orderObj.enStatus != 500 && orderPanel.orderObj.enStatus >= 400"><a class="btn-print" :href="'@contract?oid=' + orderPanel.orderObj.id" target="_blank">合約書</a></li>
                                                    <li v-if="orderPanel.orderObj.enType == 100 && orderPanel.orderObj.enRentedFor == 100 && orderPanel.orderObj.enStatus != 500 && orderPanel.orderObj.enStatus >= 400">
                                                        <label class="prettier-input">
                                                            <input type="file" id="fuContract" accept=".gif, .jpg, .jpeg, .png, .webp" ref="fuContract" @change="onFileChange" />
                                                            <a class="btn-upload" @click="triggerContractUpload(orderPanel.orderObj.id)">合約上傳</a>
                                                        </label>
                                                    </li>
                                                </ul>
                                            </div>
                                            <ul class="info-middle" v-if="orderPanel.orderObj.enRentedFor == 100">
                                                <li class="black">承租人</li>
                                                <li>姓名：{{orderPanel.orderObj.tenantName
                                                    }}
                                                </li>
                                                <li>手機號碼：{{orderPanel.orderObj.tenantMobile}}</li>
                                            </ul>
                                            <ul class="info-middle" v-if="orderPanel.orderObj.enRentedFor == 100">
                                                <li class="black">使用人</li>
                                                <li>
                                                    姓名：{{orderPanel.orderObj.delivery.receiver}}
                                                    <span v-show="orderPanel.orderObj.tenantRelation != null && orderPanel.orderObj.tenantRelation.length > 0">（<span v-if="orderPanel.orderObj.tenantRelation != '同承租人'">為承租人之</span>{{orderPanel.orderObj.tenantRelation}}）</span>
                                                </li>
                                                <li>手機號碼：{{orderPanel.orderObj.delivery.mobile}}</li>
                                                <li>運送方式：{{orderPanel.orderObj.shippingMethodString}}</li>
                                                <li v-if="orderPanel.orderObj.enShippingMethod == 200">運送地址：{{orderPanel.orderObj.delivery.county}}{{orderPanel.orderObj.delivery.city}}{{orderPanel.orderObj.delivery.address}}</li>
                                                <li v-if="orderPanel.orderObj.enShippingMethod == 100">
                                                    取還門市：
                                                    <span v-for="item in ltStores" v-if="orderPanel.orderObj.delivery.storeId == item.id">{{item.shortName}}<span v-if="item.zipCode != null && item.zipCode != ''">  ({{item.county}}{{item.city}}{{item.address}})</span></span>
                                                </li>
                                                <li v-if="orderPanel.orderObj.remark != null && orderPanel.orderObj.remark.length > 0">備註：<span v-html="orderPanel.orderObj.remark.replace(/\n/g,'<br />')"></span></li>
                                                <li v-show="orderPanel.contracts != null && orderPanel.contracts.length > 0">
                                                    回簽合約：
                                                    <ul>
                                                        <li v-for="(item, idx) in orderPanel.contracts" style="display: inline-block;">
                                                            <a :href="item.imgSrc" target="_blank" style="cursor: zoom-in;"><img class="py-10" :src="item.imgSrc" style="width: 90%; max-height: 100px;" /></a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                            <ul class="info-middle" v-else>
                                                <li>{{orderPanel.orderObj.rentedForString}}</li>
                                            </ul>
                                            <ul class="info-middle-product">
                                                <li class="pd-box" v-for="item in orderPanel.orderObj.details.list">
                                                    <div class="d-flex">
                                                        <a :href="'/product/data/' + item.productId">
                                                            <img class="img" :src="item.coverImage" />
                                                            <div class="black" v-if="orderPanel.orderObj.enRentedFor == 100">{{item.statusString}}</div>
                                                            <div class="black" v-else-if="item.enStatus == 700">展示中</div>
                                                            <div class="black" v-else>{{item.statusString}}</div>
                                                        </a>
                                                        <div class="pd-info">
                                                            <div>{{item.productName}}</div>
                                                            <div v-if="item.seatWidthAttrId != null && item.seatWidthAttrId > 0">座寬：{{item.seatWidthAttrName}}</div>
                                                            <div><span>數量：{{item.qty}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>天數：{{item.days}} 天 ({{item.periodTypeString}})</span></div>
                                                            <div>租借日期：{{item.startDate}} ~ {{item.endDate}}</div>
                                                            <div class="black" v-show="showPriceInfo(orderPanel.orderObj)">
                                                                <span>租金：$ {{item.subTotal.toLocaleString()}}</span>
                                                                <span v-show="showConsumableFee(orderPanel.orderObj, item.consumableFee)"> / 耗材：$ {{(item.consumableFee * item.qty).toLocaleString()}}</span>
                                                                <span v-show="item.deposit > 0"> /  押金：$ {{(item.deposit * item.qty).toLocaleString()}}</span>
                                                            </div>
                                                            <div v-if="item.ltGifts != null && item.ltGifts.length > 0">
                                                                <div class="text">包含品項：</div>
                                                                <ul class="pd-wrap">
                                                                    <li class="li-wrap">
                                                                        <div class="add-pd-box" v-for="pd in item.ltGifts">
                                                                            <a v-if="pd.coverImage != null && pd.coverImage != ''"><img :src="pd.coverImage" /></a>
                                                                            <div class="text-wrap">
                                                                                <div>{{pd.productName}} x {{pd.qty}}</div>
                                                                                <div class="black" v-if="pd.enStatus == 9999">已出貨</div>
                                                                                <div class="black" v-else>{{pd.statusString}}</div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div v-if="item.ltSupplies != null && item.ltSupplies.length > 0">
                                                                <div class="text">加租品項：</div>
                                                                <ul class="pd-wrap">
                                                                    <li class="li-wrap">
                                                                        <div class="add-pd-box" v-for="pd in item.ltSupplies">
                                                                            <a v-if="pd.coverImage != null && pd.coverImage != ''"><img :src="pd.coverImage" /></a>
                                                                            <div class="text-wrap">
                                                                                <div>
                                                                                    {{pd.productName}} x {{pd.qty}}
                                                                                    <span class="price black" v-show="showPriceInfo(orderPanel.orderObj) && pd.unitPrice > 0"><span>加租：$ {{(pd.unitPrice * item.periodQty * pd.qty).toLocaleString()}}</span></span>
                                                                                </div>
                                                                                <div class="black" v-if="pd.enStatus == 9999">已出貨</div>
                                                                                <div class="black" v-else>{{pd.statusString}}</div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div v-if="item.ltAdditions != null && item.ltAdditions.length > 0">
                                                                <div class="text">加購品項：</div>
                                                                <ul class="pd-wrap">
                                                                    <li class="li-wrap">
                                                                        <div class="add-pd-box" v-for="pd in item.ltAdditions">
                                                                            <a v-if="pd.coverImage != null && pd.coverImage != ''"><img :src="pd.coverImage" /></a>
                                                                            <div class="text-wrap">
                                                                                <div>
                                                                                    {{pd.productName}} x {{pd.qty}}
                                                                                    <span class="price black" v-show="showPriceInfo(orderPanel.orderObj)"><span>加購：$ {{(pd.unitPrice * pd.qty).toLocaleString()}}</span></span>
                                                                                </div>
                                                                                <div class="black" v-if="pd.enStatus == 9999">已出貨</div>
                                                                                <div class="black" v-else>{{pd.statusString}}</div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div v-if="item.ltBundles != null && item.ltBundles.length > 0">
                                                                <div class="text">組合包含：</div>
                                                                <ul class="pd-wrap">
                                                                    <li class="li-wrap">
                                                                        <div class="add-pd-box" v-for="pd in item.ltBundles">
                                                                            <a v-if="pd.coverImage != null && pd.coverImage != ''"><img :src="pd.coverImage" /></a>
                                                                            <div class="text-wrap">
                                                                                <div>
                                                                                    {{pd.productName}} x {{pd.qty}}
                                                                                </div>
                                                                                <div class="black" v-if="pd.enStatus == 9999">已出貨</div>
                                                                                <div class="black" v-else>{{pd.statusString}}</div>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                            <ul class="info-bottom" v-show="showPriceInfo(orderPanel.orderObj)">
                                                <li>
                                                    <ul class="cost-box">
                                                        <li><div>租金</div><div class="pt-10 black">$ {{orderPanel.orderObj.details.subTotal.toLocaleString()}}</div></li>
                                                        <li v-show="showConsumableFee(orderPanel.orderObj, orderPanel.orderObj.details.consumableFee)" style="font-size:28px;">+</li>
                                                        <li v-show="showConsumableFee(orderPanel.orderObj, orderPanel.orderObj.details.consumableFee)"><div>耗材費</div><div class="pt-10 black">$ {{orderPanel.orderObj.details.consumableFee.toLocaleString()}}</div></li>
                                                        <li v-show="orderPanel.orderObj.details.deposit > 0" style="font-size:28px;">+</li>
                                                        <li v-show="orderPanel.orderObj.details.deposit > 0"><div>押金</div><div class="pt-10 black">$ {{orderPanel.orderObj.details.deposit.toLocaleString()}}</div></li>
                                                        <li v-show="!orderPanel.orderObj.isCodFreight" style="font-size:28px;">+</li>
                                                        <li v-show="!orderPanel.orderObj.isCodFreight"><div>運費</div><div class="pt-10 black">$ {{orderPanel.orderObj.details.freightage.toLocaleString()}}</div></li>
                                                        <li v-show="orderPanel.orderObj.details.suppliesTotal > 0" style="font-size:28px;">+</li>
                                                        <li v-show="orderPanel.orderObj.details.suppliesTotal > 0"><div>加租</div><div class="pt-10 black">$ {{orderPanel.orderObj.details.suppliesTotal.toLocaleString()}}</div></li>
                                                        <li v-show="orderPanel.orderObj.details.additionsTotal > 0" style="font-size:28px;">+</li>
                                                        <li v-show="orderPanel.orderObj.details.additionsTotal > 0"><div>加購</div><div class="pt-10 black">$ {{orderPanel.orderObj.details.additionsTotal.toLocaleString()}}</div></li>
                                                        <li v-show="orderPanel.orderObj.storeOtherFee > 0" style="font-size:28px;">+</li>
                                                        <li v-show="orderPanel.orderObj.storeOtherFee > 0"><div>其它費用</div><div class="pt-10 black">$ {{orderPanel.orderObj.storeOtherFee.toLocaleString()}}</div></li>
                                                        <li style="font-size:28px;">=</li>
                                                        <li><div>總計</div><div class="pt-10 black">$ {{(orderPanel.orderObj.details.total + parseFloat(orderPanel.orderObj.storeOtherFee)).toLocaleString()}}</div></li>
                                                    </ul>
                                                </li>
                                                <li v-if="orderPanel.orderObj.isCodConsumableFee || orderPanel.orderObj.isCodFreight ">
                                                    <ul class="cost-box red">
                                                        <li>佳醫代收：</li>
                                                        <li v-show="orderPanel.orderObj.isCodConsumableFee"><div>耗材費</div><div class="pt-10 black"><span class="red">$ {{orderPanel.orderObj.details.consumableFee.toLocaleString()}}</span></div></li>
                                                        <li v-show="orderPanel.orderObj.isCodConsumableFee && orderPanel.orderObj.isCodFreight" style="font-size:28px;">+</li>
                                                        <li v-show="orderPanel.orderObj.isCodFreight"><div>運費</div><div class="pt-10 black"><span class="red">$ {{orderPanel.orderObj.details.freightage.toLocaleString()}}</span></div></li>
                                                        <li style="font-size:28px;">=</li>
                                                        <li><div>代收總計</div><div class="pt-10 black"><span class="red">$ {{orderPanel.orderObj.codFee.toLocaleString()}}</span></div></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <!--輔具動態-->
                        <ul class="orders this" data-box="輔具動態" style="flex-direction: column;" :class="{'d-block': bookmarkName == '輔具動態', 'd-none': bookmarkName != '輔具動態'}">
                            <li class="list stock">
                                <span class="t-text">門市展示</span>
                                <ul>
                                    <li v-if="stockPanel.display.products.list != null && stockPanel.display.products.list.length > 0" class="order-box order-details">
                                        <ul class="info-middle-product">
                                            <li class="pd-stock" v-for="item in stockPanel.display.products.list">
                                                <a href="#" @click="goProduct(item)"><img class="img" :src="item.coverImage" v-if="item.coverImage != null && item.coverImage.length > 0" /></a>
                                                <div class="pd-info">
                                                    <div>{{item.productName}}</div>
                                                    <div v-if="item.ltOrders != null && item.ltOrders.length > 0">
                                                        <div class="font-bold red">總數：{{item.qty}} </div>
                                                    </div>
                                                    <div v-if="item.ltSeatWidthAttrs != null && item.ltSeatWidthAttrs.length > 0">
                                                        <div v-for="attrObj in item.ltSeatWidthAttrs" v-show="attrObj.qty > 0">
                                                            <div class="font-bold red">{{attrObj.name}} 總數：{{attrObj.qty}} </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="pagination" v-if="stockPanel.display.products.pager.totalPage >1 ">
                                            <span class="page-item" :class="{disabled: stockPanel.display.query.currentPage <= 1}"><a href="#member-block" class="arrow-btn" @click="goPage(stockPanel.display.query.currentPage - 1, 'displaystock');"><img src="../../assets/images/icons/arrow-prev.svg" /></a></span>
                                            <span v-for="n in stockPanel.display.products.pager.endPage" v-if="n >= stockPanel.display.products.pager.startPage" class="page-item" :class="{active: n == stockPanel.display.query.currentPage }"><a href="#member-block" class="page-num" @click="goPage(n, 'displaystock');">{{n}}</a></span>
                                            <span class="page-item" :class="{disabled: stockPanel.display.products.pager.totalPage <= stockPanel.display.products.pager.currentPage}"><a href="#member-block" class="arrow-btn" @click="goPage(stockPanel.display.query.currentPage + 1, 'displaystock');"><img src="../../assets/images/icons/arrow-next.svg" /></a></span>
                                        </div>
                                    </li>
                                    <li v-else class="order-box">無庫存資料</li>
                                </ul>
                            </li>
                            <li class="list stock">
                                <span class="t-text">客人租用</span>
                                <ul>
                                    <li v-if="stockPanel.renting.products.list != null && stockPanel.renting.products.list.length > 0" class="order-box order-details">
                                        <ul class="info-middle-product">
                                            <li class="pd-stock" v-for="item in stockPanel.renting.products.list">
                                                <a href="#" @click="goProduct(item)"><img class="img" :src="item.coverImage" v-if="item.coverImage != null && item.coverImage.length > 0" /></a>
                                                <div class="pd-info">
                                                    <div>{{item.productName}}</div>
                                                    <div v-if="item.ltOrders != null && item.ltOrders.length > 0">
                                                        <div class="font-bold red">總數：{{item.qty}} </div>
                                                        <div v-for="order in item.ltOrders" style="margin-left: 1em;">
                                                            <a href="#" @click="getOrderDetail(order.orderId)">{{order.tenantName}} x {{order.stockQty}}</a>
                                                        </div>
                                                    </div>
                                                    <div v-if="item.ltSeatWidthAttrs != null && item.ltSeatWidthAttrs.length > 0">
                                                        <div v-for="attrObj in item.ltSeatWidthAttrs" v-show="attrObj.qty > 0">
                                                            <div class="font-bold red">{{attrObj.name}} 總數：{{attrObj.qty}} </div>
                                                            <div v-for="order in attrObj.ltOrders" style="margin-left: 1em;">
                                                                <a href="#" @click="getOrderDetail(order.orderId)">{{order.tenantName}} x {{order.stockQty}}</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="pagination" v-if="stockPanel.renting.products.pager.totalPage >1 ">
                                            <span class="page-item" :class="{disabled: stockPanel.renting.query.currentPage <= 1}"><a href="#member-block" class="arrow-btn" @click="goPage(stockPanel.renting.query.currentPage - 1, 'rentingstock');"><img src="../../assets/images/icons/arrow-prev.svg" /></a></span>
                                            <span v-for="n in stockPanel.renting.products.pager.endPage" v-if="n >= stockPanel.renting.products.pager.startPage" class="page-item" :class="{active: n == stockPanel.renting.query.currentPage }"><a href="#member-block" class="page-num" @click="goPage(n, 'rentingstock');">{{n}}</a></span>
                                            <span class="page-item" :class="{disabled: stockPanel.renting.products.pager.totalPage <= stockPanel.renting.products.pager.currentPage}"><a href="#member-block" class="arrow-btn" @click="goPage(stockPanel.renting.query.currentPage + 1, 'rentingstock');"><img src="../../assets/images/icons/arrow-next.svg" /></a></span>
                                        </div>
                                    </li>
                                    <li v-else class="order-box">無庫存資料</li>
                                </ul>
                            </li>
                        </ul>
                        <!-- 門市資訊 -->
                        <ul class="personal this" data-box="門市資訊" :class="{'d-block': bookmarkName == '門市資訊', 'd-none': bookmarkName != '門市資訊'}">
                            <li class="input-wrap">
                                <div class="text">通路門市：<a :href="'@printqrcode?id=' + storePanel.user.storeId" target="_blank"><i class="fas fa-qrcode"></i></a></div>
                                <div class="stores-input">
                                    <input type="text" :value="storePanel.user.marketName" disabled />
                                    <input type="text" :value="storePanel.user.storeName" disabled />
                                </div>
                            </li>
                            <li class="input-wrap">
                                <div class="text">帳號：</div>
                                <input type="text" :value="storePanel.user.username" disabled />
                            </li>
                            <li class="input-wrap">
                                <div class="text">姓名：</div>
                                <input type="text" v-model="storePanel.user.name" />
                            </li>
                            <li class="address-sty">
                                <div class="text">地址：</div>
                                <div class="wrap-sty twzipcode-store">
                                    <div class="arrow-select">
                                        <select data-role="county" class="form-control" v-model="storePanel.user.county" ref="county"></select>
                                    </div>
                                    <div class="arrow-select">
                                        <select data-role="district" class="form-control" v-model="storePanel.user.city" @change="changeCity('user')"></select>
                                        <input type="hidden" data-role="zipcode" />
                                    </div>
                                    <input class="address" type="text" placeholder="地址..." v-model="storePanel.user.address" ref="address" />
                                </div>
                            </li>
                            <li class="btn m-btn">
                                <div class="block">
                                    <!--<a class="logout" @click="Logout()">會員登出</a>-->
                                    <div class="btn m-auto btn-r-arrow" @click="saveUser()"><a>儲存</a></div>
                                </div>
                            </li>
                        </ul>
                        <!-- 變更密碼 -->
                        <ul class="change-password this" data-box="變更密碼" :class="{'d-block': bookmarkName == '變更密碼', 'd-none': bookmarkName != '變更密碼'}">
                            <li class="input-wrap pw-eye">
                                <div class="text">新密碼：</div>
                                <input id="pwd1" type="password" placeholder="密碼為6-15碼(限英數字)" v-model="storePanel.user.password2" ref="password2" />
                                <span class="password-toggle-icon" @click="pwShowHide('pwd1')">
                                    <img v-show="showPwd1 == false" src="/assets/images/icons/eye-closed-svgrepo-com.svg" />
                                    <img v-show="showPwd1 == true" src="/assets/images/icons/eye-svgrepo-com.svg" />
                                </span>
                            </li>
                            <li class="input-wrap pw-eye">
                                <div class="text">再次輸入新密碼：</div>
                                <input id="pwd2" type="password" placeholder="密碼為6-15碼(限英數字)" v-model="storePanel.user.confirmpwd" ref="confirmpwd" @keypress="keychange($event, 'changepwd');" />
                                <span class="password-toggle-icon" @click="pwShowHide('pwd2')">
                                    <img v-show="showPwd2 == false" src="/assets/images/icons/eye-closed-svgrepo-com.svg" />
                                    <img v-show="showPwd2 == true" src="/assets/images/icons/eye-svgrepo-com.svg" />
                                </span>
                            </li>
                            <li class="btn m-btn">
                                <div class="block">
                                    <div class="btn m-auto btn-r-arrow" @click="resetPwd()"><a>儲存</a></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
		<!--popup-->
        <!--Renew-->
		<div style="font-weight:normal;" :class="{'show': openPopup, 'd-none': !openPopup}">
			<div class="popup-sty">
				<div class="p-block">
					<div id="p-paper" class="p-paper">
						<div class="card">
							<div class="x-btn"><a @click="openPopup = false;"><img src="/assets/images/icons/icon_14.svg" /></a></div>
                            <div class="card-body">
                                <div class="orderinfo">
                                    <ul>
                                        <li v-if="popupData.orderObj.enRentedFor == 100">{{popupData.orderObj.delivery.receiver}}</li>
                                        <li v-if="popupData.orderObj.enRentedFor == 100">{{popupData.orderObj.delivery.mobile}}</li>
                                        <li>{{popupData.orderObj.shippingMethodString}}</li>
                                        <li v-if="popupData.orderObj.enShippingMethod == 200">{{popupData.orderObj.delivery.county}}{{popupData.orderObj.delivery.city}}{{popupData.orderObj.delivery.address}}</li>
                                        <li>{{popupData.orderObj.orderNum}}</li>
                                    </ul>
                                </div>
                                <div v-show="popupData.step == 1">
                                    <div class="detail-info">
                                        <ul v-for="item in popupData.renewObj.details" class="prod">
                                            <li>
                                                <label><input type="radio" :name="'rbrenew' + item.id" @click="changeRenewStatus(item, 100);" :checked="item.enRenewStatus == 100" /><span>續租</span></label>
                                                <label v-show="item.isAllowReturn"><input type="radio" :name="'rbrenew' + item.id" @click="changeRenewStatus(item, 200);" :checked="item.enRenewStatus == 200" /><span>不續組，歸還</span></label>
                                            </li>
                                            <li><img :src="item.coverImage" /></li>
                                            <li class="left">
                                                <div class="products">
                                                    {{item.productName}}
                                                    <div v-if="item.seatWidthAttrId != null && item.seatWidthAttrId > 0">座寬：{{item.seatWidthAttrName}}</div>
                                                    <div>租借數量：{{item.qty}}</div>
                                                    <div>租借日期：{{item.startDateString}} ~ {{item.endDateString}}</div>
                                                </div>
                                                <div class="relations">
                                                    <div class="list-box" v-if="item.ltGifts !== null && item.ltGifts.length > 0">
                                                        包含品項：
                                                        <div class="pd-wrap">
                                                            <div v-for="(obj, idx) in item.ltGifts" class="relations-item">
                                                                <img v-if="obj.coverImage != null && obj.coverImage.length > 0" :src="obj.coverImage" />
                                                                <div class="text-wrap">
                                                                    <div>{{obj.productName}}</div>
                                                                    <div>數量：{{obj.qty}}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="list-box" v-if="item.ltSupplies !== null && item.ltSupplies.length > 0">
                                                        加租品項：
                                                        <div class="pd-wrap">
                                                            <div v-for="(obj, idx) in item.ltSupplies" class="relations-item">
                                                                <img v-if="obj.coverImage != null && obj.coverImage.length > 0" :src="obj.coverImage" />
                                                                <div class="text-wrap">
                                                                    <div>{{obj.productName}}</div>
                                                                    <div>數量：{{obj.qty}}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <label><input type="radio" :name="'rbrenew-m-' + item.id" @click="changeRenewStatus(item, 100);" :checked="item.enRenewStatus == 100" /><span>續租</span></label>
                                                <label v-show="item.isAllowReturn"><input type="radio" :name="'rbrenew-m-' + item.id" @click="changeRenewStatus(item, 200);" :checked="item.enRenewStatus == 200" /><span>不續組，歸還</span></label>
                                            </li>
                                        </ul>
                                    </div>
                                    <ul class="block">
                                        <li class="btn btn-renew" @click="changeRenewStatusAll(100);"><a>全部續租</a></li>
                                        <li class="btn btn-return" @click="changeRenewStatusAll(200);" v-show="popupData.renewObj.isAllowReturn"><a>不續租，全部歸還</a></li>
                                        <li class="btn m-auto btn-r-arrow" @click="renewStep(2);"><a>下一步</a></li>
                                    </ul>
                                </div>
                                <div v-show="popupData.step == 2">
                                    <div class="detail-info">
                                        <ul v-for="item in popupData.renewObj.details" class="renew">
                                            <li><img :src="item.coverImage" /></li>
                                            <li class="left">
                                                <div class="products">
                                                    {{item.productName}}
                                                    <div v-if="item.seatWidthAttrId != null && item.seatWidthAttrId > 0">座寬：{{item.seatWidthAttrName}}</div>
                                                    <div>數量：{{item.qty}}</div>
                                                    <div>租借日期：{{item.startDateString}} ~ {{item.endDateString}}</div>
                                                </div>
                                                <div class="relations">
                                                    <div class="list-box" v-if="item.ltGifts !== null && item.ltGifts.length > 0">
                                                        包含品項：
                                                        <div class="pd-wrap">
                                                            <div v-for="(obj, idx) in item.ltGifts" class="relations-item">
                                                                <img v-if="obj.coverImage != null && obj.coverImage.length > 0" :src="obj.coverImage" />
                                                                <div class="text-wrap">
                                                                    <div>{{obj.productName}}</div>
                                                                    <div>數量：{{obj.qty}}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="list-box" v-if="item.ltSupplies !== null && item.ltSupplies.length > 0">
                                                        加租品項：
                                                        <div class="pd-wrap">
                                                            <div v-for="(obj, idx) in item.ltSupplies" class="relations-item">
                                                                <img v-if="obj.coverImage != null && obj.coverImage.length > 0" :src="obj.coverImage" />
                                                                <div class="text-wrap">
                                                                    <div>{{obj.productName}}</div>
                                                                    <div>數量：{{obj.qty}}</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="left">
                                                <div v-if="item.enRenewStatus == 100" class="renewstatus renewstatus100">續組</div>
                                                <div v-if="item.enRenewStatus == 200" class="renewstatus renewstatus200">歸還</div>
                                            </li>
                                            <li class="left">
                                                <div class="input-date" v-show="item.enRenewStatus == 100">
                                                    <div>計費方式：{{item.periodTypeString}}計費</div>
                                                    續租日期：{{item.renewStartDate}} ~
                                                    <date-picker value-type="YYYY-MM-DD"
                                                                 format="YYYY-MM-DD"
                                                                 placeholder="結束時間..."
                                                                 :default-value="new Date()"
                                                                 type="date"
                                                                 :input-attr="{name: 'endDate', ref: 'endDate'}"
                                                                 :not-before="item.renewStartDate"
                                                                 :disabled-date="disabledEndDate"
                                                                 @change="countRenewDays(item)"
                                                                 v-model="item.renewEndDate">
                                                    </date-picker>
                                                </div>
                                                <div v-show="item.enRenewStatus == 100">
                                                    <div><span>天數：{{item.renewDays}}天({{item.periodTypeString}})</span></div>
                                                    <div class="span-price" v-show="popupData.renewObj.enRentedFor == 100"><span>租金：</span> <span>$ {{item.unitPrice.toLocaleString()}}</span> <span v-show="item.renewPeriodQty > 1"> x {{item.renewPeriodQty}}</span> <span v-show="item.qty > 1"> x {{item.qty}}</span></div>
                                                    <div class="span-price" v-show="popupData.renewObj.enRentedFor == 100 && item.renewSuppliesTotal > 0"><span>加租：</span> <span>$ {{item.renewSuppliesTotal.toLocaleString()}}</span></div>
                                                    <div class="span-price" v-show="popupData.renewObj.enRentedFor == 100"><span>小計：</span> <span>$ {{item.renewTotal.toLocaleString()}}</span></div>
                                                </div>
                                                <div v-show="item.renewTakebackFreightage > 0">
                                                    <div class="span-price">
                                                        <span :class="{'red':popupData.renewObj.isCodFreight}">回收運費：</span>
                                                        <span :class="{'red':popupData.renewObj.isCodFreight}">$ {{item.renewTakebackFreightage.toLocaleString()}}</span>
                                                        <span class="red" v-if="popupData.renewObj.isCodFreight">(佳醫代收)</span>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="renew-order-info">
                                        <div class="recycle-info" v-show="popupData.renewObj.isRecycle">
                                            <div class="list-box">
                                                退租申請日：
                                                <div class="input-date">
                                                    <date-picker value-type="YYYY-MM-DD"
                                                                 format="YYYY-MM-DD"
                                                                 placeholder="可收件日..."
                                                                 :default-value="new Date()"
                                                                 type="date"
                                                                 :input-attr="{name: 'applyDate', ref: 'applyDate'}"
                                                                 :disabled-date="disabledApplyDate"
                                                                 v-model="popupData.renewObj.applyDate">
                                                    </date-picker>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="renew-info" v-show="popupData.renewObj.enRentedFor == 100 && popupData.renewObj.total > 0">
                                            <div class="list-box" v-show="!popupData.renewObj.isCodFreight && popupData.renewObj.freightage > 0"><span>運費：</span> $ {{popupData.renewObj.freightage.toLocaleString()}}</div>
                                            <div class="list-box" v-show="popupData.renewObj.subTotal > 0"><span>租金合計：</span> $ {{popupData.renewObj.subTotal.toLocaleString()}}</div>
                                            <div class="list-box" v-show="popupData.renewObj.suppliesTotal > 0"><span>加租合計：</span> $ {{popupData.renewObj.suppliesTotal.toLocaleString()}}</div>
                                            <div class="list-box" v-show="popupData.renewObj.isRenew"><span>品項總計：</span><span class="red"> $ {{popupData.renewObj.total.toLocaleString()}}</span></div>
                                            <div v-if="popupData.renewObj.isCodFreight && popupData.renewObj.freightage > 0" class="red cod-freightage">
                                                <div class="list-box"><span>佳醫代收運費：</span> $ {{popupData.renewObj.freightage.toLocaleString()}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="block">
                                        <li class="btn m-auto btn-r-arrow step" @click="renewStep(1);"><a>上一步</a></li>
                                        <li class="btn m-auto btn-r-arrow x-hidden" @click="sendRenewOrder()"><a>送出訂單</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--修改訂單popup-->
        <div style="font-weight:normal;" :class="{'show': openOrderPopup, 'd-none': !openOrderPopup}">
            <div class="popup-sty">
                <div class="p-block">
                    <div id="p-paper" class="p-paper">
                        <div class="card">
                            <div class="x-btn"><a @click="openOrderPopup = false;"><img src="/assets/images/icons/icon_14.svg" /></a></div>
                            <ul class="card-body change-order">
                                <li class="font-bold">訂單編號：{{popupOrderData.orderObj.orderNum}} ({{popupOrderData.orderObj.rentedForString}})</li>
                                <li>日期：{{popupOrderData.orderObj.createDatetime}}</li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100">其它費用：<input class="form-control input" type="number" v-model="popupOrderData.orderObj.storeOtherFee" ref="storeOtherFee" @change="calculateOrder()" /></li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100" class="font-bold">承租人資訊</li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100">姓名：<input class="form-control input" type="text" v-model="popupOrderData.orderObj.tenantName" ref="tenantname" /></li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100">手機號碼：<input class="form-control input" type="tel" v-model="popupOrderData.orderObj.tenantMobile" ref="tenantmobile" maxlength="10" /></li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100" class="font-bold">使用人資訊</li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100">姓名：<input class="form-control input" type="text" v-model="popupOrderData.orderObj.delivery.receiver" ref="deliveryreceiver" /></li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100">為承租人之：<input class="form-control input" type="text" v-model="popupOrderData.orderObj.tenantRelation" ref="tenantrelation" /></li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100">手機號碼：<input class="form-control input" type="tel" v-model="popupOrderData.orderObj.delivery.mobile" ref="deliverymobile" maxlength="10" /></li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100">
                                    運送方式：
                                    <span v-for="item in ltShippingMethod" v-if="showShippingMethod(item)">
                                        <label class="radio-label" :for="'shippingmethod' + item.value">
                                            <input :id="'shippingmethod' + item.value" name="shippingMethod" type="radio"
                                                   :value="item.value" v-model="popupOrderData.orderObj.enShippingMethod" @change="calculateOrder()" />
                                            {{item.name}}
                                        </label>
                                    </span>
                                </li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100" v-show="popupOrderData.orderObj.enShippingMethod == 100">
                                    <ul>
                                        <li>
                                            取還門市：
                                            <span v-for="item in ltStores" v-if="popupOrderData.orderObj.delivery.storeId == item.id">{{item.shortName}}<span v-if="item.zipCode != null && item.zipCode != ''">  ({{item.county}}{{item.city}}{{item.address}})</span></span>
                                        </li>
                                    </ul>
                                </li>
                                <li v-if="popupOrderData.orderObj.enRentedFor == 100" v-show="popupOrderData.orderObj.enShippingMethod == 200">
                                    <ul>
                                        <li class="change-address">
                                            運送地址：
                                            <div id="twzipcode" class="wrap-sty twzipcode-order">
                                                <div class="arrow-select">
                                                    <select data-role="county" v-model="popupOrderData.orderObj.delivery.county" ref="ordercounty"></select>
                                                </div>
                                                <div class="arrow-select">
                                                    <select data-role="district" v-model="popupOrderData.orderObj.delivery.city" @change="changeCity('order')"></select>
                                                    <input type="hidden" data-role="zipcode" />
                                                </div>
                                                <input class="address" type="text" placeholder="地址..." v-model="popupOrderData.orderObj.delivery.address" ref="orderaddress" />
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li>備註：<textarea class="form-control" v-model="popupOrderData.orderObj.remark"></textarea></li>
                                <li v-if="popupOrderData.orderObj.enStatus == 210" class="pd-box">
                                    <div>產品搜尋：</div>
                                    <div class="pd-search">
                                        <div class="form-floating">
                                            <input type="search" class="form-control input" placeholder="請輸入品名..." v-model="product.query.keyword"
                                                   @change="product.query.keyword=$event.target.value; queryProduct()" @keypress="queryProduct();"
                                                   @keyup="product.query.keyword=$event.target.value; queryProduct()" />
                                        </div>
                                        <div class="p-btn b-seatch" @click="addProduct()"><a>加入</a></div>
                                    </div>
                                    <div class="list-group" v-if="product.query.keyword !== ''">
                                        <div v-for="(item, key) in product.list" :key="item.name" class="list-group-item" @click="clickProduct(item)">
                                            {{ item.name }}
                                        </div>
                                    </div>
                                    <div class="pd-list" v-for="(detailObj, orderIdx) in popupOrderData.orderObj.details.list" :key="detailObj.id">
                                        <a class="pd-img" :href="'/product/data/' + detailObj.productId">
                                            <img v-if="detailObj.coverImage != null && detailObj.coverImage.length > 0" :src="detailObj.coverImage" class="img">
                                        </a>
                                        <div class="pd-info">
                                            <div>{{detailObj.productName}}</div>
                                            <div v-show="showPriceInfo(popupOrderData.orderObj)">
                                                <span v-show="showConsumableFee(popupOrderData.orderObj, detailObj.consumableFee)">耗材：$ {{detailObj.consumableFee}}</span>
                                                <span v-show="showConsumableFee(popupOrderData.orderObj, detailObj.consumableFee) && detailObj.deposit > 0"> /  </span>
                                                <span v-show="detailObj.deposit > 0">押金：$ {{detailObj.deposit}}</span>
                                            </div>
                                            <div v-if="detailObj.ltSeatWidthAttrs !== null && detailObj.ltSeatWidthAttrs.length > 0">
                                                座寬：
                                                <span v-for="(item, attrIdx) in detailObj.ltSeatWidthAttrs"
                                                      v-show="item.availableQty > 0">
                                                    <label class="radio-label" :for="'_seatwidth_' + orderIdx + '_' + attrIdx + '_' + item.id">
                                                        <input :id="'_seatwidth_' + orderIdx + '_' + attrIdx + '_' + item.id" type="radio"
                                                               :value="item.id" v-model="detailObj.seatWidthAttrId" :checked="{'checked': item.id == detailObj.seatWidthAttrId}" @change="chaneDetailQty(detailObj)" />
                                                        {{item.name}}
                                                    </label>
                                                </span>
                                            </div>
                                            <div class="qty">
                                                數量：
                                                <select v-model="detailObj.qty" class="form-control input" @change="chaneDetailQty(detailObj)">
                                                    <option v-for="n in detailObj.availableQty" v-if="n <= 20">{{n}}</option>
                                                </select>
                                            </div>
                                            <div>
                                                計費方式：
                                                <span v-for="obj in ltPeriodTypes" v-if="(obj.value == 100 && detailObj.weeklyCharge > 0) || (obj.value == 200 && detailObj.monthlyCharge > 0)">
                                                    <label class="radio-label" :for="'periodTypes_' + orderIdx + '_' + obj.value + '_popup2'">
                                                        <input :id="'periodTypes_' + orderIdx + '_' + obj.value + '_popup2'" type="radio"
                                                               :value="obj.value" v-model="detailObj.enPeriodType" @change="changePeriodType(detailObj, obj.value, true)"
                                                               :checked="{'checked': obj.value == detailObj.enPeriodType}" />
                                                        {{obj.name}}計費
                                                        <span v-if="showPriceInfo(popupOrderData.orderObj) && (obj.value == 100 && detailObj.weeklyCharge > 0)"> $ {{detailObj.weeklyCharge.toLocaleString()}}</span>
                                                        <span v-if="showPriceInfo(popupOrderData.orderObj) && (obj.value == 200 && detailObj.monthlyCharge > 0)"> $ {{detailObj.monthlyCharge.toLocaleString()}}</span>
                                                    </label>
                                                </span>
                                            </div>
                                            <div>
                                                租借日期：
                                                <date-picker value-type="YYYY-MM-DD"
                                                             format="YYYY-MM-DD"
                                                             placeholder="開始時間..."
                                                             :default-value="new Date()"
                                                             type="date"
                                                             :input-attr="{name: 'startDate', ref: 'startDate'}"
                                                             :disabled-date="disabledStartDate"
                                                             @change="changeDate(detailObj)"
                                                             v-model="detailObj.startDate">
                                                </date-picker>
                                                ~
                                                <date-picker value-type="YYYY-MM-DD"
                                                             format="YYYY-MM-DD"
                                                             placeholder="結束時間..."
                                                             :default-value="new Date()"
                                                             type="date"
                                                             :input-attr="{name: 'endDate', ref: 'endDate'}"
                                                             :not-before="detailObj.startDate"
                                                             :disabled-date="disabledEndDate"
                                                             @change="countDays(detailObj)"
                                                             v-model="detailObj.endDate">
                                                </date-picker>
                                            </div>
                                            <div class="list-box" v-if="detailObj.ltRelationsGifts !== null && detailObj.ltRelationsGifts.length > 0">
                                                耗材包含：
                                                <span v-for="(obj, idx) in detailObj.ltRelationsGifts">
                                                    <span v-if="idx > 0">、</span>{{obj.productName}} x {{obj.bundleQty * detailObj.qty}}
                                                </span>
                                                <div class="red" v-show="showPriceInfo(popupOrderData.orderObj) && showCodConsumableFee(popupOrderData.orderObj, detailObj.consumableFee)">
                                                    佳醫代收：耗材費 x {{detailObj.qty}}
                                                    <span style="padding-left: 20px;">$ {{(detailObj.consumableFee * detailObj.qty).toLocaleString()}}</span>
                                                </div>
                                            </div>
                                            <div class="list-box" v-if="detailObj.ltRelationsBundles !== null && detailObj.ltRelationsBundles.length > 0">
                                                組合包含：
                                                <span v-for="(obj, idx) in detailObj.ltRelationsBundles">
                                                    <span v-if="idx > 0">、</span>{{obj.productName}} x {{obj.bundleQty * detailObj.qty}}
                                                </span>
                                            </div>
                                            <div class="list-box" v-if="detailObj.ltRelationsSupplies !== null && detailObj.ltRelationsSupplies.length > 0">
                                                額外加租：
                                                <div class="pd-list" v-for="obj in detailObj.ltRelationsSupplies" :key="obj.id">
                                                    <a class="pd-img" v-if="obj.coverImage != null && obj.coverImage.length > 0"><img :src="obj.coverImage" class="img"></a>
                                                    <div class="pd-info">
                                                        <div>{{obj.productName}}</div>
                                                        <span class="price" v-if="showPriceInfo(popupOrderData.orderObj) && detailObj.enPeriodType == 100 && obj.weeklyCharge > 0">$ {{obj.weeklyCharge}}/週</span>
                                                        <span class="price" v-if="showPriceInfo(popupOrderData.orderObj) && detailObj.enPeriodType == 200 && obj.monthlyCharge > 0">$ {{obj.monthlyCharge}}/月</span>
                                                        <span class="qty">
                                                            數量：
                                                            <select v-model="obj.buyQty" class="form-control input" @change="calculateOrder()" v-show="obj.availableQty > 0">
                                                                <option>0</option>
                                                                <option v-for="n in obj.availableQty" v-if="n <= detailObj.qty && n <= 20">{{n}}</option>
                                                            </select>
                                                            <span class="qty" v-if="obj.availableQty <= 0">無庫存</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="list-box" v-if="detailObj.ltRelationsAdditions !== null && detailObj.ltRelationsAdditions.length > 0">
                                                額外加購：
                                                <div class="pd-list" v-for="obj in detailObj.ltRelationsAdditions" :key="obj.id">
                                                    <a class="pd-img" v-if="obj.coverImage != null && obj.coverImage.length > 0"><img :src="obj.coverImage" class="img"></a>
                                                    <div class="pd-info">
                                                        <div>{{obj.productName}}</div>
                                                        <span class="price" v-if="showPriceInfo(popupOrderData.orderObj) && obj.salePrice > 0">$ {{obj.salePrice}}</span>
                                                        <span class="qty">
                                                            數量：
                                                            <select v-model="obj.buyQty" class="form-control input" @change="calculateOrder()" v-show="obj.availableQty > 0">
                                                                <option>0</option>
                                                                <option v-for="n in obj.availableQty" v-if="n <= 20">{{n}}</option>
                                                            </select>
                                                            <span class="qty" v-if="obj.availableQty <= 0">無庫存</span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pd-subtotal">
                                            <span class="span-price" v-show="showPriceInfo(popupOrderData.orderObj)">
                                                <span>小計：<span class="red">$ {{detailObj.total.toLocaleString()}}</span></span>
                                            </span>
                                        </div>
                                        <div class="p-btn delete"><a @click="removeDetail(orderIdx)">刪除</a></div>
                                    </div>
                                </li>
                                <li v-show="showPriceInfo(popupOrderData.orderObj)">
                                    <ul class="info-bottom">
                                        <li>
                                            <ul class="cost-box" style="display: flex; flex-wrap: wrap; align-items: center;">
                                                <li><div>租金</div><div class="pt-10 black">$ {{popupOrderData.orderObj.details.subTotal.toLocaleString()}}</div></li>
                                                <li v-show="showConsumableFee(popupOrderData.orderObj, popupOrderData.orderObj.details.consumableFee)" style="font-size:28px;">+</li>
                                                <li v-show="showConsumableFee(popupOrderData.orderObj, popupOrderData.orderObj.details.consumableFee)"><div>耗材費</div><div class="pt-10 black">$ {{popupOrderData.orderObj.details.consumableFee.toLocaleString()}}</div></li>
                                                <li v-show="popupOrderData.orderObj.details.deposit > 0" style="font-size:28px;">+</li>
                                                <li v-show="popupOrderData.orderObj.details.deposit > 0"><div>押金</div><div class="pt-10 black">$ {{popupOrderData.orderObj.details.deposit.toLocaleString()}}</div></li>
                                                <li v-show="!popupOrderData.orderObj.isCodFreight" style="font-size:28px;">+</li>
                                                <li v-show="!popupOrderData.orderObj.isCodFreight"><div>運費</div><div class="pt-10 black">$ {{popupOrderData.orderObj.details.freightage.toLocaleString()}}</div></li>
                                                <li v-show="popupOrderData.orderObj.details.suppliesTotal > 0" style="font-size:28px;">+</li>
                                                <li v-show="popupOrderData.orderObj.details.suppliesTotal > 0"><div>加租</div><div class="pt-10 black">$ {{popupOrderData.orderObj.details.suppliesTotal.toLocaleString()}}</div></li>
                                                <li v-show="popupOrderData.orderObj.details.additionsTotal > 0" style="font-size:28px;">+</li>
                                                <li v-show="popupOrderData.orderObj.details.additionsTotal > 0"><div>加購</div><div class="pt-10 black">$ {{popupOrderData.orderObj.details.additionsTotal.toLocaleString()}}</div></li>
                                                <li v-show="popupOrderData.orderObj.storeOtherFee > 0" style="font-size:28px;">+</li>
                                                <li v-show="popupOrderData.orderObj.storeOtherFee > 0"><div>其它費用</div><div class="pt-10 black">$ {{popupOrderData.orderObj.storeOtherFee.toLocaleString()}}</div></li>
                                                <li style="font-size:28px;">=</li>
                                                <li><div>總計</div><div class="pt-10 black">$ {{popupOrderData.orderObj.total.toLocaleString()}}</div></li>
                                                <li class="red" v-show="showPriceInfo(popupOrderData.orderObj) && popupOrderData.orderObj.codFee > 0">
                                                    <div>佳醫代收{{popupOrderData.orderObj.codInfo}}</div><div class="red"><strong>$ {{popupOrderData.orderObj.codFee.toLocaleString()}}</strong></div>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="block" v-if="popupOrderData.orderObj.enStatus == 210">
                                <div class="btn m-auto btn-r-arrow" @click="updateOrder"><a>確認修改</a></div>
                                <div class="btn delete-btn" @click="deleteOrder()"><a>刪除訂單</a></div>
                            </div>
                            <div class="block" v-else><div class="btn m-auto btn-sell-out" @click="openOrderPopup = false; overlayClose();"><a>{{popupOrderData.orderObj.statusString}}, 不可修改。</a></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Content E-->
    </div>
	<footer class="gold-bar">
		<div class="w1300">
			<div class="clear text-center">
				<div>
					<ul class="footer-menu">
						<li><a href="#">我要租輔具</a></li>
						<li><a href="#">最新消息</a></li>
						<li><a href="#">關於我們</a></li>
						<li><a href="#">常見問題</a></li>
						<li><a href="#">出租排行榜</a></li>
					</ul>
					<ul class="footer-menu">
						<li><a>聯絡我們</a></li>
						<li class="footer-t-sty">
							<div>地址：新北市中和區中正路880號17樓</div>
							<div>信箱：ULTRACLEAN@excelsior.com.tw</div>
							<div>電話：03-328-3911</div>
							<div>傳真：03-328-7588</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="text text-center">
				<div class="g-line"></div>
				<div>Copyright ©2023 佳醫創照健康</div>
			</div>
		</div>
	</footer>

	<!--FinalScript S-->
	<script type="text/javascript" src="/assets/js/twzipcode.latest.js"></script>
	<script type="text/javascript" src="/assets/js/twzipcode.assistive.js?tf=202507141210"></script>
	<script src="member.js?tf=202601280126" type="module"></script>
	<!--FinalScript E-->
</body>
</html>