<template>
	<view style="height: 100vh; overflow: hidden;width:100vw;">
		<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll">
			<view style="height: 700rpx;position: relative;z-index: 1;" :style="{'opacity':(100-boxOption)+'%'}">
				<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="#000" style="margin-top: 22rpx;"></u-icon>
				</view>
				<image class="banner-img" :src="imgBaseUrl+details.AllPicList[0].TagPicList[0].Path" mode="aspectFit"
					@click="goUrl('/pages/ticketCoupons/imgList')"></image>
			</view>
			<view class="ticket-title" :style="[titleStyleFix]">
				<view @click="goback">
					<u-icon name="arrow-left" size="44"></u-icon>
				</view>
				<view style="flex: 1;margin-left: 30rpx; text-align: left;'background-color':'#000'">{{details.Name}}
				</view>
			</view>
			<view style="position: relative;z-index: 2;">
				<view
					style="position: relative;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)">
								地图详情
							</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">
							<view class="ticket-nav" :class="{'check-ticket-nav':checkTicketNavIndex===1}"
								@click="changeCheckTicketNavIndex(1)">
								今日票
							</view>
							<view class="ticket-nav" :class="{'check-ticket-nav':checkTicketNavIndex===2}"
								@click="changeCheckTicketNavIndex(2)">
								明日票
							</view>
							<view class="ticket-nav" :class="{'check-ticket-nav':checkTicketNavIndex===3}"
								@click="changeCheckTicketNavIndex(3)">
								其他日期
							</view>
							<calendar ref="calendar" :insert="false" :selected="calendar" @confirm="confirm"></calendar>

						</view>
						<view>
							<view class="no-data" v-if="details.mealList.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 details.mealList" :key="index" class="ticket-list-box"
								:class="{'last-item':index==details.mealList.length-1}" v-if="details.mealList.length>0">
								<view class="ticket-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>{{_item.HPriceB}}<text
												class="price-nex">起</text>
										</view>
										<view class="tag">
											<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.ChangeTickets">
												<text>{{_item.SubscribeTime}}</text>
												<text class="gap">{{_item.ChangeTickets}}</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>

				<!-- 购票须知弹出层 -->
				<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" :closeable="true">
						<subscribeTicket :dateStr="Date" :TicketID="TicketID" :TitekCounponId="ID" :TicketName="TicketName"></subscribeTicket>
					</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"
	export default {
		components: {
			calendar,
			buyNotice,
			subscribeTicket,
		},
		data() {
			return {
				ID: 0,
				Date: "", //日期
				details: {
					
				},
				typeList: [{
					Id: 0,
					Name: '视频'
				}, {
					Id: 1,
					Name: '图片'
				}],
				boxOption: 0,
				navsOption: 0,
				titleStyle: {},
				titleStyleFix: {},
				active: 0,
				mainColor: '',
				controls: false, //显示默认控件
				videoContext: '',
				checkTicketNavIndex: 1,
				imgBaseUrl: "",
				calendar: [{
					date: "",
					info: ''
				}], //日历高亮
				showPop: false,
				curTicketData: {},
				showSubscribeTicketPop: false,//订单弹出层
				TicketID:0,//门票id
				TicketName:"",
			}
		},
		onLoad(options) {
			let that = this
			if (options && options.id) {
				this.ID = options.id
				this.getDetail()
			}
			this.imgBaseUrl = "http://192.168.20.214:8130"
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0%"
					};
					that.titleStyleFix = {
						height: "45px",
						position: 'fixed',
						top: '0',
						left: '0',
						paddingTop: `${res.statusBarHeight}px`,
						'background-color': '#f6f6f6',
						opacity: "0%"
					}
				},
			});
			this.mainColor = this.$uiConfig.mainColor;

			let d = new Date();
			let today = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`
			this.Date = today
			this.calendar.date = today
		},
		methods: {
			//选择其他日期门票
			confirm(e) {
				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
				this.TicketName=item.TicketSubName+item.TicketName
			},
			//获取详情
			getDetail() {
				this.request2({
						url: '/api/AppletDining/GetTicketCouponsDetails',
						data: {
							ID: this.ID
						}
					},
					res => {
						if (res.resultCode == 1) {
							res.data.ScenicSpotTag = res.data.ScenicSpotTag.split(',')
							res.data.GeographicTag = res.data.GeographicTag.split(',')
							this.details = res.data;
						}
					}
				);
			},
			// 根据景点id与指定日期获取门票列表信息
			getDetailByDate() {
				this.request2({
						url: '/api/AppletDining/GetTicketCouponsTicketList',
						data: {
							ID: this.ID,
							BuyDate: this.Date
						}
					},
					res => {
						if (res.resultCode == 1) {
							this.details.mealList = res.data;
						}
					}
				);
			},
			changeHandler(i) {
				this.active = i;
			},
		
			scroll(e) {
				this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
				this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) +
					"%";
				this.tooltipShow = false

				this.titleStyleFix.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) +
					"%";
				this.$forceUpdate()
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},

			goMap(name, lon, lat) {
				console.log(name, lon, lat)
				let newLat = parseFloat(lat)
				let newLon = parseFloat(lon)
				wx.openLocation({
					latitude: newLat,
					longitude: newLon,
					scale: 18,
					name,
					// address:"",
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(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.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.getDetailByDate()
					this.$forceUpdate()
				} else if (i === 3) {
					this.$refs.calendar.open()
				}

			},
			successBuyNotice(){
				this.showPop=false
				this.showSubscribeTicketPop=true
			}
		}

	}
</script>

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

	.ticket-title {
		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;
			}
		}
	}

	.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 {
						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;
						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;
				}
			}
		}
	}

	.popUp {
		width: 750rpx;
		height: 100vh;
	}
</style>
