<template>
	<view v-show="data.bundlePartList || data.bundleItemList" class="bundle_detail_wrap">
		<view class="uni-col-10" >
			<view class="list-title flex align_center justify_between"  hover-class="navigator-hover">
				<view class="bundle-name">{{data.name}}</view>
			</view>
			<!-- 套餐包含服务项 -->
			<view v-show="serverList.length" class="bundle-list flex flex_column" v-for="item in serverList" :key="item.id">
				<view class="line-height font32">
					{{item.itemName}}-{{item.itemClsName}}
				</view>
				<view class="flex align_end justify_between">
					<view class="uni-col-6 flex flex_column">
						<text class="line-height">服务价格：￥{{item.itemPrice||0}}</text>
						<text class="line-height">次数<text style="padding: 0 2px;">{{item.times}}</text>次</text>
					</view>
					<view class="line-height">
						价值<text style="padding: 0 2px;font-weight: bold;">{{ item.itemPrice * item.times || 0 }}</text>元
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			data: {
				type: Object,
				default: function(){
					return {}
				}
			},
			// 父级页面  detail：套餐详情 sellOrder：购买套餐
			parentPage: {
				type: String,
				default: ''
			}
		},
		watch:{
			data (newV,oldV){
				this.partList = newV ? newV.bundlePartList : []
				this.serverList = newV ? newV.bundleItemList : []
			}
		},
		data() {
			return {
				partList: this.data.bundlePartList ,
				serverList: this.data.bundleItemList
			}
		},
		onLoad() {
	
		},
		methods: {
	
		}
	}
</script>

<style lang="scss">
	.bundle_detail_wrap{
		background-color: white;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.flex{
			display: flex;
		}
		.align_end{
			align-items: flex-end;
		}
		.justify_between{
			justify-content: space-between;
		}
		.flex_column{
			flex-direction: column;
		}
		.bundle-name{
			font-size: 30rpx;
			font-weight: bold;
		}
		.pack-num{
			color: #8b8b8b;
			font-size: 28rpx;
			margin-left: 40rpx;
		}
		.price{
			color: red;
			font-size: 30rpx;
		}
		.bundle-list{
			padding: 10rpx 0 20rpx ;
			font-size: 28rpx;
			border-bottom: 1px solid #eee;
		}
		.bundle-list:last-child{
			border-bottom: none;
		}
		.list-title{
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
		}
		.line-height {
			line-height: 60rpx;
		}
		.vip-text{
			font-size: 28rpx;
			font-style: oblique;
			margin-left: 3px;
			color: #fff;
			padding: 6rpx 12rpx 6rpx 10rpx;
			background-color: #ff5500;
			border-radius: 10rpx;
		}
	}
</style>
