<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view>
		<view class="image-box"> 
			<image style="width: 100%;height: 100%;" :src="dashesData.dishesImgUrl"></image> 
		</view>
		<view class="menuContent">
			<view class="menuInfo">
				<view style="margin-bottom: 10px;margin-left: 20px;display: flex;justify-content: space-between;">
					<view style="color:#DD7D3C;font-size: 36rpx;font-weight: 600;">
						￥{{(menuData.dishesDetailList[0].prefPrice/100).toFixed(2)}}
					</view> 
					 
					<view style="display: flex;align-items: center;" v-if="dashesData.remanentNum>0">
						<u-icon 
							v-if="dashesData.quantity>0"
						  name="../../static/images/delete.png"
						  size="18"
						  @click="handleFoodNum(1, dashesData)"
						/>
						<span style="margin: 0 10px;font-size: 28rpx;">{{ dashesData.quantity || 0 }}</span>
						<u-icon
							v-if="dashesData.quantity < dashesData.limitNum"
						  name="../../static/images/add.png"
						  size="18"
						  @click="handleFoodNum(2, dashesData)"
						/>
						<u-icon v-if="dashesData.quantity == dashesData.limitNum" name="../../static/images/no-add.png" size="16" />
					</view>
				</view>
				<view style="width: 100%;height: 30px;display: flex;align-items: center;justify-content: space-between;">
					<view style="font-size: 36rpx;font-weight: 600;margin-left: 20px;">{{dashesData.dishesName}}</view>  
				</view>
			</view>
			<view class="tab-navigation">
				<Tabs :tabList="tabList" @changeTab="changeTab" />
			</view>
			<view class="tab-content">
				<view class="info-box" v-if="hIndex==0">
					<view style="margin-bottom: 20px;word-break: break-all;">
						<text style="color: #959FA4;margin-right: 20px;">菜品简介</text>
						<text style="word-break: break-all;">{{dashesData.intro||'-'}}</text>
					</view>
					<view style="margin-bottom: 20px;word-break: break-all;">
						<text style="color: #959FA4;margin-right: 20px;">主料</text>
						<text>
							{{dashesData.mainMaterialStr||'-'}}
						</text>
					</view>
					<view style="margin-bottom: 20px;word-break: break-all;">
						<text style="color: #959FA4;margin-right: 20px;">辅料</text>
						<text>
							{{dashesData.subMaterialStr||'-'}}
						</text>
					</view>
					<!-- <view style="margin-bottom: 20px;">
						<text style="color: #959FA4;">口味</text>
						<text style="margin-left: 20px;word-break: break-all;">-</text>
					</view> -->
				</view>
				<view class="nutrition-box" v-if="hIndex==1">
					<view class="nutrition-box-item">
						<view>项目(份)</view> 
						<view>热量(份)</view>
						<view>蛋白质(份)</view>
						<view>脂肪(份)</view>
						<view>碳水化合物(份)</view>
						<view>膳食纤维(份)</view>
						<view>胆固醇(份)</view> 
						<view>钙(份)</view> 
						<view>钠(份)</view> 
					</view>
					<view class="nutrition-box-item">
						<view>含量</view> 
						<view>{{dashesData.dishesDetailList[0].calories||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].protein||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].fat||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].carbohydrate||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].dietaryFiber||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].cholesterol||'-'}}</view>  
						<view>{{dashesData.dishesDetailList[0].carotene||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].calcium||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].sodium||'-'}}</view>
					</view>
					<view class="nutrition-box-item">
						<view>NRV%</view>
						<view>{{dashesData.dishesDetailList[0].caloriesNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].proteinNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].fatNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].carbohydrateNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].dietaryFiberNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].cholesterolNrv||'-'}}</view>  
						<view>{{dashesData.dishesDetailList[0].caroteneNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].calciumNrv||'-'}}</view>
						<view>{{dashesData.dishesDetailList[0].sodiumNrv||'-'}}</view>
					</view>
				</view>
				<view class="evaluate-box" v-if="hIndex==2">
					<view style="width: 100%;height: 30vh;display: flex;justify-content: center;align-items: center;" v-if="totalCount==0">
						暂无评论...
					</view>
					<view style="width: 92%;height: 30px;margin: 10rpx auto; display: flex;justify-content: space-between;align-items: center;" v-if="totalCount>0">
						<text style="font-size: 28rpx;font-weight: bold;margin-left: 20rpx;">评价</text>
						<text style="font-size: 24rpx;margin-left: 20rpx;" @click="goAllEvaluate">查看全部{{totalCount}}个></text>
					</view>
					<view style="width: 100%;height: 40vh;padding: 20rpx;" v-if="totalCount>0">
						<view v-for="(item,index) in evaluaList" :key="index" v-if="index<3" style="width: 100%;height: auto;border-bottom: 1px solid #ccc;">
							<view style="width: 94%;margin: 10rpx auto;display: flex;">
								<view style="width: 100rpx;height: 100rpx;margin: 10rpx;">
									<image :src="item.custPhotoUrl? item.custPhotoUrl:'../../static/images/user.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
								</view>
								<view style="width: 80%;height: 100rpx;">
									<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;padding-top: 10rpx;">
										<text>{{item.userName}}</text>
										<text>{{item.evaluaTime}}</text>
									</view>
									<view style="display: flex;margin-bottom: 10rpx;">
										<u-icon v-for="n in 5" :key="n" :name="n <= item.starLevel ? 'star-fill' : 'star-fill'"
											:color="n <= item.starLevel ? '#ff9933' : '#ccc'" size="20"></u-icon>
									</view>
								</view> 
							</view>
							<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;display: flex;align-items: center;" v-if="item.pictureList&&item.pictureList.length>0">
								<view v-for="(imgItem,imgIndex) in item.pictureList" :key="imgIndex" style="margin-bottom: 10rpx;">
									<image :src="imgItem" mode="" style="width: 100rpx;height: 100rpx;"></image>
								</view>
							</view> 
							<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;">
								{{item.description||"该用户没做评价"}}
							</view> 
						</view> 
					</view> 
				</view>
			</view>
		</view>
		<!-- 购物车 -->
		<view style="height: 60px"></view>
		<view class="shop-car">
		  <view class="car-cont">
		    <view class="flex align-center" @click="openCar">
		      <u-icon name="../../static/images/shop-car.png" size="25"></u-icon>
		      <span class="money">
		        <span style="font-size: 20rpx">￥</span>
		        {{ totalPrice }}
		      </span>
		    </view>
		
		    <view>
		      <u-button shape="circle" color="#FF6816" style="width: 79px; height: 28px" @click="handleOrder">结算</u-button>
		    </view>
		  </view>
		</view>
		
		
		<!-- 购物车-pop -->
		<u-popup :show="showCar" position="bottom" :round="12" @close="showCar = false">
		  <view class="popup-cont">
		    <view class="flex justify-between align-center">
		      <view style="font-weight: 500; font-size: 28rpx">已加购菜品</view>
		      <view style="font-weight: 400; font-size: 24rpx; color: #ff6816" @click="showModal = true">清空</view>
		    </view>
		
		    <view class="flex justify-between align-center" style="margin: 20.5px 0 12.5px">
		      <view class="flex align-center" style="font-size: 28rpx;width: 75%;">
		        {{ menuData.canteenName }}/{{menuData.stallName}}
		        <span class="name-type">{{ canteenType }}</span>
		      </view> 
		      <view style="font-size: 28rpx;">
		        {{ newDate2 }}
		      </view>
		    </view>
		
		    <view class="list-wrap">
				<view class="cont-list" v-for="(food, foodIndex) in shoppingCartList">
					<u-swipe-action>
					  <u-swipe-action-item :options="options" @click="delFood($event, food)">
						<view style="width: 100%;display: flex;height: auto;">
							<view v-if="food.orderDate==newDate2">
							  <u-image :src="food.goodsImgUrl" width="80px" height="80px" />
							</view>  
							<view style="width: 160rpx;height: 160rpx;position: relative;background: rgba(0,0,0,0.1);" v-else>
							  <u-image :src="food.goodsImgUrl" width="80px" height="80px" style="opacity: 0.5;"/>
							  <view class="wait-btn">已失效</view>
							</view>
						
						<view class="center-cont">
						  <view class="meal-name" :style="{color:(food.orderDate!=newDate2? '#747474':'#000')}">{{ food.goodsName }}（{{ food.mealtimeName }}）</view>
						  <view class="sale-num" :style="{color:(food.orderDate!=newDate2? '#747474':'#000')}">月销 {{ food.monthlySales||0 }}</view>
						  <view class="num-cont" :style="{color:(food.orderDate!=newDate2? '#ffbe89':'#ff6816')}">
							<span style="margin-right: 5px">{{ '库存' + food.remanentNum }}</span>
							<span>{{ '限购' + food.limitNum }}</span>
						  </view>
						  <view class="sale-price" :style="{color:(food.orderDate!=newDate2? '#ffbe89':'#ff6816')}">
							<span style="font-size: 20rpx">￥</span>
							{{ (food.prefPrice/100).toFixed(2) }}
						  </view>
						</view> 
						<view class="right-cont">
							<view class="num-wrap" v-if="food.isDfficacy==1">
								<view style="width: 40rpx;" @click="handleFoodNum(1, food)">
									<u-icon
									  v-if="food.quantity > 0"
									  name="../../static/images/del.png"
									  size="18" 
									/>
								</view>
								<span class="cont-num">{{ food.quantity || 0 }}</span>
								<view  style="width: 40rpx;" @click="handleFoodNum(2, food)">
									<u-icon
									  v-if="food.quantity<food.limitNum"
									  name="../../static/images/add2.png"
									  size="18"
									/>
								</view>
							</view>
							<view  v-if="food.isDfficacy==0">已失效</view>
						</view> 
						</view>
					  </u-swipe-action-item>
					</u-swipe-action>
				</view>
		    </view>
		  </view>
		</u-popup>
		
		<u-modal :show="showModal" showCancelButton title="提示" @cancel="showModal = false" @confirm="clearCar">
		  <view class="slot-content" style="text-align: center">
		    <span>是否确认清空购物车?</span>
		  </view>
		</u-modal>
	</view>
