<template>
	<view class="package-good">
		<view class="rm-left">
			<image :src="data.MealPic" mode="aspectFill">
			</image>
		</view>
		<view class="rm-right">
			<view class="package-name">{{data.MealName}}</view>
			<view class="f11">
				<text class="king" style="margin-right: 14rpx;" v-if="data.MinBuyNum>0">{{data.MinBuyNum}}人起订</text>

				<text>
					<text v-for="(item,index) in data.UsageTimeList" :key="index" v-if="data.UsageTimeList[0].ID!==0">
						{{item.Name}}
						<text v-if="index!=data.UsageTimeList.length-1">、</text>
					</text>
					<text v-if="data.UsageTimeList[0].ID!==0">可用,</text>
					<text v-if="data.UsageTimeList[0].ID===0">
						使用时间不限
					</text>
				</text>
				<text v-if="data.IsHoliday===1">节假日可用</text>
			</view>
			<viwe class="give f11">
				<text v-if="data.MakeDay===0">可预约当天</text>
				<text v-if="data.MakeDay>0">提前{{data.MakeDay}}天预约</text>
			</viwe>
			<view class="buy-know" @click="seeBuyNotice">
				购买须知
			</view>
			<view class="price" style="margin-top:10rpx;">
				<text class="f11" style="margin-right: 10rpx;">￥</text>
				<!-- <text v-if="data.LPriceB">{{data.LPriceB}}</text> -->
				<!-- <text v-if="!data.LPriceB">暂无报价</text> -->
				<text>{{$utils.getretailer()==true? data.LPriceB:data.LPriceC}}</text>
			</view>
		</view>
		<view class="rm-opera">
			<view class="buy" @click="previewOrder" v-if="data.RemainingInventory>0">
				<view class="buy-content">抢</view>
				<view class="buy-tips">在线订</view>
			</view>
			<view class="buy disabled" v-if="data.RemainingInventory<=0">
				<view class="buy-content">抢</view>
				<view class="buy-tips">已售罄</view>
			</view>
		</view>
		<u-popup v-model="showBuyNotice" mode="bottom" border-radius="40" :safe-area-inset-bottom="true">
			<buyNotice :mealData="data" @success="buyNoticeSuccess"></buyNotice>
		</u-popup>

	</view>
</template>

<script>
	import buyNotice from "./buyNotice.vue"
	export default {
		components: {
			buyNotice
		},
		props: {
			data: {
				type: Object,
				dafault: {}
			}
		},
		data() {
			return {
				showBuyNotice: false
			}
		},
		mounted() {
			console.log(this.data)
		},
		methods: {
			previewOrder() {
				this.$emit("success")
			},
			buyNoticeSuccess(){
				this.showBuyNotice = false
				if(this.data.RemainingInventory>0){
					this.previewOrder()
				}else{
					uni.showToast({
						title:"该套餐已售罄",
						icon:"none"
					})
				}
				
			},
			seeBuyNotice() {
				this.showBuyNotice = true
			}
		},
	}
</script>

<style scoped>
	.package-good {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.package-good .king {
		color: #DFBE6E !important;
	}

	.package-good .f11 {
		font-size: 22rpx;
		font-weight: 500;
	}

	.package-good .rm-right {
		width: 1px;
		flex: 1;
	}

	.package-good .rm-opera {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		justify-items: center;
		align-items: center;
	}

	.package-good .rm-opera .warm-count {
		text-align: center;
		font-size: 18rpx;
		font-weight: 500;
		color: #111111;
		margin-bottom: 10rpx;
	}

	.package-good .rm-opera .buy {
		width: 70rpx;
		height: 81rpx;
		background: #FFFFFF;
		border: 2rpx solid #111111;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
	}

	.package-good .rm-opera .buy.disabled {
		background: #EBEBEB;
		border: 2rpx solid #DCDCDC;
	}

	.package-good .rm-opera .buy.disabled .buy-tips {
		background: #A09E9E;
		color: #fff;
	}

	.package-good .rm-opera .buy.disabled .buy-content {
		color: #A09E9E;
	}

	.package-good .rm-opera .buy .buy-tips {
		height: 27rpx;
		background: #000000;
		text-align: center;
		color: #DFBE6E;
		font-size: 18rpx;
		line-height: 27rpx;
	}

	.package-good .rm-opera .buy .buy-content {
		height: 1px;
		flex: 1;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 800;
		color: #111111;
	}

	.package-good .rm-right .package-name {
		font-size: 30rpx;
		font-weight: 800;
		color: #111111;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.package-good .rm-right .give {

		background: #ECF1F4;
		border-radius: 4rpx;
		padding: 10rpx;
		margin-top: 15rpx;
		display: inline-block;
	}

	.package-good .rm-right .price {
		font-weight: 800;
		font-size: 40rpx;
		color: #111;
	}

	.package-good .rm-left {
		width: 175rpx;
		height: 213rpx;
		border-radius: 20rpx;
		margin-right: 30rpx;
		position: relative;
		overflow: hidden;
		box-shadow: 0px 10rpx 30rpx 0rpx rgba(36, 36, 36, 0.2);
	}

	.package-good .rm-left image {
		width: 100%;
		height: 100%;
	}

	.package-good .rm-left .mark {
		padding: 14rpx;
		background: rgba(0, 0, 0, .4);
		color: #FFF;
		border-radius: 20rpx 0px 20rpx 0px;
		font-size: 24rpx;
		font-weight: 500;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.buy-know {
		margin-top: 10rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #111111;
	}
</style>
