<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view>
	<u-loading-page :loading="showLoading" loading-text="正在加载..."></u-loading-page>
    <view class="top-wrap">
      <view class="top-cont flex justify-between align-center">
        <view class="flex align-center">
          <u-icon name="../../static/images/time.png" size="16"></u-icon>
          <span style="margin-left: 5px">{{ newDate }}</span>
        </view>
		<!-- <view class="top-right-cont">
          <span class="right-item" :class="{ active: active == 1 }" @click="active = 1">自取</span>
          <span class="right-item" :class="{ active: active == 2 }" @click="active = 2">外卖</span>
        </view> -->
      </view>
    </view>  
	<view class="tab-navigation">
		<Tabs :tabList="tabList" @changeTab="changeTab" />
	</view>
	<view class="menuContent">
		<scroll-view class="content-left" scroll-y="true">
			<view class="scroll-view-item" v-for="(item,index) in typeList" :key="index" :class="tIndex == index ? 'active2' : ''" @click="changeModel(item,index)">
				<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
					<view>{{item.typeName}}</view> 
				</view>
			</view>
		</scroll-view>  
		<scroll-view class="content-right" scroll-y="true" :scroll-top="scrollLeftTop" scroll-with-animation="true">
			<view v-for="(typeitem,typeindex) in typeList":key="typeindex">
				<view :id="'scroll'+typeitem.typeId" style="margin: 20rpx 10rpx;font-weight: bold;font-size: 32rpx;">{{typeitem.typeName}}</view>
				<view class="scroll-right-item" v-for="(item,index) in typeitem.dishesList" :key="index">
					<view style="width: 100%;display: flex;align-items: center;height: 100%;">
						<view style="width: 160rpx;height: 160rpx;" @click="goMenuDetail(item)" v-if="item.remanentNum>0">
							<image class="image" :src="item.dishesImgUrl"></image>
						</view>
						<view style="width: 160rpx;height: 160rpx;position: relative;background: rgba(0,0,0,0.1);" @click="goMenuDetail(item)" v-else>
							<image class="image" :src="item.dishesImgUrl" style="opacity: 0.5;"></image>
							<view class="wait-btn">已售罄</view>
						</view>
						 
						<view style="width: 65%;height: 100%; display: flex;position: relative;">
							<view class="center-cont" @click="goMenuDetail(item)">
								<view class="meal-name" style="margin-bottom: 10rpx;font-weight: bold;" :style="{color:(item.remanentNum==0? '#747474':'#000')}">{{ item.dishesName }}</view>
								<view class="sale-num" style="margin-bottom: 10rpx;">
									<text>月销 {{ item.monthlySales||0 }}</text>
									<text style="margin-left: 20rpx;">好评率{{ item.goodProbability||0 }}%</text>
								</view>
								<view class="num-cont" style="margin-bottom: 10rpx;" :style="{color:(item.remanentNum==0? '#ffbe89':'#ff6816')}">
								  <span style="margin-right: 5px;" :style="{borderColor:(item.remanentNum==0? '#ffbe89':'#ff6816')}">{{ '库存' + item.remanentNum }}</span>
								  <span :style="{borderColor:(item.remanentNum==0? '#ffbe89':'#ff6816')}">{{ '限购' + item.limitNum }}</span>
								</view>
								<view class="sale-price" style="margin-bottom: 10rpx;" :style="{color:(item.remanentNum==0? '#ffbe89':'#ff6816')}">
								  <span style="font-size: 20rpx">￥</span>
								  <span style="font-size: 32rpx">{{ (item.dishesDetailList[0].prefPrice/100).toFixed(2) }}</span>
								  <span style="font-size: 20rpx;color: #666;font-weight: 400;text-decoration: line-through;margin-left: 10rpx;">￥{{ (item.dishesDetailList[0].dishesPrice/100).toFixed(2) }}</span>
								</view>
							</view>
							<view class="right-cont" v-if="item.remanentNum!=0">
								<u-icon v-if="item.quantity > 0"
								  name="../../static/images/delete.png"
								  size="18"
								  @click="handleFoodNum(1, item)"
								/>
								<span style="margin: 0 10px;font-size: 28rpx;">{{ item.quantity || 0 }}</span>
								<u-icon
								  v-if="item.quantity < item.limitNum"
								  name="../../static/images/add.png"
								  size="18"
								  @click="handleFoodNum(2, item)"
								/>
								<u-icon v-if="item.quantity == item.limitNum" name="../../static/images/no-add.png" size="16" />
							</view>
						</view>
					</view>
				</view> 
			</view>
			<view v-if="typeList.length == 0&&!showLoading" class="flex justify-center align-center" style="height: 50vh">
			  <u-empty icon="../../static/images/not_order.png" text="暂无数据" textColor="#000" />
			</view> 
		</scroll-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%;">
            {{ canteenName }}/{{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" v-else>已失效</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 { getlistReserveDateAPI,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,
		showLoading:true,
		newDate: '',
		newDate2: '',
		canteenId:"",
		canteenName:"",
		stallId:"",
		stallName:"",
		recipeId:"",
		tabList:[],
		menuData:[],
		typeList:[],//菜品类型数据
		typeNameList:[],
		tIndex:0,  
		shoppingCartList:[],
		// 总价格
		totalPrice: 0,
		showCar: false, // 购物车
		showModal: false, // 清空购物车
		// 添加的菜品
		addFood: [],
		options: [{
			text: '删除',
			style: {
				backgroundColor: '#f56c6c'
			}
		}],
		scrollLeftTop:0,//滚动位置
      current: 0,
      active: 1, // 1 自取 2 外卖
      // canteenName: '宏源工业园/本周菜谱',
      canteenType: '自取', // 1 自取 2 外卖
	  isHandle:false
    }
  },
  onLoad(options) { 
	options = JSON.parse(options.params)
	this.canteenId = options.canteenId
	this.canteenName = options.canteenName
	// console.log(options)
	this.stallId=options.stallId;
	this.stallName=options.stallName;
	this.recipeId=options.recipeId;
	this.getReserveDate() 
  },
  onShow() {
  	setTimeout(()=>{
		this.tIndex=0 
		//获取预定日期
		this.getShoppingCartList() 
  	},200)	
  },
  
  methods: {
	//获取预定日期
	async getReserveDate(){
		this.getNowFormatDate()
		this.getNowFormatDate2() 
		//获取预定餐菜谱
		this.getMenuListData()
	},
    // 获取当前时间
    getNowFormatDate(data) {
      // let date = new Date(data)
      let date = new Date()
      let year = date.getFullYear()
      let month = (date.getMonth() + 1).toString().padStart(2, '0')
      let day = date.getDate().toString().padStart(2, '0')
      let week = date.getDay()
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      this.newDate = `${month}-${day} 星期${weeks[week]}`
    },
    // 当前时间 2025-01-03
    getNowFormatDate2(data) {
      // let date = new Date(data)
      let date = new Date()
      let year = date.getFullYear()
      let month = (date.getMonth() + 1).toString().padStart(2, '0')
      let day = date.getDate().toString().padStart(2, '0')
      this.newDate2 = `${year}-${month}-${day}`
    },
	
	// 获取菜谱
	async getMenuListData() {
		let param = {
			"recipeId":this.recipeId,
			"applyDate":this.newDate2, 
			// "applyDate":"2025-04-18",
		}
		const res = await getAdvanceDetailListAPI(param)
			console.log(res, '预订餐菜谱')
			if(res.code==200){
				if(res.rows&&res.rows.length>0){
					this.menuData = res.rows;
					this.menuData.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()
					this.tabList=[]
					//处理数据
					this.menuData.forEach(item=>{//渲染类型
						this.tabList.push(this.handleRecipeType(item.mealtimeType))
					})
					this.changeTab(0)
				}else{
					this.menuData = [];
					this.tabList=[];
					this.typeList=[]
					this.typeNameList=[]
					this.tIndex=0 
				} 
				this.showLoading=false 
			}else{
				uni.$u.toast(res.msg)
				this.menuData = [];
				this.tabList=[];
				this.typeList=[]
				this.typeNameList=[]
				this.tIndex=0 
				this.showLoading=false 
			} 
	},
	//菜品类型（1-早餐 2-午餐 3-下午茶 4-晚餐 5-夜宵）
	changeTab(index) { 
		this.typeList = this.menuData[index].typeList;
		//左侧类别列表
		this.typeNameList=[]
		this.typeList.forEach(item=>{
			this.typeNameList.push(item)
		})
		//右侧菜列表
		this.tIndex=0; 
	},
	//菜品类型（面点，粗粮，精品菜，卤菜...）
	changeModel(item,index){
		this.tIndex=index; 
		var len = 0 
		if(index==0){
			len=0
		}else{
			this.typeList.forEach((ite,i)=>{
				console.log(i)
				console.log(index)
				if(i<index){
					len = len+ite.dishesList.length
				}
			})
		} 
		setTimeout(()=>{
			uni.createSelectorQuery().in(this).select('#scroll'+item.typeId).boundingClientRect(res => {
					console.log(res)
					this.scrollLeftTop = 80 * len; // 设置滚动条距离左侧的距离    				        
				}).exec()
		},100)
		// this.dishesList = this.typeList[index].dishesList; 
	},
	// 处理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 '夜宵'
      }
    },
	goMenuDetail(item){
		uni.navigateTo({
		  url: `/pages/advanceOrder/dishDetail?params=${JSON.stringify({"orderDate":this.newDate2,"recipeId":this.recipeId,...item})}`
		})
	},
	//获取预定购物车（订单）
	async getShoppingCartList(){
		let param = {
			"orderType":"2",
			"userId":uni.getStorageSync('userId'),
			"canteenId":this.canteenId,
			"stallId":this.stallId,
			"menuDateList":[this.newDate2]
		}
		const res = await getShoppingCartListAPI(param)
		console.log(res, '预订餐预定')
		if(res.code==200){
			this.shoppingCartList = res.data;
			// console.log(this.shoppingCartList)
			this.shoppingCartList.forEach(item => {
				item.isDfficacy = 0
				item.remanentNum = 0
				item.limitNum = 0
				item.prefPrice = 0
				item.monthlySales = 0 
			})
			// console.log(this.menuData) 
			this.menuData.forEach(menuItem => {
			  menuItem.typeList.forEach(detail => {
				detail.dishesList.forEach(food => {
					this.$set(food, 'quantity', 0)
					this.shoppingCartList.forEach(cartItem=>{
						if(food.dishesId==cartItem.goodsId){
							if(food.mealtimeType==cartItem.mealtimeType){
								let obj = { 
									"detailType": food.detailType,
									"goodsId": cartItem.goodsId,
									"goodsImgUrl": food.dishesImgUrl,//图片地址
									"goodsName": cartItem.goodsName,
									"mealtimeName": food.mealtimeName,
									"mealtimeType": food.mealtimeType,
									"recipeDetailId": food.detailId,
									"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.detailId)
								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.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) //失效
								}
								console.log(cartItem)
							} 	
						}
				    })
				})
			  })
			})   
			console.log(this.shoppingCartList)
			this.isHandle = false
			//计算总价
			this.handleTotalPrice()
		}else{
			this.isHandle = false
			this.shoppingCartList = []
		}
	},
    //菜谱加减操作
    handleFoodNum(type, 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(item)
		this.isHandle = true
		let param = {
			"userId":uni.getStorageSync('userId'),
			"orderType": 2,
			"orderDate":this.newDate2, 
			"canteenId":this.canteenId,
			"stallId":this.stallId, 
			"mealtimeType":item.mealtimeType, 
			"recipeId":this.recipeId,
			"goodsId":item.dishesId,
			"goodsName":item.goodsName||item.dishesName,
			"recipeDetailId":item.detailId,
			"detailType":item.detailType,
			"quantity":item.quantity+1
		}
		this.shoppingCartList.forEach(cartItem=>{
			if(item.dishesId==cartItem.goodsId){
				if(item.mealtimeType==cartItem.mealtimeType){
					param.cartId=cartItem.cartId
				}
			}
		})
		console.log(param)
		const res = await addAdvancehoppingCartAPI(param)
		if(res.code==200){
			this.getShoppingCartList()
			// this.getMenuListData()
		}
		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.menuData.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 = []
	  let arr2 = []
	  this.shoppingCartList.forEach(item=>{
		  if(item.isDfficacy == 1){//有效
			  arr.push(item)
		  }else{
			  arr2.push(item.cartId)
		  }
	  })
	  
	  if(arr2.length>0){
		  let param = {
		  	"userId":uni.getStorageSync('userId'),
		  	"cartIds":arr2,
		  }
		  clearAdvancehoppingCartAPI(param).then(res => {})
	  }
	  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.canteenId}&stallId=${this.stallId}&canteenName=${this.canteenName}&stallName=${this.stallName}&totalPrice=${this.totalPrice}&orderDate=${this.newDate2}`
      })
    },
	//垂直定位锚点
	scrollToDetail(index) {
	  console.log('?? ~ scrollToDetail ~ index', index)
	  if (this.current != 0 && this.current == index) return
	  this.current = index
	  this.$nextTick(() => {
	    const query = uni.createSelectorQuery().in(this)
	    query
	      .select(`#detail-${index}`)
	      .boundingClientRect(rect => {
	        console.log('?? ~ scrollToDetail ~ rect', rect)
	        if (rect) {
	          setTimeout(() => {
	            console.log('?? ~ scrollToDetail ~ rect.top', rect.top)
	            uni.pageScrollTo({
	              scrollTop: rect.top - 55,
	              duration: 300
	            })
	          }, 100)
	        }
	      })
	      .exec()
	  })
	},
  }
}
</script>