</template>

<script>
import { getMenudishesDetailAPI,getMenuEvaluaorderAPI } from '../../api/week-menu/index'
import { getAdvanceDetailListAPI,addAdvancehoppingCartAPI,updateAdvancehoppingCartAPI,clearAdvancehoppingCartAPI,getShoppingCartListAPI } from '@/api/advanceOrder/index.js'
import Tabs from '@/pages/components/Tabs.vue'

export default {
	components: { Tabs },
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			menuData:{},
			dashesData:{},
			tabList: ["菜品信息","营养信息","评价"],//tab列表
			hIndex:0,
			evaluaList:[],
			totalCount:0,
			newDate2:"",
			menuList:[],
			shoppingCartList:[],
			// 总价格
			totalPrice: 0,
			showCar: false, // 购物车
			showModal: false, // 清空购物车
			// 添加的菜品
			addFood: [],
			options: [{
				text: '删除',
				style: {
					backgroundColor: '#f56c6c'
				}
			}],
			canteenType: '自取',
			isHandle:false
		}
	},
	onLoad(options) {
		options = JSON.parse(options.params)  
		this.menuData = options
		console.log(this.menuData)
		this.newDate2 = this.menuData.orderDate
		this.getMenudishesDetail()
		this.getMenuEvaluaorderList() 
		this.getMenuListData()
	},
	methods: {
		//获取菜品详情
		async getMenudishesDetail(){
			let param = {
				"userId": uni.getStorageSync('userId') ,
				"dishesId": this.menuData.dishesDetailList[0].dishesId,
				"detailId": this.menuData.detailId,
			}
			const res = await getMenudishesDetailAPI(param)
			if(res.code==200){
				this.dashesData = res.data; 
				if(this.dashesData.materialList&&this.dashesData.materialList.length>0){
					let arr1=[]
					let arr2=[]
					this.dashesData.materialList.forEach(item=>{
						if(item.materialType==1){ arr1.push(item.materialName) }
						if(item.materialType==2){ arr2.push(item.materialName) }
					})
					this.dashesData.mainMaterialStr = arr1.join("、")
					this.dashesData.subMaterialStr = arr2.join("、")
				}else{
					this.dashesData.mainMaterialStr = ""
					this.dashesData.subMaterialStr = ""
				}
				this.$set(this.dashesData, 'quantity', 0) 
				this.$set(this.dashesData, 'monthlySales', this.dashesData.dishesDetailList[0].monthlySales)
				this.$set(this.dashesData, 'goodProbability', this.dashesData.dishesDetailList[0].goodProbability)
				this.$set(this.dashesData, 'remanentNum', this.dashesData.dishesDetailList[0].remanentNum)
				this.$set(this.dashesData, 'limitNum', this.dashesData.dishesDetailList[0].limitNum)
				this.$set(this.dashesData, 'dishesPrice', this.dashesData.dishesDetailList[0].dishesPrice)
				this.$set(this.dashesData, 'prefPrice', this.dashesData.dishesDetailList[0].prefPrice)
				this.$set(this.dashesData, 'dishesId', this.dashesData.dishesDetailList[0].dishesId)
				this.$forceUpdate() 
			}
			console.log(res,'获取菜品详情') 
		},
		//获取菜品评价
		async getMenuEvaluaorderList(){ 
			let param = {
				  "pageNum": 1,
				  "pageSize": 10,
				  "mealId": this.menuData.dishesDetailList[0].dishesId,  
			}
			const res = await getMenuEvaluaorderAPI(param)
			if(res.code==200){
				this.evaluaList = res.rows||[]
				this.totalCount = res.total
			} 
		},
		goAllEvaluate(){
			uni.navigateTo({
			  url: `/pages/weeklyMenu/evaluateCenter?params=${JSON.stringify(this.menuData)}`
			})
		},
		changeTab(index) {
			this.hIndex=index 
		},
		// 获取菜谱
		async getMenuListData() {
			let param = {
				"recipeId":this.menuData.recipeId,
				"applyDate":this.newDate2,
			}
			const res = await getAdvanceDetailListAPI(param)
				console.log(res, '预订餐菜谱')
				if(res.code==200){
					if(res.rows&&res.rows.length>0){
						this.menuList = res.rows;
						this.menuList.forEach(item => {
						  item.typeList.forEach(detail => {
						    detail.dishesList.forEach(food => {
								this.$set(food, 'mealtimeType', item.mealtimeType)
								this.$set(food, 'mealtimeName', this.handleRecipeType(item.mealtimeType))
								this.$set(food, 'quantity', 0)
								this.$set(food, 'monthlySales', food.dishesDetailList[0].monthlySales)
								this.$set(food, 'goodProbability', food.dishesDetailList[0].goodProbability)
								this.$set(food, 'remanentNum', food.dishesDetailList[0].remanentNum)
								this.$set(food, 'limitNum', food.dishesDetailList[0].limitNum)
								this.$set(food, 'dishesPrice', food.dishesDetailList[0].dishesPrice)
								this.$set(food, 'prefPrice', food.dishesDetailList[0].prefPrice)
								this.$set(food, 'dishesId', food.dishesDetailList[0].dishesId)
						    })
						  })
						})
						//获取购物车
						this.getShoppingCartList() 
					}else{
						this.menuList = []; 
					}  
				}else{
					uni.$u.toast(res.msg)
					this.menuList = [];  
				} 
		},
		// 处理recipeType
		handleRecipeType(type) {
		  if (type === 1) {
		    return '早餐'
		  } else if (type === 2) {
		    return '午餐'
		  } else if (type === 3) {
		    return '下午茶'
		  } else if (type === 4) {
		    return '晚餐'
		  }else if (type === 5) {
		    return '夜宵'
		  }
		},
		//获取预定购物车（订单）
		async getShoppingCartList(){
			this.$set(this.dashesData, 'quantity', 0)
			let param = {
				"orderType":"2",
				"userId":uni.getStorageSync('userId'),
				"canteenId":this.menuData.canteenId,
				"stallId":this.menuData.stallId,
				"menuDateList":[this.newDate2]
			}
			const res = await getShoppingCartListAPI(param)
			console.log(res, '预订餐预定')
			if(res.code==200){
				this.shoppingCartList = res.data; 
				this.shoppingCartList.forEach(item => {
					item.isDfficacy = 0
					item.remanentNum = 0
					item.limitNum = 0
					item.prefPrice = 0
					item.monthlySales = 0 
				})
				this.menuList.forEach(menuItem => {
					menuItem.typeList.forEach(detail => {
						detail.dishesList.forEach(food => {
							this.shoppingCartList.forEach(cartItem=>{
								if(food.dishesId==cartItem.goodsId){
										let obj = {
											"detailType": food.detailType,  
											"goodsId": cartItem.goodsId,
											"goodsImgUrl": food.dishesImgUrl,//图片地址
											"goodsName": cartItem.goodsName,
											"mealtimeName": food.mealtimeName,
											"mealtimeType": food.mealtimeType, 
											"recipeDetailId": food.recipeDetailId,
											"recipeId": cartItem.recipeId, 
											"quantity": cartItem.quantity, 
											"salePrice": food.dishesDetailList[0].dishesPrice,
											"discountPrice": food.dishesDetailList[0].prefPrice,
											"finalPrice": food.dishesDetailList[0].prefPrice,    
											"salesMode": 1, 
											"orderDate": cartItem.orderDate,
											"orderType": cartItem.orderType, 
											"prefPrice": food.dishesDetailList[0].prefPrice, 
											"limitNum": food.dishesDetailList[0].limitNum, 
											"cartId": cartItem.cartId, 
											"sizeType": cartItem.sizeType,
											"remanentNum": cartItem.remanentNum
										}
										this.$set(cartItem, 'orderDetailList', [obj])
										this.$set(cartItem, 'mealtimeName', food.mealtimeName)
										this.$set(cartItem, 'goodsImgUrl', food.dishesImgUrl)
										this.$set(cartItem, 'monthlySales', food.dishesDetailList[0].monthlySales)
										this.$set(cartItem, 'recipeDetailId', food.recipeDetailId)
										this.$set(cartItem, 'detailType', food.detailType)
										this.$set(cartItem, 'dishesId', food.dishesDetailList[0].dishesId)
										this.$set(cartItem, 'remanentNum', food.dishesDetailList[0].remanentNum)
										this.$set(cartItem, 'limitNum', food.dishesDetailList[0].limitNum)
										this.$set(cartItem, 'prefPrice', food.dishesDetailList[0].prefPrice)
										if(cartItem.orderDate == this.newDate2){//存在且时间一致
											if(cartItem.recipeId==this.menuData.recipeId){
												this.$set(food, 'quantity', cartItem.quantity)
												this.$set(cartItem,'isDfficacy', 1) //有效
											}else{
												this.$set(food, 'quantity', 0)
												this.$set(cartItem,'isDfficacy', 0) //失效
											}
										}else{//日期不一致
											this.$set(food, 'quantity', 0)
											this.$set(cartItem,'isDfficacy', 0) //失效
										} 
								}
								if(cartItem.dishesId==this.dashesData.dishesId){
									if(cartItem.orderDate == this.newDate2){
										if(cartItem.recipeId==this.menuData.recipeId){
											this.$set(this.dashesData, 'quantity', cartItem.quantity)
										}else{ 
											this.$set(this.dashesData, 'quantity', 0)
										} 
									}else{
										this.$set(this.dashesData, 'quantity', 0)
									}
								}
							})
						})
				    })
				}) 
				
				this.isHandle = false
				//计算总价
				this.handleTotalPrice()
			}else{
				this.shoppingCartList = []
				this.isHandle = false
			}
		},
		//菜谱加减操作
		handleFoodNum(type, food) {
		  console.log(food)
		  if (type === 1) {
		    if (food.quantity > 0) {
				if(!this.isHandle){
					food.quantity--
					this.delShopCart(food)
				}
		    }
		  } else {
		    if (food.quantity < food.limitNum) {
				if(!this.isHandle){
					this.addShopCart(food)
				}
		    } 
		  }
		},
		async addShopCart(item){
			console.log('?? ~ handleFoodNum ~ type', "新增")
			console.log(this.menuData)
			console.log(item)
			this.isHandle = true
			let param = {
				"userId":uni.getStorageSync('userId'),
				"orderType": 2,
				"orderDate":this.newDate2, 
				"canteenId":this.menuData.canteenId,
				"stallId":this.menuData.stallId, 
				"mealtimeType":this.menuData.mealtimeType, 
				"recipeId":this.menuData.recipeId,
				"goodsId":item.dishesId,
				"goodsName":item.goodsName||item.dishesName,
				"recipeDetailId":this.menuData.recipeDetailId,
				"detailType":this.menuData.detailType,
				"quantity":item.quantity+1
			}
			
			console.log(this.shoppingCartList)
			this.shoppingCartList.forEach(cartItem=>{
				if(item.dishesId==cartItem.goodsId){ 
					param.cartId=cartItem.cartId 
				}
			})
			console.log(param)
			const res = await addAdvancehoppingCartAPI(param)
			if(res.code==200){
				this.getShoppingCartList() 
			}
			console.log(res, '添加')
		},
		async delShopCart(item){
			console.log('?? ~ handleFoodNum ~ type', "减少")
			console.log(item)
			this.isHandle = true
			if(item.quantity>0){
				let param = {
					"userId":uni.getStorageSync('userId'),
					"cartId":'',
					"quantity":item.quantity
				} 
				this.shoppingCartList.forEach(cartItem=>{
					if(item.dishesId==cartItem.goodsId){
						param.cartId=cartItem.cartId
					}
				})
				console.log(param)
				const res = await updateAdvancehoppingCartAPI(param)
				if(res.code==200){
					this.getShoppingCartList()
				}
			}else{
				let param = {
					"userId":uni.getStorageSync('userId'),
					"cartIds":[],
				}
				this.shoppingCartList.forEach(cartItem=>{
					if(item.dishesId==cartItem.goodsId){
						param.cartIds=[cartItem.cartId]
					}
				})
				const res = await clearAdvancehoppingCartAPI(param)
				if(res.code==200){
					this.getShoppingCartList()
				}
			}
		},
		//购物车滑动删除按钮
		async delFood(e,item){
			let param = {
				"userId":uni.getStorageSync('userId'),
				"cartIds":[item.cartId], 
			}
			console.log(param)
			const res = await clearAdvancehoppingCartAPI(param)
			if(res.code==200){
				this.getShoppingCartList()
			}
		},
		//购物车-清空按钮
		clearCar(){
			let arr = []
			this.shoppingCartList.forEach(cartItem=>{
				arr.push(cartItem.cartId)
			})
			if(arr.length==0){
				uni.showToast({
				  title: "购物车中暂无菜品",
				  icon: 'none'
				})
			}else{
				try {
					let param = {
						"userId":uni.getStorageSync('userId'),
						"cartIds":arr,
					}
					// console.log(param)
					clearAdvancehoppingCartAPI(param).then(res => {
						if(res.code==200){
							console.log(res)
							this.menuList.forEach(menuItem => {
							  menuItem.typeList.forEach(detail => {
							    detail.dishesList.forEach(food => { 
									this.$set(food, 'quantity', 0) 
							    })
							  })
							})
							this.getShoppingCartList()
							this.showModal = false
						}else{
							this.getShoppingCartList()
							this.showModal = false
						}
					})
				} catch (error) {
					console.log(error)
				} 
			}
		},
		
		// 打开购物车
		openCar() {
		  // if (this.totalPrice == 0) return
		  this.showCar = true
		},
		// 计算总价格与添加的菜品-购物车-每次添加删减菜品都得计算
		handleTotalPrice() {
		  let total = 0  
		  this.shoppingCartList.forEach(item => {
			  if(item.isDfficacy == 1){
			   total +=item.quantity *(item.prefPrice/100).toFixed(2)
			  }
		  })
		  this.totalPrice = total.toFixed(2)
		  if (this.shoppingCartList.length == 0) this.showCar = false 
		},
		
		// 订单结算
		handleOrder() {
		  console.log('结算')
		  // 购物车为空 不可结算 
		  console.log(this.shoppingCartList)
		  let arr = []
		  this.shoppingCartList.forEach(item=>{
			  if(item.isDfficacy == 1){//有效
				  arr.push(item)
			  }
		  })
		  if (arr.length == 0) {
		    uni.showToast({
		      title: '请添加菜品',
		      icon: 'none'
		    })
		    return
		  }
		  console.log(arr)
		  uni.navigateTo({
		    url: `/pages/advanceOrder/orderDetails?carList=${JSON.stringify(arr)}&canteenId=${this.menuData.canteenId}&stallId=${this.menuData.stallId}&canteenName=${this.menuData.canteenName}&stallName=${this.menuData.stallName}&totalPrice=${this.totalPrice}&orderDate=${this.newDate2}`
		  })
		},
		 
  }
}
</script>

