<template>
	<view style="height: 100vh; overflow: hidden; width: 100vw" v-if="details.Name">
		<scroll-view scroll-y="true" style="width: 100%; height: 100%" @scroll="scroll">
			<view style="
          height: 500rpx;
          position: relative;
          z-index: 1;
          background-color: #e7e7e7;
        "
			 :style="{ opacity: 100 - boxOption + '%' }">
				<!-- #ifdef MP-WEIXIN -->
				<view @click="goback" :style="[titleStyle, { opacity: '100% !important' }]" style="
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9;
            padding-left: 6rpx;
          ">
					<u-icon name="arrow-left" size="44" color="#ffffff" style="margin-top: 22rpx"></u-icon>
				</view>
				<!-- #endif -->
				<image class="banner-img" :src="details.AllPicList[0].TagPicList[0].Path" mode="aspectFill" @click="goUrl('/pages/ticketCoupons/imgList')"></image>
			</view>
			<view class="ticket-title-bar" :style="[titleStyle]">
				<view @click="goback">
					<!-- #ifdef MP-WEIXIN -->
					<u-icon name="arrow-left" size="44"></u-icon>
					<!-- #endif -->
				</view>
				<view style="flex: 1;margin-left: 30rpx; text-align: left;'background-color':'#000';white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
				 class="name-ali">
					{{ details.Name }}
				</view>
			</view>
			<view style="position: relative; z-index: 2">
				<view style="
            width: 750rpx;
            position: absolute;
            top: -70px;
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
            background-color: #fff;
          ">
					<view class="baseinfo">
						<view class="info1">
							<view class="name">
								{{ details.Name }}
							</view>
							<view class="score-bg">
								<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/pingfen-bg.png" mode="aspectFit"
								 class="pf-bg"></image>
								<view class="score">
									{{ details.ScoreNum }}
									<text v-if="
                      details.ScoreNum === 1 ||
                      details.ScoreNum === 2 ||
                      details.ScoreNum === 3 ||
                      details.ScoreNum === 4 ||
                      details.ScoreNum === 5
                    ">.0</text>
								</view>
							</view>
						</view>
						<view class="info2">
							<view class="BusinessState">
								<view v-if="details.BusinessState === 1">
									今日开放
									<text class="OpenTimeStr">{{ details.OpenTimeStr }}</text>
								</view>
								<text v-if="details.BusinessState === 0">暂未开发</text>
							</view>
							<view class="commenticon-box">
								<!-- 0条点评
								<u-icon name="arrow" color="#6E6E6E" size="20rpx" class="icon"></u-icon> -->
							</view>
						</view>
						<view class="info3">
							<view class="tag-box">
								<view v-for="(_item, _index) in details.ScenicSpotTag" :key="_index">
									<u-tag :text="_item" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini" class="tag" v-if="_item"></u-tag>
								</view>
								<view v-for="(_item, _index) in details.GeographicTag" :key="_index">
									<u-tag :text="_item" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini" class="tag" v-if="_item"></u-tag>
								</view>
							</view>
							<view class="policy-detail" @click="goUrl('/pages/ticketCoupons/policyDetail')">
								政策详情
								<u-icon name="arrow" color="#6E6E6E" size="24rpx" class="icon"></u-icon>
							</view>
						</view>
						<view class="line"></view>
						<view class="info4">
							<view class="mark-icon">
								<u-icon name="location" color="#111111" size="24rpx" class="icon"></u-icon>
							</view>
							<view class="address">
								{{ details.Address }}
							</view>
							<view class="see-map" @click="goMap(details.Address, details.Lng, details.Lat)">
								地图详情
								<u-icon name="arrow" color="#6E6E6E" size="24rpx" class="icon"></u-icon>
							</view>
						</view>
					</view>
					<view class="empty"></view>
					<view class="ticket-info">
						<view class="ticket-title">
							门票
							<text class="ticket-title-bg"></text>
						</view>
						<view class="ticket-navs" v-if="TicketList.length > 0">
							<view class="ticket-nav" :class="{ 'check-ticket-nav': checkTicketNavIndex === 1 }" @click="changeCheckTicketNavIndex(1)"
							 v-if="haveticket[0].date">
								{{ haveticket[0].date }}
							</view>
							<view class="ticket-nav" :class="{ 'check-ticket-nav': checkTicketNavIndex === 2 }" @click="changeCheckTicketNavIndex(2)"
							 v-if="haveticket[1].date">
								{{ haveticket[1].date }}
							</view>
							<view class="ticket-nav" :class="{ 'check-ticket-nav': checkTicketNavIndex === 3 }" @click="changeCheckTicketNavIndex(3)">
								{{ otherDate }}
							</view>
							<calendar ref="calendar" :insert="false" :selected="calendar" @confirm="confirm" @monthSwitch="changeMonth"></calendar>
						</view>
						<view>
							<view class="no-data" v-if="TicketList.length === 0">
								<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/no-data.png" mode="aspectFit"
								 class="no-data-img"></image>
								<view class="zhanwu"> 暂无数据 </view>
							</view>
							<view v-for="(item, index) in TicketList" :key="index" class="ticket-list-box" :class="{ 'last-item': index == TicketList.length - 1 }"
							 v-if="TicketList.length > 0">
								<view class="ticket-key" v-if="item.Key">
									{{ item.Key }}
								</view>
								<view class="ticket-list">
									<view v-for="(_item, _index) in item.TicketList" :key="_item.Id" class="ticket-list-item" :class="{
                      'last-item': _index == item.TicketList.length - 1,
                    }">
										<view class="TicketName">
											{{ _item.TicketName }}
										</view>
										<view class="price">
											<text class="price-pre">￥</text>{{
                        $utils.getretailer() == true
                          ? _item.HPriceB
                          : _item.HPriceC
                      }}
											<text class="price-nex">起</text>
										</view>
										<view class="tag" v-if="_item.IsSameDayBuy == 1">
											<image class="tag-img" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/likeruyuan.png"
											 mode="aspectFit" v-if="_item.IsSameDayBuy == 1"></image>
											<view class="tag-item" v-if="
                          (_item.SubscribeTime && _item.IsSameDayBuy == 1) ||
                          (_item.ChangeTickets && _item.IsSameDayBuy == 1)
                        ">
												<text v-if="_item.SubscribeTime && _item.IsSameDayBuy == 1">随时可买</text>
												<text class="gap" v-if="_item.ChangeTickets && _item.IsSameDayBuy == 1">无需换票</text>
											</view>
										</view>
										<!-- 无忧退款 -->
										<view class="WorryFreeRefund">
											<text v-if="_item.IsWorryFreeRefund === 0">无忧退款</text>
											<text v-if="_item.IsWorryFreeRefund != 0">有条件退</text>
										</view>
										<!-- 预订按钮 -->
										<view class="pre-buy" @click="chooseSubscribeTicket(_item)">
											预订
										</view>
										<!-- 已售 -->
										<view class="ticket-sell">
											<view class="sell">已售 {{ _item.SaleCount }}</view>
											<view class="vertical-line"></view>
											<view class="buy-know" @click="openBuyNotice(_item)">购买须知</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="empty"></view>
					<!-- 旅客点评 -->
					<!-- <view class="comment-box">
						<view class="ticket-title">
							旅客点评
							<text class="ticket-title-bg"></text>
						</view>
						
						<view class="evaluate-box">
								<view class="score-box">
									<view class="score">
										{{details.ScoreNum}}
										<text v-if="details.ScoreNum==1||details.ScoreNum==2||details.ScoreNum==3||details.ScoreNum==4||details.ScoreNum==5">.0</text>
										<text class="score-nex gap">分</text>
										<text class="score-nex">不错</text>
									</view>
									<view class="">
										
									</view>
								</view>
						</view>
					</view> -->
					<view class="detail-box">
						<view class="flex">
							<view class="big-title">
								<text>发现周边</text>
							</view>
							<view class="flex" style="margin-left: 64rpx">
								<view class="nearby-type" :class="{ active: nearbyType == 0 }" @click="changeNearbyType(0)">酒店
								</view>
								<view class="nearby-type" :class="{ active: nearbyType == 1 }" @click="changeNearbyType(1)">美食
								</view>
							</view>
						</view>
						<view class="flex" style="margin: 50rpx 0; overflow-x: auto">
							<template v-if="nearbyType == 0">
								<template v-if="details.HotelList" v-for="subItem in details.HotelList">
									<near-good :goodItem="subItem" :goodType="1"></near-good>
								</template>
							</template>
							<template v-if="nearbyType == 1">
								<template v-if="details.DiningList" v-for="subItem in details.DiningList">
									<near-good :goodItem="subItem" :goodType="2"></near-good>
								</template>
							</template>
						</view>
						<view class="flex">
							<view class="big-title">
								<text>精选推荐</text>
							</view>
							<view class="flex" style="margin-left: 64rpx">
								<view class="nearby-type active">附近满足条件景点({{ scenicArr.length }})</view>
							</view>
						</view>
						<view>
							<recommed-hotel :scenicArr="scenicArr" :dayObj="dayObj" :searchObj="searchObj">
							</recommed-hotel>
							<!-- <recommed-hotel :hotelType="1"></recommed-hotel> -->
						</view>
					</view>
				</view>

				<!-- 购票须知弹出层 -->
				<view>
					<u-popup v-model="showPop" mode="bottom" border-radius="40">
						<buyNotice :TicketData="curTicketData" :coverImg="details.AllPicList[0].TagPicList[0].Path" :score="details.ScoreNum"
						 @success="successBuyNotice"></buyNotice>
					</u-popup>
				</view>
				<!-- 填写订单弹出层 -->
				<view>
					<u-popup v-model="showSubscribeTicketPop" mode="bottom" border-radius="40">
						<view>
							<subscribeTicket :dateStr="Date" :TicketID="TicketID" :TitekCounponId="ID" :TicketName="TicketName" @close="showSubscribeTicketPop = false"
							 :TicketImg="details.AllPicList[0].TagPicList[0].Path" :msgPath="msgPath"></subscribeTicket>
						</view>
					</u-popup>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import calendar from "./components/uni-calendar/uni-calendar.vue";
	import buyNotice from "./components/buyNotice.vue";
	import subscribeTicket from "./components/subscribeTicket.vue";
	import nearGood from "./components/near-good.vue";
	import recommedHotel from "./components/recommed-hotel.vue";
	export default {
		components: {
			calendar,
			buyNotice,
			subscribeTicket,
			nearGood,
			recommedHotel,
		},
		data() {
			return {
				ID: 0,
				Date: "", //日期
				details: {},
				titleStyle: {},
				active: 0,
				mainColor: "",
				controls: false, //显示默认控件
				videoContext: "",
				checkTicketNavIndex: 1,
				imgBaseUrl: "",
				calendar: [{
					date: "",
					info: "",
				}, ], //日历高亮
				showPop: false,
				curTicketData: {},
				showSubscribeTicketPop: false, //订单弹出层
				TicketID: 0, //门票id
				TicketName: "",
				otherDate: "其他日期",
				msgPath: "",
				Up: 0,
				nearbyType: 0,
				scenicArr: [], //推荐景点
				haveticket: [{
					date: ""
				}, {
					date: ""
				}], //最近3天的票
				TicketList: [],
			};
		},
		onShareTimeline() {
			let uid = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserId :
				0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").SmallShopId :
				0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserSmallShopId :
					0;
			}
			let title = this.details.Name ? this.details.Name : "门票";
			let imageUrl = this.details.AllPicList[0].TagPicList[0].Path ?
				this.details.AllPicList[0].TagPicList[0].Path :
				"";
			let id = this.ID;
			this.Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
			return {
				title: title,
				query: "id=" +
					this.id +
					"&user_id=" +
					uid +
					"&SmallShopId=" +
					SmallShopId +
					"&Up=" +
					this.Up,
				imageUrl: imageUrl,
			};
		},
		onShareAppMessage(res) {
			let u = uni.getStorageSync("mall_UserInfo");
			let uid = u.UserId ? u.UserId : 0;
			if (uid == 0) {
				uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
			}
			let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
			if (SmallShopId == 0) {
				//如果微店id为0 去找所属微店id
				SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
			}
			return {
				title: this.details.Name ? this.details.Name : "门票",
				path: "/pages/index/index?id=" +
					this.ID +
					"&user_id=" +
					uid +
					"&SmallShopId=" +
					SmallShopId +
					"&Up=" +
					this.Up +
					"&JumpType=15",
				imageUrl: this.details.AllPicList[0].TagPicList[0].Path ?
					this.details.AllPicList[0].TagPicList[0].Path :
					"",
			};
		},
		onLoad(options) {
			let that = this;
			if (options && options.id) {
				this.ID = parseInt(options.id);
				this.getDetail();
			}
			this.msgPath = "/pages/ticketCoupons/detail?id=" + options.id;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: 0,
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;

			let d = new Date();
			let year = d.getFullYear();
			let month = d.getMonth() + 1;
			if (month < 10) {
				month = "0" + month;
			}
			let day = d.getDate();
			if (day < 10) {
				day = "0" + day;
			}
			let today = year + "-" + month + "-" + day;
			this.Date = today;
			this.calendar.date = today;
			this.getRecomHotel();
			this.getGoodsprice(this.Date);
		},

		methods: {
			//选择其他日期门票
			confirm(e) {
				if (e.fulldate == this.haveticket[0].date) {
					this.checkTicketNavIndex = 1;
					this.otherDate = "其他日期";
				} else if (e.fulldate == this.haveticket[1].date) {
					this.checkTicketNavIndex = 2;
					this.otherDate = "其他日期";
				} else {
					this.otherDate = e.fulldate;
				}
				this.Date = e.fulldate;
				// this.calendar[0].date = e.fulldate

				this.getDetailByDate();
				this.$forceUpdate();
			},
			openBuyNotice(item) {
				this.curTicketData = item;
				this.showPop = true;
			},
			goUrl(url) {
				uni.navigateTo({
					url: url + "?id=" + this.ID,
				});
			},
			chooseSubscribeTicket(item) {
				this.showSubscribeTicketPop = true;
				this.TicketID = item.Id;
				let ticketName = "";
				if (item.TicketSubName) {
					ticketName += item.TicketSubName;
				}
				if (item.TicketName) {
					ticketName += item.TicketName;
				}
				this.TicketName = ticketName;
			},
			//获取详情
			getDetail() {
				uni.showLoading({
					title: "加载中...",
				});
				this.request2({
						url: "/api/AppletDining/GetTicketCouponsDetails",
						data: {
							ID: this.ID,
						},
					},
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							res.data.ScenicSpotTag = res.data.ScenicSpotTag.split(",");
							res.data.GeographicTag = res.data.GeographicTag.split(",");
							this.details = res.data;
							if (res.data.newMealList.length > 0) {
								this.TicketList = [];
								this.TicketList = res.data.newMealList[0].MealList;
								this.haveticket[0].date = res.data.newMealList[0].DayStr;
								this.haveticket[1].date = res.data.newMealList[1].DayStr;
							}
						}
					},
					(err) => {
						uni.hideLoading();
					}
				);
			},
			// 根据景点id与指定日期获取门票列表信息
			getDetailByDate() {
				this.request2({
						url: "/api/AppletDining/GetTicketCouponsTicketList",
						data: {
							ID: this.ID,
							BuyDate: this.Date,
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.TicketList = res.data;
						}
					}
				);
			},

			changeHandler(i) {
				this.active = i;
			},

			scroll(e) {
				this.titleStyle.opacity =
					e.detail.scrollTop - 100 < 0 ?
					0 :
					Math.floor(e.detail.scrollTop - 100) / 100 > 1 ?
					1 :
					Math.floor(e.detail.scrollTop - 100) / 100;
				this.tooltipShow = false;
				this.$forceUpdate();
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},

			goMap(name, lon, lat) {
				let newLat = parseFloat(lat);
				let newLon = parseFloat(lon);
				uni.openLocation({
					latitude: newLat,
					longitude: newLon,
					scale: 18,
					name,
					address: name,
					success: (res) => {},
					fail: (err) => {},
				});
			},
			// 选择门票日期
			changeCheckTicketNavIndex(i) {
				this.checkTicketNavIndex = i;
				if (i === 1) {
					// let d = new Date();
					// let year = d.getFullYear();
					// let month = d.getMonth() + 1
					// if (month < 10) {
					// 	month = '0' + month
					// }
					// let day = d.getDate()
					// if (day < 10) {
					// 	day = '0' + day
					// }
					// let today = year + '-' + month + '-' + day
					// this.Date = today
					this.otherDate = "其他日期";
					this.Date = this.haveticket[0].date;
					this.getDetailByDate();
					this.$forceUpdate();
				} else if (i === 2) {
					// let d = new Date();
					// let nextDate = new Date(d.getTime() + 24 * 60 * 60 * 1000);
					// let year = nextDate.getFullYear();
					// let month = nextDate.getMonth() + 1
					// if (month < 10) {
					// 	month = '0' + month
					// }
					// let day = nextDate.getDate()
					// if (day < 10) {
					// 	day = '0' + day
					// }
					// let tomorrow = year + '-' + month + '-' + day
					// this.Date = tomorrow
					this.otherDate = "其他日期";
					this.Date = this.haveticket[1].date;
					this.getDetailByDate();
					this.$forceUpdate();
				} else if (i === 3) {
					this.$refs.calendar.open();
				}
			},
			successBuyNotice() {
				this.showPop = false;
				this.showSubscribeTicketPop = true;
			},
			changeNearbyType(t) {
				this.nearbyType = t;
			},
			getGoodsprice(date) {
				this.request2({
						url: "/api/AppletDining/GetMonthTicketList",
						data: {
							TicketID: 0,
							BuyDate: date,
							TicketCounponID: this.ID,
						},
					},

					(res) => {
						if (res.resultCode === 1) {
							// calendar: [{
							// 	date: "",
							// 	info: ''
							// }],
							this.calendar = [];
							let now = new Date();
							now.setHours(0); //设置小时
							now.setMinutes(0); //设置分钟
							now.setSeconds(0); //设置秒
							now.setMilliseconds(0); //设置毫妙
							let today = now.getTime();
							res.data.map((i) => {
								let resDay = Date.parse(i.Year + "-" + i.Month + "-" + i.Day);
								if (i.IsHavePrice === 1 && resDay >= today) {
									let obj = {
										date: i.Year + "-" + i.Month + "-" + i.Day,
										// info:"有票",
									};
									this.calendar.push(obj);
								}
							});
						}
					}
				);
			},
			//获取推荐景点
			getRecomHotel() {
				this.request2({
						url: "/api/AppletDining/GetTicketCouponsPage",
						data: {
							pageIndex: 1,
							pageSize: 10,
							Name: "",
							FoodTypeIds: 0,
							IsFree: -1,
							IsSameDayBuy: -1,
							IsWorryFreeRefund: -1,
							OrderBy: 3,
							ID: parseInt(this.ID),
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.scenicArr = [];
							let tempHotel = res.data.pageData;
							tempHotel.forEach((x) => {
								if (this.scenicArr.length < 2) {
									this.scenicArr.push(x);
								}
							});
						}
					}
				);
			},
			changeMonth(val) {
				let now = new Date();
				now.setDate(1);
				now.setHours(0); //设置小时
				now.setMinutes(0); //设置分钟
				now.setSeconds(0); //设置秒
				now.setMilliseconds(0); //设置毫妙
				let curMonth = now.getTime();

				let chooseYear = val.year;
				let chooseMonth = val.month;
				if (chooseMonth < 10) {
					chooseMonth = "0" + chooseMonth;
				}
				let date = chooseYear + "-" + chooseMonth + "-01";
				let changeMonth = Date.parse(date);
				if (changeMonth >= curMonth) {
					this.getGoodsprice(date);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.banner-img {
		width: 750rpx;
		height: 500rpx;
	}

	.ticket-title-bar {
		line-height: 45px !important;
		font-size: 16px;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		color: #111;
		box-sizing: content-box;
		z-index: 5;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		padding-left: 6rpx;
	}

	.label-b {
		height: 20px;
		padding: 0 3px;
		font-size: 13px;
		color: #fff;
		border-radius: 4px;
		font-weight: bold;
	}

	.brand-xinx {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.brand-xinx-item {
		width: 33%;
		font-size: 17px;
	}

	.brand-xinx-item-m {
		font-size: 12px;
		color: #a4a4a4;
		margin: 10px 0;
	}

	.brand-xinx-item-t {
		display: flex;
		align-items: flex-end;
		font-weight: bold;
	}

	.brand-x {
		width: 100%;
		display: flex;
		align-items: flex-start;
		margin-top: 18px;
	}

	.brand-x-l {
		font-size: 13px;
		color: #a4a4a4;
		width: 130rpx;
	}

	.brand-x-r {
		font-size: 13px;
		color: #1f1f1f;
		line-height: 20px;

		font-family: PingFang SC;
		width: calc(100vw - 40px - 130rpx);
	}

	.brand-title {
		width: 134rpx;
		margin-top: 30px;
	}

	.brand-title image {
		width: 100%;
		height: auto;
	}

	.Listbox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.Listbox-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 170rpx;
		align-items: center;
		justify-content: center;
	}

	.Listbox-item image {
		width: 74rpx;
		height: auto;
	}

	.list-item-text {
		width: calc(100vw / 4);
		margin-top: 5px;
		text-align: center;
		font-size: 12rpx;
	}

	.no-data {
		.no-data-img {
			width: 180rpx;
			height: 240rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.zhanwu {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-top: 20rpx;
		}
	}

	.baseinfo {
		padding: 30rpx 45rpx;

		.info1 {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.name {
				width: 575rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #111111;
				line-height: 44rpx;
			}

			.score-bg {
				position: relative;
				width: 65rpx;
				height: 65rpx;
				background-color: #ffffff;

				.pf-bg {
					width: 65rpx;
					height: 65rpx;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
				}
			}

			.score {
				width: 64rpx;
				height: 54rpx;
				// background: linear-gradient(0deg, rgba(228, 177, 53, 0.72), rgba(223, 190, 110, 0));
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #ffffff;
				line-height: 44rpx;
				position: absolute;
				left: 8rpx;
				top: 4rpx;
				z-index: 2;
			}
		}

		.info2 {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #dfbe6e;
			line-height: 44rpx;
			display: flex;
			justify-content: space-between;

			.BusinessState {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #dfbe6e;

				.OpenTimeStr {
					margin-left: 10rpx;
					color: #111111;
					font-weight: bold;
				}
			}

			.commenticon-box {
				display: flex;
			}

			.icon {
				margin-left: 10rpx;
			}
		}

		.info3 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tag-box {
				display: flex;
				align-items: center;

				.tag {
					margin-right: 10rpx;
				}
			}

			.policy-detail {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				display: flex;
				align-items: center;

				.icon {
					margin-left: 10rpx;
				}
			}
		}

		.line {
			height: 1rpx;
			background-color: #111111;
			opacity: 0.1;
			margin: 35rpx 0;
		}

		.info4 {
			height: 70rpx;
			display: flex;
			align-items: center;

			.mark-icon {
				width: 22rpx;
				margin-right: 20rpx;
			}

			.address {
				width: 420rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #111111;
				line-height: 44rpx;
				margin-right: 70rpx;
			}

			.see-map {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				line-height: 44rpx;
				display: flex;
				align-items: center;

				.icon {
					margin-left: 10rpx;
				}
			}
		}
	}

	.empty {
		height: 20rpx;
		background-color: #ecf1f4;
	}

	.ticket-title {
		// width: 70rpx;
		height: 50rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1f1f1f;
		background-color: transparent;
		// line-height: 44rpx;
		position: relative;
		margin-bottom: 40rpx;

		.ticket-title-bg {
			width: 70rpx;
			height: 10rpx;
			background-color: #dfbe6e;
			border-radius: 4px;
			position: absolute;
			left: 0;
			bottom: 6rpx;
			z-index: 1;
			opacity: 0.6;
		}
	}

	.ticket-info {
		padding: 50rpx 45rpx;

		.ticket-navs {
			// height: 140rpx;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.ticket-nav {
				height: 60rpx;
				background-color: #ecf1f4;
				border-radius: 20rpx;
				text-align: center;
				line-height: 60rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				padding: 0 30rpx;
				margin-right: 20rpx;
			}

			.check-ticket-nav {
				background-color: #111111 !important;
				color: #ffffff !important;
			}
		}

		.ticket-list-box {
			margin-bottom: 50rpx;

			.ticket-key {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #111111;
				margin-bottom: 25rpx;
			}

			.ticket-list {
				padding: 40rpx 40rpx 0rpx 40rpx;
				background-color: #f4f4f4;

				.ticket-list-item {
					padding-bottom: 30rpx;
					margin-bottom: 30rpx;
					border-bottom: 2rpx solid #e4e4e4;
					position: relative;

					.TicketName {
						max-width: 450rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
						margin-bottom: 20rpx;
					}

					.price {
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #d91818;
						position: absolute;
						top: 0;
						right: 0;

						.price-pre {
							font-size: 22rpx;
						}

						.price-nex {
							font-size: 22rpx;
							color: #919191;
						}
					}

					.tag {
						display: flex;
						max-width: 70%;
						height: 32rpx;
						margin-bottom: 20rpx;

						.tag-img {
							width: 105rpx;
							height: 32rpx;
							// background-color: #FFFFFF;
							border-radius: 4rpx;
						}

						.tag-item {
							border: 2rpx solid #dfbe6e;
							border-radius: 0px 4rpx 4rpx 0px;
							background-color: #f4f4f4;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							padding: 0 14rpx;
						}

						.gap {
							margin-left: 15rpx;
						}
					}

					// <!-- 无忧退款 -->
					.WorryFreeRefund {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #dfbe6e;
						margin-bottom: 15rpx;
					}

					.pre-buy {
						width: 114rpx;
						height: 60rpx;
						background: #111111;
						border-radius: 8rpx;
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #ffffff;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: 85rpx;
						right: 0rpx;
					}

					.ticket-sell {
						display: flex;
						align-items: center;

						.sell {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #111111;
							// letter-spacing:2rpx
						}

						.vertical-line {
							width: 1rpx;
							height: 22rpx;
							margin: 0 15rpx;
							background-color: #111111;
						}

						.buy-know {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 800;
							color: #111111;
						}
					}
				}
			}
		}

		.last-item {
			border-bottom: none !important;
			margin-bottom: 0rpx !important;
		}
	}

	.comment-box {
		padding: 50rpx 45rpx;

		.score-box {
			width: 235rpx;
			display: flex;

			.score {
				font-size: 60rpx;
				font-family: PingFang SC;
				font-weight: 700;
				color: #f0c253;
				line-height: 60rpx;

				// background: linear-gradient(0deg, #F0C253 0%, #FDD679 100%);
				.score-nex {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 24rpx;
				}

				.gap {
					margin-right: 10rpx;
				}
			}
		}
	}

	.detail-box {
		padding: 50rpx;
	}

	.detail-box .nearby-type {
		padding: 0 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-right: 10rpx;

		font-size: 28rpx;
		font-weight: 500;
		color: #1f1f1f;
	}

	.detail-box .nearby-type.active {
		color: #dfbe6e;
		background: rgba(223, 190, 110, 0.2);
	}

	.big-title {
		position: relative;
	}

	.big-title::before {
		display: block;
		width: 71rpx;
		height: 12rpx;
		background: #dfbe6e;
		border-radius: 4rpx;
		content: " ";

		position: absolute;
		left: 0;
		bottom: 6rpx;
		z-index: 1;
	}

	.big-title text {
		font-size: 34rpx;
		font-weight: bold;
		color: #1f1f1f;
		position: relative;
		z-index: 2;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.nearby-type {
		padding: 0 16rpx;
		height: 40rpx;

		background: #fff;
		border-radius: 20rpx;
		margin-right: 10rpx;

		font-size: 28rpx;
		font-weight: 500;
		color: #1f1f1f;
	}

	.active {
		color: #dfbe6e;
		background: rgba(223, 190, 110, 0.2);
	}

	.name-ali {
		// #ifdef MP-ALIPAY
		box-sizing: border-box;
		padding-left: 30rpx;
		// #endif
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
