<template>
	<u-popup v-model="innerVisible" mode="bottom" border-radius="24" safe-area-inset-bottom>
		<view class="price-popup">
			<view class="price-popup-head">
				<text class="price-popup-title">费用明细</text>
				<view class="price-popup-close" hover-class="app-tap-hover" @click="innerVisible = false">
					<u-icon name="close" color="#9AA7B8" size="32"></u-icon>
				</view>
			</view>
			<view class="price-popup-body">
				<view class="price-row">
					<view class="price-label">押金</view>
					<view class="price-value">{{ priceInfo && priceInfo.depositPrice != null ? priceInfo.depositPrice + ' 元' : '--' }}</view>
				</view>
				<view class="price-row" v-if="priceInfo && priceInfo.insureFee">
					<view class="price-label">保险费</view>
					<view class="price-value">{{ priceInfo.insureFee }} 元</view>
				</view>
				<view class="price-row total">
					<view class="price-label">合计应收</view>
					<view class="price-value total-value"><text class="amt-symbol">¥</text>{{ displayDeposit }}</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'PriceDetailPopup',
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			priceInfo: {
				type: Object,
				default: null
			},
			displayDeposit: {
				type: [String, Number],
				default: '--'
			}
		},
		computed: {
			innerVisible: {
				get() {
					return this.visible
				},
				set(val) {
					this.$emit('update:visible', val)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './agent-order-theme.scss';

	.price-popup {
		@include ao-popup-panel;
	}

	.price-popup-head {
		@include ao-popup-head;
	}

	.price-popup-title {
		@include ao-section-title;
	}

	.price-popup-close {
		padding: 8rpx;
	}

	.price-popup-body {
		padding-top: 8rpx;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 22rpx 0;
		border-bottom: 1rpx solid #F0F3F8;

		&:last-child {
			border-bottom: none;
		}
	}

	.price-label {
		font-size: 28rpx;
		color: $ao-text-secondary;
	}

	.price-value {
		font-size: 30rpx;
		color: $ao-text;
		font-weight: 500;
	}

	.total {
		margin-top: 8rpx;
		padding-top: 28rpx;
		border-top: 1rpx solid $ao-border;
		border-bottom: none;

		.price-label {
			font-size: 30rpx;
			font-weight: 600;
			color: $ao-ink;
		}
	}

	.total-value {
		font-size: 40rpx;
		font-weight: 700;
		color: $ao-accent;
	}

	.amt-symbol {
		font-size: 28rpx;
		margin-right: 2rpx;
	}
</style>