<style lang="scss" scoped>
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}
.image-box{
	width: 90%;
	height: 40vh;
	margin: 0 auto;
	border-radius: 20px;
	// background-color: #666;
}
.menuContent{
	width: 100%;
	height: 64vh;
	background-color: #fff;
	// border-top-right-radius: 20px;
	// border-top-left-radius: 20px;
	// background-color: #DD7D3C;
	// z-index: 999;
	// margin-top: -2.5vh;
}
.menuInfo{
	width: 94%;
	margin: 10rpx auto;
	height: auto;
}
.star-icon {
	padding: 8px;
}


.tab-navigation {
  display: flex;
  background-color: white;
  padding: 0px 16px 0 16px;
  margin-bottom: 10px;
}

.tab-content{
	width: 94%;
	margin: 10rpx auto;
	height: 50vh;
	.info-box{
		width: 94%;
		margin: 10rpx auto;
		height: 100%;
	}
	.nutrition-box{
		width: 94%;
		margin: 10rpx auto;
		height: 100%;
		color: #959FA4;
		// background-color: #DD7D3C;
		display: flex;
		justify-content: space-between;
		
		.nutrition-box-item{
			width: 28%;
			margin: 0 2%;
			height: 100%;
			text-align: center;
			// background-color: #DD7D3C;
			view{
				margin-bottom: 10px;
			}
		}
		
	}
} 
 

