<template>
	<view class="bg" v-if="info">
		<view class="swipe-box">
			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" 
			@change="swiperChange" circular>
				<swiper-item v-for="(item, index) in info.listimg" :key="item.id">
					<view class="swiper-item">
						<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="swiper-pointer">
				<view :class="['cricle',swiperCurrent==i?'active':'']" v-for="(item,i) in info.listimg" :key="i"></view>
			</view>
		</view>
		
		<view class="detail-container">
			<!-- 景点信息 -->
			<view class="common-container info-container">
				<view class="flex-between">
					<view class="info-title text-overflowRows">{{info.title}}</view>
				</view>
				<view class="tags flex text-overflow" style="overflow: hidden" v-if="info.display_tags">
					<view class="tag" v-for="(tagItem, tagIndex) in info.display_tags.split(',').slice(0, 2)" 
					:key="tagIndex">
						<text>{{ tagItem }}</text>
						<view class="tip"></view>
					</view>
				</view>
				
				<view class="flex" style="margin: 30rpx 0;">
					<text class="flex-shrink-0">开园时间：</text>
					<text class="flex-1 w-1rpx">{{info.open_time}}</text>
				</view>
				
				<view class="flex-between" style="align-items: flex-start;">
					<view class="flex flex-1 w-1rpx">
						<text class="flex-shrink-0">地址：</text>
						<text class="flex-1 w-1rpx">{{info.address}}</text>
					</view>
					<view @click="goMap" class="flex-shrink-0">
						<img style="width: 34.67rpx;height: 34.67rpx;" src="https://static.ticket.sz-trip.com/uploads/20250610/aefe5ce619ba00f6f1906d229effd686.png">
					</view>
				</view>
			</view>
			<!-- sku -->
			<view class="w-full flex" style="margin-bottom: 20rpx;" v-if="sku.length>0">
				<scroll-view class="left-container no-scrollbar" scroll-y scroll-with-animation>
					<view :class="['type-item',current ==i?'active':'']" 
						v-for="(item,i) in sku" :key="i" @click="changeType(item,i)">
						{{item.title}}
					</view>
				</scroll-view>
				
				<scroll-view :scroll-top="scrollHeight" @scroll="skuScroll" @scrolltoupper="scrollSpecial('up')" @scrolltolower="scrollSpecial('low')"
					class="right-container no-scrollbar" scroll-y scroll-with-animation>
					<view style="height: 20rpx;" ></view>
					<view class="scenic-list scenic-query-item" v-for="(item, index) in sku" :key="index">
						<view class="scenic-title">{{item.title}}</view>
						<view class="scenic-item " v-for="(itemSku, indexSku) in item.sku" :key="indexSku">
							<view class="title text-overflow">{{ itemSku.sku_name }}</view>
							<view class="flex flex-1 h-1rpx flex-between">
								<view class="w-1rpx flex-1">
									<view class="tags-box">
										<view class="tags text-overflow" v-if="itemSku.display_tags">
											{{ itemSku.display_tags.split(',').join(" | ") }}
										</view>
									</view>
												
									<view style="color: #FF944C;" class="notice" @click="showSkuInfo(itemSku, item)">
										预订须知 >>
									</view>
								</view>
								<view class="item-right  flex-shrink-0">
									<view class="price">{{showNoPriceNew(itemSku.price)}}</view>
									<view class="btn" @click="changeSku(itemSku, item)">预订</view>
								</view>
							</view>
							
						</view>
					</view>
					<view style="height: 20rpx;"></view>
				</scroll-view>
			
			</view>
			<!-- 优待政策 | 景点介绍 -->
			<view class="common-container" style="padding: 30rpx 20rpx;background: white;">
				<view class="box-title">优待政策<text class="box-title-line"></text>景点介绍</view>
				<view class="box-content">
					<view class="sm-box-title" style="padding-top: 0;">优待政策</view>
					<view class=""  v-html="formateRichText(info.extra_info)"></view>
					<view class="sm-box-title">景点介绍</view>
					<view class=""  v-html="formateRichText(info.content)"></view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="btn-box flex-center">
			<view class="icon-container">
				<view class="icon-item">
					<image src="https://static.ticket.sz-trip.com/uploads/20250611/627d67e48ac41903c40c31f1613f2444.png"></image>
					<text>客服</text>
				</view>
			</view>
			<view class="btn" @click="showCartPopup">加入购物车</view>
		</view>
		<!-- 购物车图标 -->
		<view class="add-cart-icon" @click="goCartPage()">
			<uni-badge class="uni-badge-left-margin" :text="cartNum" absolute="rightTop" :offset="[-3, -3]" size="small"
			:custom-style="{background:'#DC2525',color:'#ffffff'}">
			<image src="https://static.ticket.sz-trip.com/uploads/20250611/f8c2078ad76754a0b0251f9b65784dc2.png"></image>
			</uni-badge>
		</view>

		<!-- 预订须知的弹窗 -->
		<uni-popup ref="popupRule" type="bottom" :safe-area="false">
			<view class="popup-content-date flex-column flex" v-if="skuInfo">
				<view class="popup-content-title flex">
					<view class="flex-1 w-1rpx text-overflow">
						{{skuInfo.sku_name}}
					</view>
					<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" 
						@click="closePopupRule"
						style="width: 20rpx;height: 20rpx;" class="flex-shrink-0">
				</view>	
				<view class="content flex-1 h-1rpx no-scrollbar" >
					<view v-if="skuInfo.sku_model" class="detail-content" v-html="formateRichText(skuInfo.sku_model.bookinfo)"></view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 预定弹窗 -->
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="popup-content-date" v-if="skuInfo">
				<view class="popup-content-title flex">
					<view class="flex-1 w-1rpx text-overflow">
						{{skuInfo.sku_name}}
					</view>
					<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopup"
						style="width: 31rpx;height: 31rpx;" class="flex-shrink-0">
				</view>				
				<view class="order-popup-detail">
					<view  style="position: relative;">
						<view class="sku-title">使用日期</view>
						<view class="date-content">
							<view :class="['item', item.stock>0?'':'disabled',seldDateIndex===index?'active':'']" 
							v-for="(item,index) in allSeldDate" :key="index"
							@click="clickTab(item,index)">
								<view>{{ShowDateDay(new Date(item.date).getDay())}}</view>
								<view>{{item.date.slice(-5)}}</view>
								<view class="price" v-if="item.stock > 0">￥{{showNoPriceNew(item.price)}}</view>
								<view v-else>不可定</view>
							</view>
						</view>
						<view class="dateMore" @click="openCalendar">
							<view style="width: 55rpx;">更多日期</view>
							<view style="padding-left: 9rpx;">></view>
						</view>
					</view>
					
					<view v-if="timesArr.length > 0 && skuInfo.sku_model&& skuInfo.sku_model.is_time_stock">
						<view class="sku-title">选择场次</view>
						<view class="time-box">
							<view v-for="(item,index) in timesArr" :key="index" 
							:class="['time-item',{'time-disable': item.stock_number < 1, 'time-active': item.stock_number > 0 && index == seldTimeIndex}]" 
							@click="changeTime(item,index)">
								{{ item.start_time }}-{{ item.end_time }}
								{{item.stock_number < 10 ? (item.stock_number === -1 ? '不可定' : item.stock_number === 0 ? '无票' : '(余票' + item.stock_number + ')') : '有票'}}
							</view>
						</view>
					</view>
				</view>
				<view class="sku-bottom">
					<view class="flex" style="align-items: baseline;">
					    合计：<view class="bottom-price">{{allSeldDate[seldDateIndex].price / 100 || 0}}</view>
					</view>
					<view class="bottom-btn" @click="order">
							下一步
					</view>
				</view>
			</view>
			
		</uni-popup>
		
		<uni-popup ref="popupCart" type="bottom" :safe-area="false"  style="position: relative;z-index: 50;">
			<view class="popup-content" v-if="trueSku.length>0">
				<view style="padding: 0rpx 39rpx 50rpx 39rpx;">
				<view  @click="closeCartPopup" style="padding: 31rpx 0 0 639rpx;width: 50rpx;height: 80rpx;">
					<uni-icons  type="closeempty" size="24"></uni-icons>
				</view>
				<view class="bottom-productImg">
					<img :src="showImg(trueSku[productIndex].headimg)" alt="">
					<view class="right-content">
						<view class="bottom-productPrice com-price">{{(trueSku[productIndex].price||0)/100}}</view>
						<view class="bottom-content">已选择：{{trueSku[productIndex].sku_name}}</view>
					</view>
				</view>
				<view>
					<view class="sp">规格</view>
					<view class="sp-container" style="">
						<view style="position:relative;" v-for="(botItem,botIndex) in trueSku" :key="botIndex">
							<view :class="['botProduct','text-overflow',{'noStore':botItem.store==0},{'botProducts':productIndex==botIndex}]"
								@click="changeProduct(botItem,botIndex)">
								{{botItem.sku_name}}
							</view>
							<view class="noStore-text" v-if="botItem.store==0">
								不可购买
							</view>
						</view>
					</view>
				</view>
				<view class="buy-num com-flex-tao">
					数量
					<view class="number-btn">
						<view>
							<text @click="delNumber">-</text>
						</view>
						<view style="width: 96rpx;height: 69rpx;margin: 0 14rpx;">{{ buyNum }}</view>
						<view>
							<text @click="addNumber">+</text>
						</view>
					</view>
				</view>
				</view>
				<view class="sp-bottom-btn">
					<view class="btn" @click="addToCart">加入购物车</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" 
		:date="allSeldDate[seldDateIndex].date" :insert="false"  :startDate="calendarParam.startDate"
		:endDate="calendarParam.endDate"  @confirm="confirmCalendar" :selected="calendarParam.selected"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartNum: 0,
				headImg: null,
				swiperCurrent: 0,
				
				id: null,
				info: null,
				sku: [],
				current: 0, // sku 选中的index
				scrollHeight: 0, // sku滚动高度
				skuDoms: [], // 节点Dom 做缓存
				
				skuInfo: {}, // 预定门票
				selectGoods: {}, // 预定的商品
				minSeldDate: new Date().Format('yyyy-MM-dd'),
				maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 1, 0).Format('yyyy-MM-dd'),
				allSeldDate: [],
				seldDateIndex: 0,
				timesArr: [],
				seldTimeIndex: -1,
				calendarParam: {
					stratDate:'',endDate: '', selected: []
				},
				
				trueSku: [],
				productIndex: 0,
				buyNum: 1,
				
			}
		},
		onShow(options) {
			
		},
		onLoad(options) {
			this.skuDoms = []
			this.id = options.id;
			this.getInfo();
			this.getCartList()
			// this.getGoodsList()
		},	
		methods: {
			swiperChange (e) {
				this.swiperCurrent = e.detail.current
			},
			// 获取景点信息
			getInfo() {
				this.Post({id: this.id},'/api/scene/detail').then(res => {
					this.info = res.data
					this.sku = this.info.product || []
					
					let trueSku = []
					this.sku.forEach(v=>{
						trueSku = trueSku.concat(v.sku)
					})
					this.trueSku = trueSku
					
					if (this.info.title) {
						uni.setNavigationBarTitle({
							title: this.info.title
						})
					}
				});
			},

			goMap () {
				if (!this.info.lat || !this.info.lon) {
					uni.showToast({
						title: '暂未配置地理位置',
						icon: 'none'
					})
					return
				}
				
				uni.openLocation({
					latitude: Number(this.info.lat),
					longitude: Number(this.info.lon),
					name: this.info.title,
					address: this.info.address,
					success: function () {
						console.log('success');
					}
				});
			},
			
			// ----------滚动联动-------------------
			changeType (item,index) {
				let that = this
				if (Array.isArray(this.skuDoms) && this.skuDoms.length>0) {
					console.log('进入暂存数据')
					try {
						let res = this.skuDoms
						let target0 = res[0][0]
						let targetDom = res[0][index]
						let scrollTop = that.scrollHeight
						console.log(targetDom)
						if (target0&&targetDom) {
							scrollTop = targetDom.top - target0.top  // title高度87
						}
						console.log(scrollTop)
						that.current = index
						that.scrollHeight = scrollTop
					} catch(e) {
						console.log(e)
					}
				} else {
					const query = uni.createSelectorQuery(); //创建节点查询器
						query.selectAll(".scenic-query-item").boundingClientRect(); //选择toViewid获取位置信息
						query.exec(function (res) {
						    try {
								let target0 = res[0][0]
								let targetDom = res[0][index]
								let scrollTop = that.scrollHeight
								console.log(targetDom)
							
								if (target0&&targetDom) {
									scrollTop = targetDom.top - target0.top  // title高度87
								}
								that.current = index
								that.scrollHeight = scrollTop
								that.skuDoms = res
							} catch(e) {
								console.log(e)
							}
						});
					
				}
				
			},
			skuScroll (e) {
				let that = this
				let domSctollTop = e.detail.scrollTop
				if (Array.isArray(this.skuDoms) && this.skuDoms.length>0) {
					console.log('进入暂存数据')
					try {
						let res = this.skuDoms
						let target0 = res[0][0]
						let topHeightArr = []
						res[0].forEach(v=>{
							topHeightArr.push(v.top - target0.top)
						})
			
						// 找到第一个大于domSctollTop的下标再-1  如果返回-1 就是最后一个
						// 预留50px
						let findIndex = topHeightArr.findIndex(v=>v-50>=domSctollTop)
						if (findIndex<0) {
							findIndex = topHeightArr.length-1
						} else if(findIndex>=1) {
							findIndex--
						}
						that.current = findIndex
					} catch(e) {
						console.log(e)
					}
				} else {
					const query = wx.createSelectorQuery(); //创建节点查询器
						query.selectAll(".scenic-query-item").boundingClientRect() //选择toViewid获取位置信息
						query.exec(function (res) {
							try {
								let target0 = res[0][0]
								let topHeightArr = []
								res[0].forEach(v=>{
									topHeightArr.push(v.top - target0.top)
								})
								// 找到第一个大于domSctollTop的下标再-1  如果返回-1 就是最后一个
								// 预留50px
								let findIndex = topHeightArr.findIndex(v=>v-50>=domSctollTop)
								if (findIndex<0) {
									findIndex = topHeightArr.length-1
								} else if(findIndex>=1) {
									findIndex--
								}
								that.current = findIndex
								that.skuDoms = res
							} catch(e) {
								console.log(e)
							}
						})
				}
			},
			scrollSpecial (type) {
				if (type == 'up') {
					this.current = 0
				} else {
					let length = this.sku.length-1
					length = length>0?length:0
					this.current = length
				}
			},
			//-----------------------------------------
			
			// 预定须知
			showSkuInfo (itemSku,goods) {
				this.skuInfo = itemSku
				this.selectGoods = goods
				console.log(itemSku,goods)
				this.openPopRule()
			},
			
			// 预定选择日期分时
			changeSku(itemSku,goods) {
				this.skuInfo = itemSku
				this.selectGoods = goods
				this.getPriceCal(itemSku,goods)
			},
			// 获取价格日历列表
			getPriceCal(itemSku,goods) {
				this.Post({
					start_date: this.minSeldDate,
					end_date: this.maxSeldDate,
					sku_id: itemSku.id
				}, '/api/product/product_date_price').then(res => {
					this.allSeldDate = res.data || []
					this.seldDateIndex = this.allSeldDate.findIndex(item => item.stock > 0)
					this.getTimeStock(this.allSeldDate[this.seldDateIndex].date)
					this.openPop()
				})
			},
			openCalendar () {
				this.calendarParam = {
					startDate: (this.allSeldDate.find(v=>v.stock>0) || {}).date,
					endDate: (this.allSeldDate[this.allSeldDate.findLastIndex(v=>v.stock>0)]||{}).date,
					selected: this.allSeldDate.filter(v=>v.stock>0).map(v=>{
						return {
							date: v.date,
							info: '￥'+this.showNoPriceNew(v.price),
							notNeedDot:true,
						}
					})
				}
				this.$refs.calendar.open();
			},
			
			
			// 获取规格分时库存
			getTimeStock(date) {
				if (!this.skuInfo.sku_model.is_time_stock || this.seldDateIndex<0) {
					return
				}
				this.Post({
					sku_id: this.skuInfo.id,
					date: date,
				}, '/api/product/product_timestock_price').then(res => {
					if (Array.isArray(res.data)) {
						this.timesArr = res.data || []
						this.seldTimeIndex = -1
					}
					if (res.data.length > 0) {
						this.seldTimeIndex = this.timesArr.findIndex(item => item.stock_number > 0)
					}
				})
			},
			
			
			// 选择日期
			clickTab(item, index) {
				if (item.stock>0) {
					this.seldDateIndex = index
					this.getTimeStock(item.date)
				}
				
			},
			// 选择时段
			changeTime(item, index) {
				if(item.stock_number > 0) {
					this.seldTimeIndex = index
				}
			},
			
			confirmCalendar (val) {
				let index = this.allSeldDate.findIndex(v=>v.date == val.fulldate)
				if (index>=0) {
					this.clickTab(this.allSeldDate[index],index)
				}
			},
			
			// 购物车
			getCartList () {
				this.Post({},'/api/cart/get_list').then(res=>{
					this.cartNum = (res.data || []).length
				})
			},
			
			showCartPopup () {
				this.$refs.popupCart.open()
			},
			closeCartPopup () {
				this.$refs.popupCart.close()
			},
			changeProduct(item,index) {
				if (item.store==0) {
					uni.showToast({
						title:"库存不足！",
						icon:'none'
					})
					return
				}
				this.productIndex = index
			},
			//数量加减
			addNumber() {
				this.buyNum += 1;
			},
			delNumber() {
				if (this.buyNum <= 1) {
					return;
				}
				this.buyNum -= 1;
			},
			addToCart () {
				let goods = this.trueSku[this.productIndex]
				goods.buyNum = this.buyNum
				this.Post({sku_id: goods.id,num: this.buyNum },'/api/cart/add_sku').then(res => {
					if (res.code == 1) {
						uni.showToast({title: res.msg,icon: 'none'});
						// uni.$emit("updateDataByConnect", {msgType:'updateCartDataInfo',data:null})
						this.closeCartPopup()
						// this.$refs.cartDataVueRef.openPop()
						this.getCartList()
					}
				});
			},
			//-----------------------------
			
			order() {
				let that = this;
				// 如果是分时，未选择分时
				console.log(this.skuInfo)
				if(that.skuInfo.is_time_stock && that.seldTimeIndex < 0) {
					uni.showToast({title:'请选择分时',icon:'none'})
					return;
				}
				
				let param = [{
					sInfo: {...this.skuInfo, buyNum: 1},
					pInfo: {id:this.selectGoods.id, type:this.selectGoods.type,title:this.selectGoods.title},
					allSeldDate: this.allSeldDate,
					seldDateIndex: this.seldDateIndex,
					timesArr: this.timesArr,
					seldTimeIndex: this.seldTimeIndex,
				}];
				
				console.log(param)
				
				this.$store.commit("changeTicketOrderList", param);

				uni.navigateTo({
					url:'/subPackages/ticket/order',
				})
			},
		
			closePopup() {
				this.$refs.popup.close()
			},
			openPop(){
				this.$refs.popup.open()
			},
			closePopupRule() {
				this.$refs.popupRule.close()
			},
			openPopRule(){
				this.$refs.popupRule.open()
			},
			// 价格格式
			showNoPriceNew(price) {
				if (price && price > 0) {
					return (price / 100)
				} else {
					return '0'
				}
			},
			
	
			
			getTime(time) {
				let m = parseInt(time / 60);
				let s = time % 60;
				return this.towNum(m) + ':' + this.towNum(s);
			},
			towNum(num) {
				if(num >= 10) {
					return num;
				}else {
					return '0' + num;
				}
			},
			
		}
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
	.bg{
		min-height: 100vh;
		background: #F8F8F8;
	}
	
	.swipe-box {
		height: 413rpx;
		position: relative;
		.swiper {
			height: 413rpx;
			position: relative;
		
			.swiper-item {
				width: 100%;
				height: 413rpx;
		
				.item-img {
					width: 750rpx;
					height: 413rpx;
				}
			}
		}
		
		.swiper-pointer{
			position: absolute;
			right: 10rpx;
			bottom: 40rpx;
			display: flex;
		}
		.cricle{
			width: 14rpx;
			height: 14rpx;
			background: rgba(255,255,255,0.3);
			border-radius: 50%;
			margin-left: 10rpx;
		}
		.cricle.active{
			background: white;
		}
	}
	
	.detail-container{
		width: 100%;
		z-index: 2;
		padding: 26rpx 0;
		position: relative;
		top: -52rpx;
	}
	
	.common-container{
		background: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 22rpx 26rpx;
	}
	
	.info-container{
		font-family: PingFang;
		font-weight: 500;
		font-size: 27rpx;
		color: #666;
		.info-title{
			width: 100%;
			font-family: PingFang SC;
			font-size: 33rpx;
			height: 80rpx;
			font-weight: bold;
			color: #000;
		}
		
		.tags .tag {
		    margin-right: 20rpx;
		    font-size: 24rpx;
		    color: #6A8A27;
			display: inline-block;
			position: relative;
			.tip{
				position: absolute;
				left: 0;
				bottom: 0rpx;
				width: 100%;
				background: #EFF7DF;
				height: 8rpx;
				z-index: 2;
			}
			text{
				position: relative;
				z-index: 5;
			}
		    
		}
	}
	
	.left-container{
		width: 147rpx;
		flex-shrink: 0;
		.type-item{
			font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			width: 100%;
			height: 133rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
		.type-item.active{
			font-weight: bold;
			font-size: 24rpx;
			color: #6A8A27;
			background: #FFFFFF;
		}
	}
	.right-container{
		flex: 1;
		width: 1rpx;
		background: white;
		max-height: 1000rpx;
	}
	
	
	.box-title {
		font-weight: bold;
		font-size: 35rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #D9D9D9;
		display: flex;
		align-items: center;
		.box-title-line{
			width: 2rpx;
			height: 23rpx;
			background: #000;
			margin: 0 20rpx;
		}
	}
	.box-content{
		padding-top: 22rpx;
		.sm-box-title{
			font-weight: bold;
			font-size: 29rpx;
			color: #000000;
			padding: 58rpx 0 25rpx;
		}
	}

	.scenic-list{
		padding: 10rpx 10rpx 0;
		.scenic-title{
			font-weight: bold;
			font-size: 35rpx;
			color: #000000;
			padding-bottom: 20rpx;
		}
		.scenic-item {
			width: 100%;
			height: 187rpx;
			background: rgba(239, 247, 223, 0.5);
			border-radius: 13rpx;
			margin-bottom: 20rpx;
		    padding: 19rpx 22rpx 10rpx;
			display: flex;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #666666;
			flex-direction: column;
			justify-content: space-between;
		
			.title {
			    width: 100%;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 31rpx;
				color: #000000;
			}
			.tags-box {
			    overflow: hidden;
				padding-bottom: 17rpx;
				padding-left: 6rpx;
				font-weight: 500;
				font-size: 23rpx;
				color: #666666;
			}
			.item-right {
			    flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.price {
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 36rpx;
				color: #D62828;
				font-weight: bold;
				&::before {
				    display: inline-block;
				    content: "￥";
				    font-size: 24rpx;
				}
			}
			
			
			.btn {
				width: 93rpx;
				height: 80rpx;
				background: #6A8A27;
				border-radius: 13rpx;
			    text-align: center;
			    line-height: 80rpx;
			   font-weight: 500;
			   font-size: 31rpx;
			   color: #FFFFFF;
			   margin-left: 12rpx;
			}
		}
	}
	
	.btn-box {
		width: 750rpx;
		height: 133rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6,0,1,0.1);
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
		padding: 0 46rpx;
		.icon-container{
			font-weight: 400;
			font-size: 23rpx;
			color: #666666;
			text-align: center;
			.icon-item{
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 44rpx;
				image{
					width: 44rpx;
					height: 42rpx;
					margin-bottom: 8rpx;
				}
			}
		}
		
		.btn{
			width: 200rpx;
			height: 60rpx;
			background: #6A8A27;
			border-radius: 11rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
		}
		
	}
	
	.add-cart-icon{
		width: 80rpx;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 140rpx;
		right: 20rpx;
		z-index: 10;
		image{
			width: 43.33rpx;
			height: 42rpx;
		}
	}
	
	.popup-content-date {
		background-color: white;
		padding: 0rpx 28rpx 166rpx;
		height: 70vh;
		border-radius: 20rpx 20rpx 0 0 ;
		.popup-content-title{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 37rpx;
			color: #000000;
			padding: 39rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #CCCCCC;
		}
		// 预定须知
		.content{
			padding-top: 48rpx;
			overflow-y: auto;
		}
		
		.order-popup-detail{
			.sku-title{
				padding: 48rpx 0 26rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 31rpx;
				color: #000000;
			}
		}
		
		.dateMore{
			width: 120rpx;
			height: 133rpx;
			background: white;
			border-radius: 10rpx;
			background: #FFFFFF;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #6A8A27;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			padding: 6rpx 0;
			position: absolute;
			bottom: 0;
			right: 0;
		}
		
		.date-content{
			width: 100%;
			display: flex;
			overflow-y: auto;
			position: relative;
			padding-right: 140rpx;
			
			.item{
				width: 120rpx;
				height: 133rpx;
				border-radius: 10rpx;
				margin-right: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 27rpx;
				color: #000;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				flex-shrink: 0;
				padding: 6rpx 0;
				background: #F5F5F5;
			}
			.item.active{
				background: #6A8A27;
				color: white;
				.price{color: white;}
			}
			.item.disabled{
				background: #F5F5F5;
				color: #999999;
			}
			
			.price{
				color: #EE3E3B;
			}
			
		}
		.date-content::-webkit-scrollbar{
			display: none;
		}
	}
	
	.time-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		max-height: 340rpx;
		overflow-y: auto;

		.time-item {
			width: 48%;
			height: 60rpx;
			border-radius: 10rpx;
			text-align: center;
			font-size: 34rpx;
			margin-bottom: 23rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 25rpx;
			line-height: 58rpx;
			color: #000;
			background: #F5F5F5;
		}
		.time-active {
			background: #6A8A27;
			color: white;
		}
		.time-disable {
			background: #F5F5F5;
			color: #999999;
		}
	}
	
	.sku-bottom {
		width: 100%;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -3rpx 8rpx 0rpx rgba(71,71,71,0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 50rpx 50rpx 85rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #393B3E;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		.bottom-price {
			font-size: 48rpx;
			font-weight: bold;
			color: #D62828;
		}
		.bottom-price::before {
			font-size: 24rpx;
			content: '￥';
		}

		.bottom-btn {
			width: 250rpx;
			height: 80rpx;
			background: #6A8A27;
			border-radius: 11rpx;
			font-weight: bold;
			font-size: 32rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}

	::v-deep .uni-calendar-item--extra{
		color: #EE3E3B !important;
	}
	::v-deep .uni-calendar-item--isDay{
		background: #6A8A27 !important;
		border-radius: 50%;
		
		.uni-calendar-item--extra{
			color: white !important;
		}
	}
	
	::v-deep .uni-calendar-item--checked{
		background: #6A8A27 !important;
		border-radius: 50%;
		
		.uni-calendar-item--extra{
			color: white !important;
		}
	}

	.popup-content {
		background-color: white;
		height: auto;
		border-radius: 20rpx 20rpx 0 0;
		
		.bottom-productImg {
			display: flex;
			margin-bottom: 23rpx;
			flex-shrink: 0;
		}
		
		.bottom-productImg img {
			width: 218rpx;
			height: 179rpx;
			background: #666666;
			border-radius: 13rpx;
		}
		
		.right-content {
			margin: 10rpx 0 0 41rpx;
			flex: 1;
			width: 1rpx;
		}
		
		.bottom-productPrice {
			font-size: 40rpx;
			color: #FC524B;
		
			&:before {
				content: "￥";
				font-size: 26rpx;
			}
		}
		
		.bottom-content {
			width: 100%;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		
		.botProduct {
			width: 320rpx;
			// height: 78rpx;
			border-radius: 13rpx;
			background-color: #F5F5F5;
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 78rpx;
			text-align: center;
			margin-bottom: 25rpx;
			display: inline-block;
			position: relative;
			padding: 0 40rpx;
		}
		.noStore{
			background-color: rgba(239, 239, 239, 1);
			color: rgba(153, 153, 153, 1);
		}
		.noStore-text{
			width: 113rpx;
			height: 43rpx;
			background: #C0C0C0;
			border-radius: 7rpx 0rpx 7rpx 0rpx;
			text-align: center;
			line-height: 43rpx;
			position: absolute;
			right: -14rpx;
			top: -20rpx;
			font-size: 23rpx;
			font-family: PingFangSC;
			font-weight: 400;
			color: #FFFFFF;
		}
		
		
		.botProducts {
			background: #6A8A27;
			color: #FFFFFF;
		}
		
		.buy-num {
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 39rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.buy-num .number-btn {
			display: flex;
		}
		
		.buy-num .number-btn view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 69rpx;
			height: 69rpx;
			border: 1rpx solid #CCCCCC;
			border-radius: 7rpx;
		}
		
		.buy-num .number-btn>view text {
			font-size: 46rpx;
		}
		
		.buy-btn {
			width: 670rpx;
			height: 78rpx;
			text-align: center;
			line-height: 78rpx;
			background: linear-gradient(90deg, #F84A56, #FF9834);
			border-radius: 40rpx;
		
			font-size: 34rpx;
			font-family: PingFangSC;
			font-weight: 500;
			color: #FFFFFF;
		}
		
		.btn-box {
			width: 750rpx;
			height: 151rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.sp {
			width: 100%;
			height: 30rpx;
			font-size: 32rpx;
			font-family: PingFangSC;
			font-weight: 400;
			color: #060001;
			line-height: 30rpx;
			border-top: solid 2rpx #ccc;
			margin: 32rpx 0 60rpx;
			padding-top: 30rpx;
		}
		.sp-container{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			max-height: 400rpx;
			overflow-y: auto;
			padding-top: 20rpx;
			padding-right: 20rpx;
			overflow-x: hidden;
		}
		.sp-bottom-btn{
			width: 750rpx;
			height: 151rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			.btn{
				width: 697rpx;
				height: 73rpx;
				background: #6A8A2D;
				border-radius: 11rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 73rpx;
			}
		}
		
	}
	
</style>
