<template>
	<view>
		<u-popup :show="show" :round="10" closeable @close="show=false">
			<view class="detail">
				<view class="detail-title">
					费用明细
				</view>
				<view class="detail-content">
					<view class="content-box">
						<text>
							{{merchantName}}({{name}})
						</text>

						<view class="content-right">
							<view>¥{{sellingPrice}}x{{buyNum}}份</view> 
							<view v-if="productDepositTotal">押金：{{productDepositTotal}}</view>
						</view>
					</view>
					<!-- ---------------------------------------额外服务------------------------------------------- -->
					<view class="content-box" v-for="(item,index) of choooseServiceData" :key="index">
						<text>
							{{item.name}}
						</text>

						<view class="content-right">
							<view>¥{{item.sellingPrice}}x{{buyNum}}份</view>
							<view v-if="item.depositTotal">押金：{{item.depositTotal}}</view>
						</view>
					</view>
					<view class="content-box" v-if="chooseCouponObj&&chooseCouponObj.savedMoney>0">
						<text>
							券
						</text>

						<text class="content-right">
							-¥{{parseFloat(chooseCouponObj.savedMoney.toFixed(2))}}
						</text>
					</view>

					<view class="content-box content-total">
						<text>
							合计
						</text>

						<text class="content-right">
							¥<text style="font-size:36rpx;">{{sellTotal}}</text> 
						</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	export default {
		props: ["merchantName", "name", "buyNum", "sellingPrice", "productDepositTotal", "chooseCouponObj", "choooseService"],
		watch: {
			choooseService: {
				handler(newValue, oldValue) {
					if (newValue) {
						this.choooseServiceData = this.choooseService

					}
				},
				deep: false,
				immediate: false
			}
		},
		data() {
			return {
				show: false, //控制弹窗显示隐藏
				extraPrice: 0, //额外服务价格
				depositTotal: 0, //额外服务总押金
				choooseServiceData: [], //选中的服务
			}
		},
		computed: {
			sellTotal() { //卖价总价
				let savedMoney=0
				if(this.chooseCouponObj){
					savedMoney = this.chooseCouponObj.savedMoney
				}
				if (this.choooseServiceData.length > 0) { //额外服务价格
					let singleMoney = 0 //单个产品总押金，用于算出总押金
					this.extraPrice = 0
					this.depositTotal = 0 //总押金
					for (let i = 0; i < this.choooseServiceData.length; i++) {
						this.extraPrice += parseFloat((this.choooseServiceData[i].sellingPrice * this.buyNum).toFixed(2))
						if (this.choooseServiceData[i].depositType == 1) { //---------------------------------------------------------------------------等于1，押金金额跟数量没关系
							singleMoney = this.choooseServiceData[i].deposit
							this.choooseServiceData[i].depositTotal = this.choooseServiceData[i].deposit //单个产品总押金
						} else if (this.choooseServiceData[i].depositType == 2) { //----------------------------------------------------------------------等于2，押金单价乘购买数量
							singleMoney = parseFloat((this.choooseServiceData[i].deposit * this.buyNum).toFixed(2))
							this.choooseServiceData[i].depositTotal = parseFloat((this.choooseServiceData[i].deposit * this.buyNum).toFixed(2)) //单个产品总押金
						}
						this.depositTotal += singleMoney
					}
				} else {
					this.extraPrice = 0
					this.depositTotal = 0
				}
				return parseFloat((this.sellingPrice * this.buyNum + this.extraPrice + this.depositTotal + this.productDepositTotal - savedMoney).toFixed(2))
			}
		},

		methods: {
			
		}
	}
</script>

<style scoped="scoped">
	.detail-title {
		height:120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		border-bottom:var(--border-bottom);
	}
	.content-box {
		padding: 0 30rpx;
		border-bottom: 1px solid #f0f0f0;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:28rpx;
	}
	.content-right{
		text-align: right;
		flex-shrink: 0;
		margin-left: 20rpx;
	}
	.content-total {
		color: #f45803;
		font-weight: bolder;
		font-size:32rpx;
	}
</style>
