<!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" />
	<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>
		.cart-list .radio-sty input[type=radio] { zoom: 1.5; }
        .cart-list .p-list .pd .pd-price { padding: 0; }
        .cart-list .p-list .pd .pd-price .span-price { display: table-cell !important; width: 45%; padding: 0 20px; color: #285F91; vertical-align: middle; }
		.cart-list .p-list .pd .pd-price .span-price span { line-height: 30px; }
		.cart-list .stock-list .pd .pd-info { width: 55%; }
		.cart-list .stock-list .pd .place { width: 36%; }
		.cart-list .stock-list .pd .place .pd-btn { width: auto; display: block; }
		.cart-list .stock-list .pd .place .pd-btn .btn { display: inline-block; }
		.cart-list .stock-list .pd .place .stocklist, 
		.cart-list .stock-list .pd .other-pd .stocklist { margin: 10px 10px 5px; border: solid 1px #999; border-radius: 5px; padding: 5px 10px; }
		.popup-sty .card .card-body .product .detail { max-width: unset; padding: 0 30px; }
		.popup-sty .card .card-body .product .detail .pd-img { width: 15%; max-width: 100px; margin: 0 1em;  }
        .popup-sty .list-box .num { padding-bottom: 1em; }
		.popup-sty .list-box .num .num-btn { padding: 0; }
        .popup-sty .list-box .stock-block { width: 85%; text-align: left; padding: 0; }
        .popup-sty .list-box .stock-block .btn { width: 45%; margin: 0 10px 10px; }
        .popup-sty .list-box .stock-block .btn-return { padding: 0; }
        .popup-sty .list-box .stock-block .btn-plus { padding: 0 0 0 20px; text-align: left; }
        .popup-sty .list-box .action-block { width: 70%; margin: 0 auto; text-align: center; }
        .popup-sty .block .btn-return { background-color: #d5d5d5; }
		.popup-sty .block .btn-return a { color: #333; }
        .cart-user-info .detail .d-list textarea { width: 100%; font-size: 20px; line-height: 1.5; color: #666666; border: 0; }
        .p-list .pd span { line-height: 30px; }
        @media (max-width: 768px) {
            .popup-sty .list-box .stock-block { width: 100%; }
			.popup-sty .list-box .stock-block .btn { width: 100%; margin: 0 10px 10px; }
        }
		.tenantRelation { display: inline-block !important; width: 80% !important; }
        .popup-sty .card-body .detail .list-box .check-btn input[type=checkbox] {
            -ms-transform: scale(1.5); /* IE */
            -moz-transform: scale(1.5); /* FF */
            -webkit-transform: scale(1.5); /* Safari and Chrome */
            -o-transform: scale(1.5); /* Opera */
            margin: 5px;
        }
	</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 class="default-w content-p-page">
			<div class="content">
				<div class="cart-list" v-if="currentStep == 1">
					<div v-if="cartInfo.ltCartItems != null && cartInfo.ltCartItems.length > 0">
						<div class="title">租借目的<span class="red">*</span></div>
						<div class="input-group rented-for">
							<div class="detail">
								<div class="d-list radio-sty">
									<nav>
										<span v-for="item in rentedFors">
											<input :id="'rentedFor' + item.value" name="rentedFor" type="radio" :value="item.value" v-model="cartInfo.enRentedFor" @change="changeRentedFor()" />
											<label class="radio-label" :for="'rentedFor' + item.value">{{item.name}}</label>
										</span>
									</nav>
								</div>
							</div>
						</div>
						<div class="title">輔具租用清單</div>
						<div class="p-list product-info">
							<div class="pd" v-for="(item, index) in cartInfo.ltCartItems">
								<span class="pd-img">
									<a :href="'/product/data/' + item.productId"><img :src="item.coverImage" /></a>
								</span>
								<span class="pd-info">
									<span><a :href="'/product/data/' + item.productId">{{item.productName}}</a></span>
									<span v-if="item.ltSeatWidthAttrs !== null && item.ltSeatWidthAttrs.length > 0">
										座寬：<span v-for="obj in item.ltSeatWidthAttrs" v-if="item.seatWidthAttrId == obj.id">{{obj.name}}</span>
									</span>
									<span><span>數量：{{item.qty}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>天數：{{item.days}} 天 ({{item.periodTypeString}})</span></span>
									<span>租借日期:{{item.startDate}} ~ {{item.endDate}}</span>
								</span>
								<span class="pd-price">
									<span v-show="showPriceInfo()">
										<span class="span-price">
											<span>租金：${{item.subTotal.toLocaleString()}}</span>
											<span v-show="showConsumableFee(item.consumableFee)">耗材：${{(item.consumableFee * item.qty).toLocaleString()}}</span>
											<span>押金：${{(item.deposit * item.qty).toLocaleString()}}</span>
										</span>
										<span class="span-price">
											<span>小計：<span class="red">${{item.total.toLocaleString()}}</span></span>
										</span>
									</span>
								</span>
								<span class="pd-btn">
									<span @click="deleteProduct(item)" class="delete-btn btn"><a>刪除</a></span>
									<span @click="openPopup(item, 'prod');" class="revise-btn btn"><a>修改</a></span>
								</span>
								<div class="other-pd" v-if="item.ltGifts !== null && item.ltGifts.length > 0">
									<div class="text">包含品項：</div>
									<div class="pd-wrap">
										<a v-for="(pd, idx) in item.ltGifts" class="list">
											<img :src="pd.coverImage" v-if="pd.coverImage != null && pd.coverImage != ''">
											<div class="text-wrap">
												<div class="name">{{pd.productName}}</div>
												<div>數量:{{pd.buyQty}}</div>
											</div>
										</a>
									</div>
									<div class="red" v-if="showCodConsumableFee(item.consumableFee)">
										佳醫代收：耗材費 x {{item.qty}}
										<span style="padding-left: 20px;">${{(item.consumableFee * item.qty).toLocaleString()}}</span>
									</div>
								</div>
								<div class="other-pd" v-if="item.suppliesBuyQty > 0 && item.ltSupplies !== null && item.ltSupplies.length > 0">
									<div class="text">加租品項：</div>
									<div class="pd-wrap">
										<a v-for="(pd, idx) in item.ltSupplies" v-if="pd.buyQty > 0" class="list">
											<img :src="pd.coverImage" v-if="pd.coverImage != null && pd.coverImage != ''">
											<div class="text-wrap">
												<div class="name">{{pd.productName}}</div>
												<div><span class="red" v-show="showPriceInfo() && pd.unitPrice > 0">${{pd.unitPrice * item.periodQty}} &nbsp;&nbsp; </span>數量:{{pd.buyQty}}</div>
											</div>
										</a>
									</div>
								</div>
								<div class="other-pd" v-if="item.additionsBuyQty > 0 && item.ltAdditions !== null && item.ltAdditions.length > 0">
									<div class="text">加購品項：</div>
									<div class="pd-wrap">
										<a v-for="(pd, idx) in item.ltAdditions" v-if="pd.buyQty > 0" class="list">
											<img :src="pd.coverImage" v-if="pd.coverImage != null && pd.coverImage != ''">
											<div class="text-wrap">
												<div class="name">{{pd.productName}}</div>
												<div><span class="red" v-show="showPriceInfo()">${{pd.unitPrice}} &nbsp;&nbsp; </span>數量:{{pd.buyQty}}</div>
											</div>
										</a>
									</div>
								</div>
							</div>
						</div>
						<div class="block">
							<div class="btn m-auto btn-r-arrow" @click="goStep(2)"><a>下一步</a></div>
						</div>
					</div>
					<div v-else>
						<div class="title">輔具租用清單</div>
						<div class="p-list">
							<div class="tip-text">購物車沒有產品<span><a href="/">回首頁>> </a></span></div>
						</div>
					</div>
				</div>
				<div class="cart-list" v-if="currentStep == 2">
					<div class="title">輔具租用-選擇出貨點</div>
					<div class="p-list stock-list">
						<div class="pd" v-for="(item, index) in cartInfo.ltCartItems">
							<span class="pd-img"><a :href="'/product/data/' + item.productId"><img :src="item.coverImage" /></a></span>
							<span class="pd-info">
								<span><a :href="'/product/data/' + item.productId">{{item.productName}}</a></span>
								<span v-if="item.ltSeatWidthAttrs !== null && item.ltSeatWidthAttrs.length > 0">
									座寬：<span v-for="obj in item.ltSeatWidthAttrs" v-if="item.seatWidthAttrId == obj.id">{{obj.name}}</span>
								</span>
								<span><span>數量：{{item.qty}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>天數：{{item.days}} 天 ({{item.periodTypeString}})</span></span>
								<span>租借日期:{{item.startDate}} ~ {{item.endDate}}</span>
							</span>
							<div class="place">
								<nav class="radio-sty">
									<span v-for="place in ltShipPlaces">
										<input :disabled="!item.allowShipFromStore" :id="'shipPlace' + index + place.value"
											   :name="'shipPlace' + index" type="radio" :value="place.value" v-model="item.enShipPlace" @change="changeShipPlace(item)" />
										<label class="radio-label" :for="'shipPlace' + index + place.value">{{place.name}}</label>
									</span>
								</nav>
								<span class="pd-btn" v-show="item.enShipPlace == 200">
									<span @click="openPopup(item, 'stock');" class="revise-btn btn"><a>選擇產編</a></span>
									<span class="red" v-show="notifyPicked(item)">已選擇的數量與租借數量不符</span>
								</span>
								<span v-show="item.enShipPlace == 200">
									<span v-show="item.enProductType == 100" v-for="stock in item.stocks" class="stocklist">{{stock.propertyNo}}</span>
									<span v-show="item.enProductType == 200" v-for="setObj in item.ltProductSets">
										<span v-for="stock in setObj.stocks" class="stocklist">{{stock.propertyNo}}</span>
									</span>
								</span>
							</div>
							<div class="other-pd" v-if="item.ltGifts !== null && item.ltGifts.length > 0">
								<div class="text">包含品項：</div>
								<div class="pd-wrap">
									<a v-for="(pd, idx) in item.ltGifts" class="list">
										<img :src="pd.coverImage" v-if="pd.coverImage != null && pd.coverImage != ''">
										<div class="text-wrap">
											<div class="name">{{pd.productName}}</div>
											<div>數量:{{pd.buyQty}}</div>
											<span v-show="item.enShipPlace == 200">
												<span v-for="stock in pd.stocks" class="stocklist">{{stock.propertyNo}}</span>
											</span>
										</div>
									</a>
								</div>
							</div>
							<div class="other-pd" v-if="item.suppliesBuyQty > 0 && item.ltSupplies !== null && item.ltSupplies.length > 0">
								<div class="text">加租品項：</div>
								<div class="pd-wrap">
									<a v-for="(pd, idx) in item.ltSupplies" v-if="pd.buyQty > 0" class="list">
										<img :src="pd.coverImage" v-if="pd.coverImage != null && pd.coverImage != ''">
										<div class="text-wrap">
											<div class="name">{{pd.productName}}</div>
											<div><span class="red" v-show="showPriceInfo() && pd.unitPrice > 0">${{pd.unitPrice * item.periodQty}} &nbsp;&nbsp; </span>數量:{{pd.buyQty}}</div>
											<span v-show="item.enShipPlace == 200">
												<span v-for="stock in pd.stocks" class="stocklist">{{stock.propertyNo}}</span>
											</span>
										</div>
									</a>
								</div>
							</div>
							<div class="other-pd" v-if="item.additionsBuyQty > 0 && item.ltAdditions !== null && item.ltAdditions.length > 0">
								<div class="text">加購品項：</div>
								<div class="pd-wrap">
									<a v-for="(pd, idx) in item.ltAdditions" v-if="pd.buyQty > 0" class="list">
										<img :src="pd.coverImage" v-if="pd.coverImage != null && pd.coverImage != ''">
										<div class="text-wrap">
											<div class="name">{{pd.productName}}</div>
											<div><span class="red" v-show="showPriceInfo()">${{pd.unitPrice}}</span> &nbsp;&nbsp; 數量:{{pd.buyQty}}</div>
											<span v-show="item.enShipPlace == 200">
												<span v-for="stock in pd.stocks" class="stocklist">{{stock.propertyNo}}</span>
											</span>
										</div>
									</a>
								</div>
							</div>
						</div>
					</div>
					<div class="block">
						<div class="btn m-auto btn-r-arrow step" @click="goStep(1)"><a>上一步</a></div>
						<div class="btn m-auto btn-r-arrow" @click="goStep(3)"><a>下一步</a></div>
					</div>
				</div>
				<div class="cart-user-info" v-if="currentStep == 3">
					<div class="title">輔具租用</div>
					<div class="input-group">
						<div class="detail">
							<div class="d-list">
								<span>租借目的：</span>
								<span v-for="item in rentedFors" v-if="item.value == cartInfo.enRentedFor">{{item.name}}</span>
							</div>
							<div class="d-list" v-if="cartInfo.enRentedFor == 100">
								<span>其它費用：<span class="red">*</span></span>
								<span>
									<input type="number" v-model="cartInfo.storeOtherFee" ref="storeOtherFee" placeholder="請輸入其它費用金額，如無請填 0" />
								</span>
							</div>
							<div v-if="cartInfo.enRentedFor == 100">
								<span>（請輸入其它費用金額，如無請填 0）</span>
								<div>&nbsp;</div>
							</div>
							<div v-if="cartInfo.enRentedFor == 100">
								<div class="title">
									承租人資訊
								</div>
								<div class="d-list">
									<span>姓名：<span class="red">*</span></span>
									<input type="text" placeholder="請輸入..." v-model="cartInfo.tenantName" ref="tenantname" />
								</div>
								<div class="d-list">
									<span>手機號碼：<span class="red">*</span></span>
									<input type="tel" placeholder="請輸入..." v-model="cartInfo.tenantMobile" ref="tenantmobile" maxlength="10" />
								</div>
								<div class="title">
									使用人資訊
									<span class="check-btn">
										<input id="copy_delivery_tenant_info" type="checkbox" :checked="copy_delivery_tenant_info" @click="copyData($event.target.checked)" />
										<label for="copy_delivery_tenant_info">帶入承租人資料</label>
									</span>
								</div>
								<div class="d-list">
									<span>姓名：<span class="red">*</span></span>
									<input type="text" placeholder="請輸入..." v-model="cartInfo.delivery.receiver" ref="deliveryreceiver" />
								</div>
								<div class="d-list">
									<span>為承租人之：<span class="red">*</span></span>
									<div>
										<input type="text" placeholder="請輸入..." v-model="cartInfo.tenantRelation" ref="tenantrelation" class="tenantRelation" />（關係）
									</div>
								</div>
								<div class="d-list">
									<span>手機號碼：<span class="red">*</span></span>
									<input type="tel" placeholder="請輸入..." v-model="cartInfo.delivery.mobile" ref="deliverymobile" maxlength="10" />
								</div>
							</div>
							<div class="d-list radio-sty">
								<span class="name">運送方式：<span class="red">*</span></span>
								<nav>
									<span v-for="item in ltShippingMethod" v-if="showShippingMethod(item)">
										<input :id="'shippingmethod' + item.value" name="shippingMethod" type="radio"
											   :value="item.value" v-model="cartInfo.enShippingMethod" @change="calculate()" />
										<label class="radio-label" :for="'shippingmethod' + item.value">{{item.name}}</label>
									</span>
								</nav>
							</div>
							<div class="d-list select-sty" v-show="cartInfo.enShippingMethod == 100">
								<span class="name">取還門市：</span>
								<div class="wrap-sty">
									<div>[{{storeObj.shortName}}] <br />{{storeObj.county}}{{storeObj.city}}{{storeObj.address}}</div>
								</div>
							</div>
							<div class="d-list select-sty" v-show="cartInfo.enShippingMethod == 200">
								<span class="name">運送地址：<span class="red">*</span></span>
								<div id="twzipcode" class="wrap-sty">
									<div class="arrow-select pb-15">
										<select data-role="county" v-model="cartInfo.delivery.county" ref="county"></select>
									</div>
									<div class="arrow-select pb-15">
										<select data-role="district" v-model="cartInfo.delivery.city" @change="changeCity()"></select>
										<input type="hidden" data-role="zipcode" />
									</div>
									<input class="address" type="text" placeholder="地址..." v-model="cartInfo.delivery.address" ref="address" />
								</div>
							</div>
							<div class="d-list">
								<span>備註：</span>
								<textarea class="memo" v-model="cartInfo.remark"></textarea>
							</div>
						</div>
						<div class="consideration">
							<div class="c-title">輔具品項</div>
							<div class="price-list block">
								<div v-if="cartInfo.ltCartItems != null && cartInfo.ltCartItems.length > 0">
									<div v-for="(item, index) in cartInfo.ltCartItems" class="cart-items">
										<span><a :href="'/product/data/' + item.productId"><img :src="item.coverImage" /></a><br />數量：{{item.qty}}</span>
									</div>
								</div>
							</div>
							<p>&nbsp;</p>
							<div v-if="cartInfo.enRentedFor == 100" class="c-title">費用明細</div>
							<div v-if="cartInfo.enRentedFor == 100" class="price-list block price">
								<div class="line text-bt" v-if="!cartInfo.isCodFreight">
									<span>運費：</span>
									<span v-if="cartInfo.enShippingMethod == -1">請選擇運送方式</span>
									<span v-else-if="cartInfo.enShippingMethod == 200 && cartInfo.freightAreaId <= 0">請填寫運送地址</span>
									<span v-else>$ {{cartInfo.freightage.toLocaleString()}}</span>
								</div>
								<div class="bottom-line" v-if="!cartInfo.isCodFreight"></div>
								<div class="line text-bt"><span>租金合計<em style="font-size:16px;">(含品項)</em>：</span><span>$ {{cartInfo.subTotal.toLocaleString()}}</span></div>
								<div class="line text-bt" v-show="showConsumableFee(cartInfo.consumableFee)"><span>耗材合計：</span><span>${{cartInfo.consumableFee.toLocaleString()}}</span></div>
								<div class="line text-bt"><span>押金合計：</span><span>$ {{cartInfo.deposit.toLocaleString()}}</span></div>
								<div class="line text-bt" v-show="cartInfo.suppliesTotal > 0"><span>加租合計：</span><span>$ {{cartInfo.suppliesTotal.toLocaleString()}}</span></div>
								<div class="line text-bt" v-show="cartInfo.additionsTotal > 0"><span>加購合計：</span><span>$ {{cartInfo.additionsTotal.toLocaleString()}}</span></div>
								<div class="line text-bt" v-show="cartInfo.storeOtherFee > 0"><span>其它費用：</span><span>$ {{cartInfo.storeOtherFee.toLocaleString()}}</span></div>
								<div class="bottom-line"></div>
								<div class="line text-bt"><span>品項總計：</span><span class="red">$ {{(cartInfo.total + parseFloat(cartInfo.storeOtherFee)).toLocaleString()}}</span></div>
							</div>
							<p>&nbsp;</p>
							<div v-if="showCod()" class="c-title">佳醫代收</div>
							<div v-if="showCod()" class="price-list block price">
								<div class="line text-bt" v-if="cartInfo.isCodConsumableFee && cartInfo.consumableFee > 0">
									<span>耗材費</span><span>$ {{cartInfo.consumableFee.toLocaleString()}}</span>
								</div>
								<div class="line text-bt" v-if="cartInfo.isCodFreight">
									<span>運費：</span>
									<span v-if="cartInfo.enShippingMethod == -1">請選擇運送方式</span>
									<span v-else-if="cartInfo.enShippingMethod == 200 && cartInfo.freightAreaId <= 0">請填寫運送地址</span>
									<span v-else>$ {{cartInfo.freightage.toLocaleString()}}</span>
								</div>
								<div class="bottom-line"></div>
								<div class="line text-bt"><span>代收總計：</span><span class="red">$ {{totalCod().toLocaleString()}}</span></div>
							</div>
						</div>
					</div>
					<div class="block">
						<div class="btn m-auto btn-r-arrow step" @click="goStep(2)"><a>上一步</a></div>
						<div class="btn m-auto btn-r-arrow" @click="sendOrder"><a>送出訂單</a></div>
					</div>
				</div>
				<div class="finish-page" v-if="currentStep == 4">
					<div class="text">訂單已送出。</div>
					<div class="block" v-show="orderId != null && orderId > 0">
						<div class="btn m-auto btn-r-arrow"><a :href="'/store/member?t=order&oid=' + orderId">查看訂單</a></div>
					</div>
					<div class="block">
						<div class="btn m-auto btn-r-arrow"><a href="/">回到首頁</a></div>
					</div>
				</div>
			</div>
		</div>
		<!--popup S-->
		<div id="popupBlock" style="font-weight:normal;" class="d-none" :class="{'show': popup}">
			<div class="popup-sty" v-if="popupData != null && popupData.productId > 0">
				<div class="p-block">
					<div id="p-paper" class="p-paper">
						<div class="card">
							<div class="x-btn"><button @click="closePopup"><img src="/assets/images/icons/icon_14.svg" /></button></div>
							<div class="card-body">
								<div class="title">品項：{{popupData.productName}}</div>
								<!--輔具租借異動-->
								<div v-show="popupType == 'prod'" class="product">
									<div class="detail">
										<div v-if="popupData.ltSeatWidthAttrs !== null && popupData.ltSeatWidthAttrs.length > 0">
											<div class="list-box radio-sty">
												座寬：
												<nav>
													<span v-for="item in popupData.ltSeatWidthAttrs" :class="{'checked': popupData.seatWidthAttrId == item.id}"
														  v-show="item.availableQty > 0">
														<input :id="item.id + '_seatwidth2'" name="seatwidth" type="radio" :value="item.id" v-model="popupData.seatWidthAttrId" @change="qtyNumber" />
														<label class="radio-label" :for="item.id + '_seatwidth2'">{{item.name}}</label>
													</span>
												</nav>
											</div>
										</div>
										<div class="list-box num">
											租借數量：
											<div class="num-btn">
												<button class="minus" @click="numMinus">-</button>
												<input id="p-num" type="number" v-model="popupData.qty" v-on:input="qtyNumber" ref="qty" />
												<button class="plus" @click="numPlus">+</button>
											</div>
										</div>
										<div class="list-box radio-sty">
											計費方式：
											<nav>
												<span v-for="item in ltPeriodTypes" :class="{'checked': popupData.enPeriodType == item.value}"
													  v-show="(item.value == 100 && popupData.weeklyCharge > 0) || (item.value == 200 && popupData.monthlyCharge > 0)">
													<input :id="item.value + '_popup2' " name="periodType" type="radio" :value="item.value" @click="changePeriodType(item, true)" />
													<label class="radio-label" :for="item.value + '_popup2'">{{item.name}}計費</label>
												</span>
											</nav>
										</div>
										<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: 'startDate', ref: 'startDate'}"
															 :disabled-date="disabledStartDate"
															 @change="changeDate()"
															 v-model="popupData.startDate">
												</date-picker>
												~
											</div>
											<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: 'endDate', ref: 'endDate'}"
															 :not-before="popupData.startDate"
															 :disabled-date="disabledEndDate"
															 @change="countDays()"
															 v-model="popupData.endDate">
												</date-picker>
											</div>
										</div>
										<div class="list-box" v-if="popupData.ltGifts !== null && popupData.ltGifts.length > 0">
											耗材包含：
											<span v-for="(item, idx) in popupData.ltGifts">
												<span v-if="idx > 0">、</span>{{item.productName}} x {{item.bundleQty * popupData.qty}}
											</span>
										</div>
										<div class="list-box red" v-show="showCodConsumableFee(popupData.consumableFee)">
											佳醫代收：耗材費 x {{popupData.qty}}
											<span style="padding-left: 20px;">${{(popupData.consumableFee * popupData.qty).toLocaleString()}}</span>
										</div>
										<div v-if="userData.type == 200 && popupData.isElectricBed" class="list-box">
											<span class="check-btn">
												<input id="is_added_airmattress" type="checkbox" :checked="popupData.isAddedAirMattress" @change="popupData.isAddedAirMattress = $event.target.checked;" />
												<label for="is_added_airmattress">已加租氣墊床</label>
											</span>
										</div>
										<div class="list-box" v-if="popupData.ltSupplies !== null && popupData.ltSupplies.length > 0">
											額外加租：
											<div v-for="item in popupData.ltSupplies" :key="item.id" class="consumables-item">
												<a class="pic" :href="item.coverImage" v-if="item.coverImage != null && item.coverImage != ''" target="_blank"><img :src="item.coverImage" /></a>
												<a class="name" :href="item.coverImage">{{item.productName}}</a>
												<span class="price" v-if="showPriceInfo() && popupData.enPeriodType == 100 && item.weeklyCharge > 0">${{item.weeklyCharge}}/週</span>
												<span class="price" v-if="showPriceInfo() && popupData.enPeriodType == 200 && item.monthlyCharge > 0">${{item.monthlyCharge}}/月</span>
												<select class="select" v-model="item.buyQty" @change="countDays()" v-show="item.availableQty > 0">
													<option>0</option>
													<option v-for="num in item.availableQty" v-if="num <= popupData.qty">{{num}}</option>
												</select>
												<div v-if="item.availableQty <= 0">無庫存</div>
											</div>
										</div>
										<div class="list-box" v-if="popupData.ltAdditions !== null && popupData.ltAdditions.length > 0">
											額外加購：
											<div v-for="item in popupData.ltAdditions" :key="item.id" class="consumables-item">
												<a class="pic" :href="item.coverImage" v-if="item.coverImage != null && item.coverImage != ''" target="_blank"><img :src="item.coverImage" /></a>
												<a class="name">{{item.productName}}</a>
												<span class="price" v-if="showPriceInfo() && item.salePrice > 0">${{item.salePrice}}</span>
												<select class="select" v-model="item.buyQty" @change="countDays()" v-show="item.availableQty > 0">
													<option>0</option>
													<option v-for="num in item.availableQty" v-if="num <= 10">{{num}}</option>
												</select>
												<div v-if="item.availableQty <= 0">無庫存</div>
											</div>
										</div>
										<div class="block">
											<div class="btn m-auto btn-plus" v-show="!showPriceInfo()"><a @click="saveProduct()">修改</a></div>
										</div>
									</div>
									<div class="consideration" v-show="showPriceInfo()">
										<div class="c-title">費用總計</div>
										<div class="price-list block">
											<div class="line text-bt"><span>租借時間：{{popupData.days}}天</span></div>
											<div class="line"><span>{{popupData.periodTypeString}}單價 x <span v-if="popupData.enPeriodType == 100">週數</span><span v-else>月份</span></span><span>$ {{popupData.unitPrice.toLocaleString()}} x {{popupData.periodQty}}</span></div>
											<div class="line"><span>輔具租金 x {{popupData.qty}}</span><span>$ {{(popupData.unitPrice * popupData.periodQty * popupData.qty).toLocaleString()}}</span></div>
											<div class="line" v-show="showConsumableFee(popupData.consumableFee)"><span>耗材費 x {{popupData.qty}}</span><span>$ {{(popupData.consumableFee * popupData.qty).toLocaleString()}}</span></div>
											<div class="line"><span>輔具押金 x {{popupData.qty}}</span><span>$ {{(popupData.deposit * popupData.qty).toLocaleString()}}</span></div>
											<div class="line" v-show="popupData.suppliesBuyQty > 0 && popupData.suppliesTotal > 0"><span>額外加租</span><span>$ {{popupData.suppliesTotal.toLocaleString()}}</span></div>
											<div class="line" v-show="popupData.additionsBuyQty > 0"><span>額外加購</span><span>$ {{popupData.additionsTotal.toLocaleString()}}</span></div>
											<div class="bottom-line"></div>
											<div class="line text-bt"><span>租金總計：</span><span>${{popupData.subTotal.toLocaleString()}}</span></div>
											<div class="line text-bt" v-show="showConsumableFee(popupData.consumableFee)"><span>耗材總計：</span><span>${{(popupData.consumableFee * popupData.qty).toLocaleString()}}</span></div>
											<div class="line text-bt"><span>押金總計：</span><span>${{(popupData.deposit * popupData.qty).toLocaleString()}}</span></div>
											<div class="line text-bt" v-show="popupData.suppliesBuyQty > 0 && popupData.suppliesTotal > 0"><span>加租總計</span><span>$ {{popupData.suppliesTotal.toLocaleString()}}</span></div>
											<div class="line text-bt" v-show="popupData.additionsBuyQty > 0"><span>加購總計</span><span>$ {{popupData.additionsTotal.toLocaleString()}}</span></div>
											<div class="bottom-line"></div>
											<div class="line text-bt"><span>品項總計：</span><span class="red">${{popupData.total.toLocaleString()}}</span></div>
											<div class="btn m-auto btn-plus pd-h"><a @click="saveProduct()">修改</a></div>
										</div>
									</div>
								</div>
								<!--選擇產編-->
								<div v-if="popupType == 'stock'" class="product">
									<div class="detail">
										<div v-if="popupData.enProductType == 100">
											<div class="list-box">
												<span class="pd-img"><img :src="popupData.coverImage" /></span>
												<div class="block stock-block">
													<div>{{popupData.productName}} x {{popupData.qty}}</div>
													<div class="num">
														<div class="num-btn">
															租借 {{popupData.qty}}／
															已選 <input id="p-num" type="number" :value="popupData.stocks.length" disabled />
														</div>
														<div class="red" v-if="notifyPickedQty(popupData, popupData.qty)">已選擇的數量與租借數量不符</div>
													</div>
													<div v-for="stock in ltStoreStocks" v-if="stock.productId == popupData.productId">
														<div v-for="item in stock.ltStocks" class="btn m-auto"
															 v-show="popupData.seatWidthAttrId == null || ((popupData.seatWidthAttrId == -1 && item.seatWidthAttrId == null) || item.seatWidthAttrId == popupData.seatWidthAttrId)"
															 :class="{'btn-return': !pickedList(item, popupData), 'btn-plus': pickedList(item, popupData)}"
															 @click="pickStock(item, popupData, popupData.qty)">
															<a>{{item.propertyNo
														}}</a>
													</div>
													</div>
												</div>
											</div>
										</div>
										<div v-for="relationObj in popupData.ltGifts">
											<div class="list-box">
												<span class="pd-img" v-if="relationObj.coverImage != null && relationObj.coverImage != ''"><img :src="relationObj.coverImage" /></span>
												<div class="block stock-block">
													<div>{{relationObj.productName}} x {{relationObj.bundleQty * popupData.qty}}</div>
													<div class="num">
														<div class="num-btn">
															租借 {{relationObj.bundleQty * popupData.qty}}／
															已選 <input id="p-num" type="number" :value="relationObj.stocks.length" disabled />
														</div>
														<div class="red" v-if="notifyPickedQty(relationObj, relationObj.buyQty)">已選擇的數量與租借數量不符</div>
													</div>
													<div v-for="stock in ltStoreStocks" v-if="stock.productId == relationObj.productId">
														<div v-for="item in stock.ltStocks" class="btn m-auto"
																:class="{'btn-return': !pickedList(item, relationObj), 'btn-plus': pickedList(item, relationObj)}"
																@click="pickStock(item, relationObj, relationObj.bundleQty * popupData.qty)">
															<a>{{item.propertyNo}}</a>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div v-for="relationObj in popupData.ltBundles">
											<div class="list-box">
												<span class="pd-img" v-if="relationObj.coverImage != null && relationObj.coverImage != ''"><img :src="relationObj.coverImage" /></span>
												<div class="block stock-block">
													<div>{{relationObj.productName}} x {{relationObj.bundleQty * popupData.qty}}</div>
													<div class="num">
														<div class="num-btn">
															租借 {{relationObj.bundleQty * popupData.qty}}／
															已選 <input id="p-num" type="number" :value="relationObj.stocks.length" disabled />
														</div>
														<div class="red" v-if="notifyPickedQty(relationObj, relationObj.buyQty)">已選擇的數量與租借數量不符</div>
													</div>
													<div v-for="stock in ltStoreStocks" v-if="stock.productId == relationObj.productId">
														<div v-for="item in stock.ltStocks" class="btn m-auto" 
																v-show="popupData.seatWidthAttrId == null || item.seatWidthAttrId == popupData.seatWidthAttrId"
																:class="{'btn-return': !pickedList(item, relationObj), 'btn-plus': pickedList(item, relationObj)}"
																@click="pickStock(item, relationObj, relationObj.bundleQty * popupData.qty)">
															<a>{{item.propertyNo}}</a>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div v-for="relationObj in popupData.ltSupplies" v-if="relationObj.buyQty > 0">
											<div class="list-box">
												<span class="pd-img" v-if="relationObj.coverImage != null && relationObj.coverImage != ''"><img :src="relationObj.coverImage" /></span>
												<div class="block stock-block">
													<div>{{relationObj.productName}} x {{relationObj.buyQty}}</div>
													<div class="num">
														<div class="num-btn">
															租借 {{relationObj.buyQty}}／
															已選 <input id="p-num" type="number" :value="relationObj.stocks.length" disabled />
														</div>
														<div class="red" v-if="notifyPickedQty(relationObj, relationObj.buyQty)">已選擇的數量與租借數量不符</div>
													</div>
													<div v-for="stock in ltStoreStocks" v-if="stock.productId == relationObj.productId">
														<div v-for="item in stock.ltStocks" class="btn m-auto"
																:class="{'btn-return': !pickedList(item, relationObj), 'btn-plus': pickedList(item, relationObj)}"
																@click="pickStock(item, relationObj, relationObj.buyQty)">
															<a>{{item.propertyNo}}</a>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div v-for="relationObj in popupData.ltAdditions" v-if="relationObj.buyQty > 0">
											<div class="list-box">
												<span class="pd-img" v-if="relationObj.coverImage != null && relationObj.coverImage != ''"><img :src="relationObj.coverImage" /></span>
												<div class="block stock-block">
													<div>{{relationObj.productName}} x {{relationObj.buyQty}}</div>
													<div class="num">
														<div class="num-btn">
															租借 {{relationObj.buyQty}}／
															已選 <input id="p-num" type="number" :value="relationObj.stocks.length" disabled />
														</div>
														<div class="red" v-if="notifyPickedQty(relationObj, relationObj.buyQty)">已選擇的數量與租借數量不符</div>
													</div>
													<div v-for="stock in ltStoreStocks" v-if="stock.productId == relationObj.productId">
														<div v-for="item in stock.ltStocks" class="btn m-auto"
																:class="{'btn-return': !pickedList(item, relationObj), 'btn-plus': pickedList(item, relationObj)}"
																@click="pickStock(item, relationObj, relationObj.buyQty)">
															<a>{{item.propertyNo}}</a>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="list-box">
											<div class="block action-block">
												<div class="btn m-auto btn-r-arrow"><a @click="checkPicked()">確定</a></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--popup E-->
		<!--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.assistive.js?tf=202507141210"></script>
	<script src="cart.js?tf=202509021828" type="module"></script>
	<!--FinalScript E-->
</body>
</html>