<style lang="scss" scoped>
::v-deep .u-transition {
  z-index: 10090 !important;
}
page {
  background: #f9fbff;
  position: relative;
}
.scroll-view {
	white-space: nowrap;
	width: 100%;
}
.scroll-view-item {
	display: inline-block;
	width: 160rpx;
	height: 100rpx;
	// line-height: 100rpx;
	text-align: center;
	color: #959FA4;
	font-size: 24rpx;

	.activeLine{
		background:  #DD7D3C;
		border-radius: 10upx;
		width: 100rpx;
		height: 6upx;
	}
}
.active {
	color: #DD7D3C;
	font-weight: bolder;
	font-size: 30rpx;
}

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

.menuContent{
	width: 100%;
	display: flex;
	height: 74vh;
	// background-color: #DD7D3C;
}
.content-left{
	width: 20%;
	height: 74vh;
} 
.active2 {
	color: #DD7D3C;
	font-weight: bolder;
	font-size: 28rpx;
}

.content-right{
	width: 80%;
	height: 74vh;
	// height: auto !important;
}
.scroll-right-item{
	width: 100%;
	height: auto;
	margin-bottom: 20rpx;
	// background-color: #959FA4;
}
.image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
}







.top-wrap {
  // position: fixed;
  // top: 0;
  // width: 100vw;
  // z-index: 999;
}
.top-cont {
  height: 55px;
  padding: 0 16px;
  background: #fff;
  .top-right-cont {
    background: rgba(15, 39, 75, 0.05);
    border-radius: 11px 11px 11px 11px;
    display: flex;
    justify-content: space-around;
    color: #0f274b;
    font-size: 24rpx;
    .right-item {
      padding: 3px 10px;
      border-radius: 11px 11px 11px 11px;
      cursor: pointer;
      &.active {
        background: linear-gradient(180deg, #ffae82 0%, #ff6816 100%);
        color: #fff;
      }
    }
  }
}

.footer-cont {
  /* height: calc(100vh - 115px); */
  overflow: auto;
}
.left-wrap {
  position: fixed;
  // top: 55px;
  height: calc(100vh - 115px);
  overflow: auto;
  .left-balance {
    width: 88px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 28rpx;
    color: #0f274b;
    &.active {
      background: #fff;
    }
  }
}
.right-wrap {
  margin-left: 88px;
  width: calc(100vw - 88px);
  overflow: auto;
  .right-balance {
    padding: 0 8px;
    background-color: #fff;
    .top-name {
      height: 44px;
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(15, 39, 75, 0.6);
      display: flex;
      align-items: center;
    }
  }
}
.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>
