<template>
	<view class="bg">
		<view class="order-goods-container" v-for="(item,i) in orderList" :key="i">
			<view class="top-box1" >
				<view class="top-left">
					<view class="title text-overflow">{{ item.pInfo.title }}</view>
					<view>
						<view style="padding: 20rpx 0 10rpx;" v-if="item.allSeldDate.length > 0">
						{{item.showDate.date}} {{ShowDateDay(new Date(item.showDate.date).getDay())}}</view>
						<view v-if="item.showDate.startTime">{{ item.showDate.startTime }}-{{ item.showDate.endTime }} 入园</view>
					</view>
				</view>
				<view class="top-edit" @click="changeSku(item)">修改 <uni-icons style="height: 20rpx;" color="#6A8A27" type="right" size="12"></uni-icons></view>
			</view>
			<view class="tickets-box">
				<view class="w-full num-box">
					<view class="flex-between num-left">
						<view class="left-title text-overflow">{{item.sInfo.sku_name}}</view>
						<view class="left-price">{{item.sInfo.price / 100}}</view>
						<view class="num-right">
							<view :class="['btn-num',item.sInfo.buyNum<=1?'disabled':'']"   @click="delNumber(item.sInfo)" >-</view>
							<view class="num-span">{{ item.sInfo.buyNum }}</view>
							<view class="btn-num"  @click="addNumber(item.sInfo)" >+</view>
						</view>
					</view>
					<view style="padding: 30rpx 0 20rpx;" class="num-subtitle text-overflow" @click="showpopRule(true, item.sInfo)">
						<view class="flex" v-if="item.sInfo.display_tags">
							{{item.sInfo.display_tags.split(',').join(" | ")}}
							<text style="padding:0 4rpx">|</text>
						</view>
						<view > 预订须知 ></view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="people-box" >
			<view class="people-box-title">出行人信息</view>
			<view style="padding: 42rpx 0 10rpx;">
				<view class="people-box-sku">
					<view class="w-full flex flex-items-center"  style="padding-bottom: 33rpx;font-size: 29rpx;">
						<view style="width: 170rpx;" class="flex-shrink-0">联系手机</view>
						<view class="flex flex-between flex-1 w-1rpx" >
							<input class="input" type="text" placeholder="请输入手机号" v-model="phone" />
							<uni-icons v-if="phone&&phone.length>0"
								type="closeempty" size="14" @click="clearTel()"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 优惠券 -->
		<view @click="goOrderCoupon" class="tickets-container flex-between top-line" v-if="!isShoppingCart">
			<view class="order-title">优惠券</view>
			<view class="coupon-btn" v-if="coupon==''">
				<view class="select">选择优惠券</view>
				<uni-icons style="height: 42rpx;" color="#999999" type="right" size="18"></uni-icons>
			</view>
			<div class="coupon-price" v-else>
				<span v-if="coupon.activity.fold == 0">-￥{{coupon.activity.money/100}}</span>
				<span v-else>-{{coupon.activity.fold*10}}%</span>
				<span style="margin:0 31rpx 0 8rpx;color: #6C7A94;">></span>
			</div>
		 </view>
		
		<view class="btn-list">
			<view class="price-box">
				<view class="text">合计:</view>
				<view class="price">{{ total() }}</view>
			</view>
			<view class="btn" @click="order()">去支付</view>
		</view>
		
		
		<!-- 预订须知的弹窗 -->
		<uni-popup ref="popupRule" type="bottom" :safe-area="false">
			<view class="popup-content-date flex-column flex" >
				<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="showpopRule(null)"
						style="width: 20rpx;height: 20rpx;" class="flex-shrink-0">
				</view>	
				<view class="content flex-1 h-1rpx no-scrollbar" v-if="skuInfo && skuInfo.sku_model">
					<view 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 calendar-edit" v-if="singleOrder.sInfo && singleOrder.sInfo.id">
				<view class="popup-content-title flex">
					<view class="flex-1 w-1rpx text-overflow">
						{{singleOrder.sInfo.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',singleOrder.seldDateIndex===index?'active':'']" 
							v-for="(item,index) in singleOrder.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">￥{{item.price/100}}</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="singleOrder.timesArr.length > 0 && singleOrder.sInfo.sku_model.is_time_stock">
						<view class="sku-title">选择场次</view>
						<view class="time-box">
							<view v-for="(item,index) in singleOrder.timesArr" :key="index" 
							:class="['time-item',{'time-disable': item.stock_number < 1, 'time-active': item.stock_number > 0 && index == singleOrder.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">{{singleOrder.allSeldDate[singleOrder.seldDateIndex].price / 100 || 0}}</view>
					</view>
					<view class="bottom-btn" @click="addBuyCard">
							确定
					</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 {
		components: {},
		data() {
			return {
				// 下单产品
				orderList: [],
				phone: '',
				
				minSeldDate: new Date().Format('yyyy-MM-dd'),
				maxSeldDate: new Date((new Date().getTime()+60*24*60*60*1000)).Format('yyyy-MM-dd'),
				calendarParam: {
					stratDate:'',endDate: '', selected: []
				},
				coupon:'',
				
				singleOrderForChange: {}, // 浅拷贝
				singleOrder: {}, // 深拷贝修改的数据
				
				skuInfo: {}, // 预定须知当前点击的sku
				isShoppingCart: false,
			}
		},
		onLoad(options) {
			if (options.isShoppingCart) {
				this.isShoppingCart = options.isShoppingCart
			}
			// this.getList();
			this.$store.commit("choseCoupon", "");
			this.initPageData()
			this.getUserInfo()
		},
		
		onShow() {
			if (!this.isShoppingCart) {
				this.coupon = this.$store.state.user.coupon
			}
		},

		methods: {
			goOrderCoupon () {
				let allPrice = 0
				let skuIds= []
				this.orderList.forEach(v=>{
					allPrice+= v.sInfo.price*v.sInfo.buyNum
					if (v.sInfo.buyNum>0) {
						skuIds.push(v.sInfo.id)
					}
				})
				uni.navigateTo({
					url: `/subPackages/order/orderCoupon?allprice=${allPrice}&sku_ids=${skuIds.join(',')}`
				})
			},
			
			// 获取最大优惠券
			async getMaxCouponData () {
				let allPrice = 0
				let skuIds= []
				this.orderList.forEach(v=>{
					allPrice+= v.sInfo.price*v.sInfo.buyNum
					if (v.sInfo.buyNum>0) {
						skuIds.push(v.sInfo.id)
					}
				})
				let param = {sku_ids: skuIds.join(','), money: allPrice}
				let res = await this.getMaxCoupon(param)
				if (res.id) {
					this.coupon = res
				}
			},
			
			initPageData () {
				let data = this.$store.state.user.ticketOrderList;
				try{
					data.forEach(v=>{
						v.allSeldDate = v.allSeldDate || [];
						v.seldDateIndex = v.seldDateIndex>=0?v.seldDateIndex:-1
						v.timesArr = v.timesArr || []
						v.seldTimeIndex = v.seldTimeIndex>=0?v.seldTimeIndex:-1
						v.showDate = {
							date: ((v.allSeldDate[v.seldDateIndex])||{}).date,
							startTime: (v.timesArr[v.seldTimeIndex]||{}).start_time,
							endTime: (v.timesArr[v.seldTimeIndex]||{}).end_time
						}
					})
					this.orderList = data
					console.log(this.orderList)
					
				} catch(e){
					console.log(e)
				}
				if (!this.isShoppingCart) {
					this.getMaxCouponData()
				}
			},

			clearTel () {this.phone = ''},
			
			// 减少数量
			delNumber(skuItem) {
				if (skuItem.buyNum <= 1) {
					return
				}
				skuItem.buyNum -= 1
				this.$store.commit("choseCoupon","");
				this.coupon = ''

			},
			// 增加数量
			addNumber(skuItem) {
				skuItem.buyNum += 1
				this.$store.commit("choseCoupon","");
				this.coupon = ''
			
			},
			// 计算总价
			total() {
				let price = 0
				let allPrice = 0
				this.orderList.forEach(v=>{
					allPrice+= v.sInfo.price*v.sInfo.buyNum
				})
				this.allprice = allPrice
				if (this.coupon) {
					if (this.coupon.activity.fold == 0) {
						if (this.coupon.activity.money>allPrice) {
							price =0
						}else{
							price = allPrice  - (this.coupon.activity.money)
						}
						
					} else{
						price = allPrice - allPrice * (this.coupon.activity.fold*10/100)
					}
				} else {
					price = allPrice
				}
				return price < 0 ? 0 : (price/100).toFixed(2)
			},
			
	
			
			// 预定须知
			showpopRule(flag, item) {
				if (item) {
					this.skuInfo = item
				} 
				if (flag) {
					this.$refs.popupRule.open('bottom');
				} else {
					this.$refs.popupRule.close();
				}
			},
			
			/*---------------------------价格日历-----------------------------------*/
			// 选择列表规格
			changeSku(item) {
				this.singleOrderForChange = item
				this.singleOrder = JSON.parse(JSON.stringify(item)) 
				// 重新获取分时
				this.getPriceCal()
			},
			// 获取价格日历列表
			getPriceCal() {
				this.Post({
					start_date: this.minSeldDate,
					end_date: this.maxSeldDate,
					sku_id: this.singleOrder.sInfo.id
				}, '/api/product/product_date_price').then(res => {
					this.singleOrder.allSeldDate = res.data || []
					if (this.singleOrder.seldDateIndex<0) {
						this.singleOrder.seldDateIndex = this.singleOrder.allSeldDate.findIndex(item => item.stock > 0)
					}
					if (this.singleOrder.seldDateIndex<0) {
						uni.showToast({
							title: '暂无库存',
							icon: 'none',
						})
						return
					}
					this.getTimeStock(this.singleOrder.allSeldDate[this.singleOrder.seldDateIndex].date)
					this.openPop()
				})
			},
			// 获取规格分时库存
			getTimeStock(date) {
				if (!this.singleOrder.sInfo.sku_model.is_time_stock || this.singleOrder.seldDateIndex<0) {
					return
				}
				this.Post({
					sku_id: this.singleOrder.sInfo.id,
					date: date,
				}, '/api/product/product_timestock_price').then(res => {
					this.singleOrder.timesArr = res.data || []
					if (this.singleOrder.seldTimeIndex<0) {
						this.singleOrder.seldTimeIndex = this.singleOrder.timesArr.findIndex(item => item.stock_number > 0)
					}
				})
			},
			
			openCalendar () {
				this.calendarParam = {
					startDate: (this.singleOrder.allSeldDate.find(v=>v.stock>0) || {}).date,
					endDate: (this.singleOrder.allSeldDate[this.singleOrder.allSeldDate.findLastIndex(v=>v.stock>0)]||{}).date,
					selected: this.singleOrder.allSeldDate.filter(v=>v.stock>0).map(v=>{
						return {
							date: v.date,
							info: '￥'+v.price/100,
							notNeedDot:true,
						}
					})
				}
				this.$refs.calendar.open();
			},

			// 选择日期
			clickTab(item, index) {
				if (item.stock>0) {
					this.singleOrder.seldDateIndex = index
					this.getTimeStock(item.date)
				}
				
			},
			// 选择时段
			changeTime(item, index) {
				if(item.stock_number > 0) {
					this.singleOrder.seldTimeIndex = index
				}
			},
			confirmCalendar (val) {
				let index = this.singleOrder.allSeldDate.findIndex(v=>v.date == val.fulldate)
				if (index>=0) {
					this.clickTab(this.singleOrder.allSeldDate[index],index)
				}
			},
			closePopup() {
				this.$refs.popup.close()
			},
			openPop(){
				this.$refs.popup.open()
			},
			addBuyCard () {
				// 如果是分时，未选择分时
				if(this.singleOrder.sInfo.is_time_stock && this.singleOrder.seldTimeIndex < 0) {
					uni.showToast({title:'请选择分时',icon:'none'})
					return;
				}
				this.singleOrder.showDate = {
					date: ((this.singleOrder.allSeldDate[this.singleOrder.seldDateIndex])||{}).date,
					startTime: (this.singleOrder.timesArr[this.singleOrder.seldTimeIndex]||{}).start_time,
					endTime: (this.singleOrder.timesArr[this.singleOrder.seldTimeIndex]||{}).end_time
				}
				// 修改原本的数据
				this.singleOrderForChange.allSeldDate = this.singleOrder.allSeldDate
				this.singleOrderForChange.timesArr = this.singleOrder.timesArr
				this.singleOrderForChange.seldDateIndex = this.singleOrder.seldDateIndex
				this.singleOrderForChange.seldTimeIndex = this.singleOrder.seldTimeIndex
				this.singleOrderForChange.showDate = this.singleOrder.showDate
				this.closePopup()

			},
			/*---------------------------价格日历-----------------------------------*/
			order() {
				let goods = []
				console.log(this.orderList)
				if (this.orderList.some(v=>!v.showDate.date)) {
					uni.showToast({title: '请选择价格日历',icon:'none'})
					return
				}
				if (this.orderList.some(v=>v.sInfo.is_time_stock && v.seldTimeIndex < 0)) {
					uni.showToast({title:'请选择分时',icon:'none'})
					return;
				}
				
				// 设置参数
				this.orderList.forEach(item=>{
					item.phone = this.phone
					
					let sku = item.sInfo
					let use_date = item.allSeldDate[item.seldDateIndex].date
					let start_time =(item.timesArr[item.seldTimeIndex]||{}).start_time
					let end_time = (item.timesArr[item.seldTimeIndex]||{}).end_time
					let param = {
						type: item.pInfo.type,
						product_id: item.pInfo.id,
						sku_id: sku.id,
						product_num: sku.buyNum,
						use_date: use_date,
						start_time: start_time||'',
						end_time: end_time||'',
						phone: this.phone,
						remark: item.remark,
					}
					goods.push(param)
				})
				
				// 如果是购物车下单
				if (this.isShoppingCart) {
					this.$store.commit("changeTicketOrderList", this.orderList);
					// uni.setStorageSync("ticketOrderList", this.orderList)
					this.goCartNextPage(4)
					return
				}
				
			
				let data = {
					product_list: goods,
					coupon_id: this.coupon ? this.coupon.id : null,
				}
				console.log('data数据',data);
				this.Post({
					method: 'POST',
					data: JSON.stringify(data)
				}, '/api/order/create').then(res => {
					if (res.code == 1) {
						console.log(res.data.order_id);
						let order_id = res.data.order_id
						this.$store.commit("choseCoupon", "");
						this.Post({
							order_id: order_id,
							pay_platform: "MINI",
							pay_method: 'WEIXIN',
						}, '/api/order/pay').then(res => {
							if (res.data) {
								uni.requestPayment({
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									paySign: res.data.paySign,
									signType: res.data.signType,
									timeStamp: res.data.timeStamp,
									complete: () => {
										this.gotoPath('/subPackages/order/trades')
									}
								})
							}
						})
					}
				})
			},
			
			// 获取默认手机号
			getUserInfo () {
				this.Post({},'/api/uservice/user/getMyInfo').then(res=>{
					if (res.code==1 && res.data &&res.data.mobile) {
						this.phone = res.data.mobile
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	.bg{
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 200rpx;
		background-color: rgb(247, 247, 247);
	}
	
	.top-box1 {
	    width: 100%;
	    background: #FFFFFF;
	    border-radius: 13rpx;
	    padding: 32rpx 20rpx;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    font-weight: 500;
	    font-size: 25rpx;
	    color: #999999;
	
	    .top-left {
	        display: flex;
	        flex-direction: column;
	        justify-content: space-between;
	        flex: 1;
			width: 1rpx;
			.title{
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}
	    }
		.top-edit{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 27rpx;
			color: #6A8A27;
		}
	}

.tickets-box{
	background: #FFFFFF;
	border-radius: 13rpx;
	width: 100%;
	margin: 20rpx 0;
	
	.num-box {
	    display: flex;
	    justify-content: space-between;
		flex-direction: column;
		padding: 40rpx 20rpx;
	
	    .num-left {
	        width: 100%;
	        box-sizing: border-box;
	        display: flex;
	        justify-content: space-between;
	        .left-title {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 31rpx;
				color: #000000;
				width: 450rpx;
	        }
	        .left-price {
	            font-weight: bold;
	            font-size: 36rpx;
	            color: #D62828;
				padding-right: 27rpx;
	        }
	        .left-price::before {
	            font-size: 24rpx;
	            content: '￥';
	        }
	
	
	    }
		.num-subtitle {
			display: flex;
			align-items: center;
			width: 100%;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #6A8A27;
		}
	    .num-right {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 29rpx;
			color: #000000;
			text-align: center;
	        .num-span {
	            width: 67rpx;
	            line-height: 63rpx;
	        }
	
	        .btn-num {
	            width: 46rpx;
	            height: 46rpx;
	            line-height: 40rpx;
	            background: #6A8A27;
	            border-radius: 50%;
	            font-weight: 500;
	            font-size: 45rpx;
	            font-size: 34rpx;
	            color: #FFFFFF;
	        }
			.btn-num.disabled{
				color: #999999;
				background: white;
				border: 1px solid #999;
			}
	    }
	}
	
	
	.buyMore{
		height: 118rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 31rpx;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 20rpx;
		
		.buyMore-btn{
			height: 47rpx;
			width: 148rpx;
			text-align: center;
			border-radius: 23rpx;
			border: 1px solid #515150;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 25rpx;
			color: #515150;
			line-height: 45rpx;
		}
	}
}

.people-box{
	width: 100%;
	background: #FFFFFF;
	border-radius: 13rpx;
	.people-box-title{
		font-family: PingFangSC;
		font-weight: 600;
		font-size: 31rpx;
		color: #000000;
		padding: 42rpx 18rpx;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.person-scroll{
		display: flex;
		flex-wrap: nowrap;
		position: relative;
		padding-bottom: 50rpx;
		overflow-y: auto;
		.person-item-container{
			width: 167rpx;
			height: 73rpx;
			background: #F1F1F1;
			border-radius: 11rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 27rpx;
			color: #000000;
			padding: 2rpx;
			margin-right: 14rpx;
			position: relative;
			&.active{
				background: #515150
			}
			.disabled{
				font-weight: 400;
				font-size: 23rpx;
				color: #999999;
			}
			.selected{
				width: 28rpx;
				height: 28rpx;
				background: #515150;
				border-radius: 10rpx 0rpx 10rpx 0rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				display: flex;
				justify-content: center;
				line-height: 28rpx;
			}
		}
		.person-item{
			width: 163rpx;
			height: 69rpx;
			border-radius: 11rpx;
			background: #F1F1F1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		
	}
	
	.people-box-sku{
		width: 100%;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 0rpx 20rpx;
		
		.sku-title{
			font-weight: 400;
			font-size: 29rpx;
			color: #060001;
			padding-bottom: 25rpx;
		}
		
		.person-info{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 400;
			font-size: 27rpx;
			color: #000000;
			margin-bottom: 33rpx;
			.person-info-detail{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				width: 400rpx;
			}
		}
		
		.person-need{
			width: 100%;
			height: 80rpx;
			background: #F2F2F2;
			border-radius: 13rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #515150;
			padding: 0 20rpx;
		}
		.person-item-more{
			width: 110rpx;
			height: 73rpx;
			background: #F2F2F2;
			border-radius: 11rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 29rpx;
			color: #515150;
			line-height: 73rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
		
	}
}

.people-popup {
	padding: 26rpx;
	min-height: 800rpx;

	.top-box {
		height: 80rpx;

		.top {
			position: fixed;
			left: 0;
			right: 0;
			color: #000;
			height: 80rpx;
			font-size: 0;
			overflow: hidden;
			padding: 0 26rpx;

			text {
				text-align: left;
				font-size: 35rpx;
				font-weight: 400;
				color: #000000;
			}

			.confirm {
				font-weight: 400;
				color: #000000;
			}
		}
	}

	.popup-list {
		height: 666rpx;
		overflow: scroll;

		.popup-item {
			border-radius: 12rpx;
			padding: 2rpx;
			margin-top: 24rpx;
			font-size: 24rpx;
			color: #333333;
			font-weight: 400;
			background-color: #ffffff;

			.item-top {
				border-radius: 12rpx;
				padding: 30rpx 40rpx;
				background-color: #ffffff;
				
				img {
					color: #666666;
					width: 40rpx;
					height: 40rpx;
				}

				.name {
					overflow: hidden;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 32rpx;

					text {
						color: #666;
						font-size: 25rpx;
					}

					.tag {
						padding: 0 8rpx;
						height: 32rpx;
						border-radius: 7rpx;
						line-height: 30rpx;
						text-align: center;
						font-size: 23rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
						background: #515150;
						margin-left: 10rpx;
					}
				}

				.com-flex-start {
					margin: 0 0 30rpx;
				}

				.subtitle {
					font-weight: 400;
					flex: 1;
					text-align: left;
					margin-top: 33rpx;
					color: #666666;
					font-size: 25rpx;

					.mobile {
						margin-bottom: 36rpx;
					}
				}

				.status {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 50%;
					text-align: center;
					box-sizing: border-box;

					img {
						width: 27rpx;
						height: 21rpx;
					}
				}
				.statuss {
					background: linear-gradient(90deg, #fa2b66, #ff9834);
					border: none;
				}
				.noSelect {
					border: 1rpx solid #999999;
				}
			}

			.item-site {
				color: #666666;
				display: flex;
				align-items: center;
				padding: 36rpx 0;

				view {
					width: 23rpx;
					height: 23rpx;
					margin-right: 10rpx;
					border: 1rpx solid #999999;
					border-radius: 50%;

					view {
						width: 8rpx;
						height: 8rpx;
						background: #000000;
						border-radius: 50%;
						margin: auto;
					}
				}
			}
		}
		
		.popup-item.active{
			background: #515150
		}
		.popup-item.disabled{
			.item-top {
				background-color: #CCC;
			}
		}
	}

	.button {

		text-align: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 33rpx;
		color: #000000;

	}
	
	.add-edit-content{
		background: #FFFFFF;
		border-radius: 13rpx;
		min-height: 800rpx;
	}
}

	.tickets-container {
		width: 100%;
		background: #fff;
		height: 120rpx;
		margin-top: 22rpx;
		.order-title {
			margin: 31rpx 0 31rpx 30rpx;
			font-size: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		.coupon-price {
			color:#DD0000;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

.btn-list {
	width: 100%;
	height: 166rpx;
	background: #ffffff;
	box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5);
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right:0;
	padding: 20rpx 50rpx;
	align-items: center;
	justify-content: space-between;
	z-index: 99;
	.btn {
		width: 250rpx;
		height: 80rpx;
		background: #6A8A27;
		border-radius: 11rpx;
		text-align: center;
		line-height: 80rpx;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	.price-box {
		display: flex;
		align-items: baseline;
		.text {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #393b3e;
		}
		.price {
			margin-left: 15rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #D62828;
			&:before {
				content: '￥';
				display: inline-block;
				color: #D62828;
				font-size: 24rpx;
			}
		}
	}
}

	.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;
			}
		}
	
	.calendar-edit{
		.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-size: 32rpx;
				text-align: center;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}
	}
	
	.coupon-btn {
		color: #999999;;
		display: flex;
		align-items: center;
		.select {
			display: block;
			width: 153rpx;
			height: 40rpx;
			background: #6A8A27;
			border-radius: 9rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 40rpx;
			font-family: PingFang SC;
			margin-right: 20rpx;
	
		}
	}
	
	::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;
		}
	}
	
</style>
