<template>
	<view class="buy-notice-restaurant">
		<view class="meal-info">
			<image :src="mealData.MealPic" mode="aspectFit" class="MealPic"></image>
			<view class="right">
				<view class="name">{{mealData.MealName}}</view>
				<view class="sale">已售 {{mealData.SaleCount}}</view>
			</view>
		</view>
		<view class="ticket-title">
			套餐内容
			<text class="ticket-title-bg"></text>
		</view>
		<view class="meal-con">
			{{mealData.MealDesc}}
		</view>
		<view class="ticket-title">
			购买须知
			<text class="ticket-title-bg"></text>
		</view>
		<view class="buy-notice-con">
			<rich-text :nodes="mealData.OtherTag"></rich-text>
		</view>
		<view class="btn-box">
			<view class="price">
				<text class="price-pre">￥</text>
				{{$utils.getretailer()==true? mealData.LPriceB:mealData.LPriceC}}
			</view>
			<view class="btn" @click="subscribe">
				立即预订
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			mealData:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			subscribe(){
				this.$emit("success")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy-notice-restaurant{
		height: 70vh;
		padding: 45rpx 45rpx 120rpx 45rpx;
		overflow-y: scroll;
		overflow-x: hidden;
		.meal-info{
			display: flex;
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #E7E7E7;
			.MealPic{
				width: 129rpx;
				height: 129rpx;
				background-color: #DFBE6E;
				border-radius: 20rpx;
			}
			.right{
				flex-grow: 5;
				margin-left: 35rpx;
				.name{
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1B1D1E;
				}
				.sale{
					width: 120rpx;
					height: 40rpx;
					background-color: #ECF1F4;
					border-radius: 4rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					text-align: center;
					line-height: 38rpx;
					margin-top: 20rpx;
				}
			}
		}
		.ticket-title {
			// width: 70rpx;
			height: 50rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #1F1F1F;
			background-color: transparent;
			// line-height: 44rpx;
			position: relative;
			margin: 40rpx 0;
		
			.ticket-title-bg {
				width: 70rpx;
				height: 10rpx;
				background-color: #DFBE6E;
				border-radius: 4px;
				position: absolute;
				left: 0;
				bottom: 6rpx;
				z-index: 1;
				opacity: 0.6;
			}
		}
		.meal-con{
			white-space: pre-wrap;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #111111;
		}
		.buy-notice-con{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #111111;
		}
		.btn-box{
			position: fixed;
			right: 55rpx;
			bottom:100rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.price{
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #D91818;
				// line-height: 38rpx;
				.price-pre{
					font-size: 22rpx;
				}
			}
			.btn{
				width: 300rpx;
				height: 80rpx;
				background-color: #111111;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 78rpx;
				margin-left: 45rpx;
			}
		}
	}
</style>