.content-left{
	width: 20%;
	height: 82vh;
} 
.active2 {
	color: #DD7D3C;
	font-weight: bolder;
	font-size: 26rpx;
}

.content-right{
	width: 80%;
	height: 82vh;
}
.scroll-right-item{
	width: 100%;
	height: 300rpx;
	// background-color: #959FA4;
}
.image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}

.cont-list {
  // display: flex;
  padding: 8px;
  // position: relative;
  /* border-bottom: 1px solid #f0f0f0; */
}
.center-cont {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 8px;

    .meal-name {
      font-weight: 500;
      font-size: 28rpx;
      color: #0f274b;
    }
    .sale-num {
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(15, 39, 75, 0.6);
      line-height: 14px;
    }
    .num-cont {
      display: flex;
      align-items: center;
      font-size: 20rpx;
      color: #ff6816;
      span {
        border: 1px solid #ff6816;
        padding: 0 2px;
        border-radius: 2px;
      }
    }
    .sale-price {
      font-size: 32rpx;
	  font-weight: bold;
      color: #ff6816;
    }
}
.right-cont {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;

    span {
      font-weight: 400;
      font-size: 24rpx;
      color: #0f274b;
    }

    .num-wrap {
      padding: 0 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 63px;
      height: 20px;
      border-radius: 13px 13px 13px 13px;
      border: 1px solid rgba(15, 39, 75, 0.2);
      .cont-num {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #0f274b;

        // 第二个展示左右边框
        &:nth-child(2) {
          border-left: 1px solid rgba(15, 39, 75, 0.2);
          border-right: 1px solid rgba(15, 39, 75, 0.2);
        }
      }
    }
  }
.shop-car {
   height: 60px;
   background: #fff;
   box-shadow: 0px -1px 4px 0px rgba(0, 102, 204, 0.1);
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 9999999;
 
   .car-cont {
     margin: 15px 20px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
     .money {
       margin-left: 8px;
       font-weight: 600;
       font-size: 36rpx;
       color: #0f274b;
     }
   }
 }
 
 .popup-cont {
   height: 380px;
   padding: 16px;
   color: #0f274b;
 
   .name-type {
 	width: 100rpx;
 	text-align: center;
     margin-left: 4px;
     font-weight: 400;
     font-size: 20rpx;
     color: #fff;
     padding: 2px 5px;
     background: linear-gradient(180deg, #ffae82 0%, #ff6816 100%);
     border-radius: 11px 11px 11px 11px;
   }
 }
 .list-wrap {
   height: 240px;
   padding-bottom: 160rpx;
   overflow: auto;
 }
  
 .wait-btn {
   width: 160rpx;
   height: 50rpx;
   line-height: 50rpx;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -80rpx;
   margin-top: -25rpx;
   text-align: center;
   color: #fff;
   font-size: 26rpx;
   font-weight: bold;
 }
</style>
