<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"></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 class="notice-box">
				<view class="base-info">
					<image class="left" :src="imgBaseUrl+details.AllPicList[0].TagPicList[0].Path" mode="aspectFit" ></image>
					<view class="right">
						<view class="name">
							{{details.Name}}
						</view>
						<view class="evaluate">
							<u-rate  size="24rpx" inactive-color="#FFF" :current="details.ScoreNum" active-icon="star" disabled active-color="#F8632F"></u-rate>
							<view class="rate">
							   {{details.ScoreNum}}
							   <text v-if="details.ScoreNum===1||details.ScoreNum===2||details.ScoreNum===3||details.ScoreNum===4||details.ScoreNum===5">.0</text>
							</view>
							<view class="comment">
								128人评论
								<u-icon name="arrow-right" color="#6E6E6E" size="24rpx"></u-icon>
							</view>
						</view>
						<view class="sell">
							已售1000票
						</view>
					</view>
				</view>
				<view class="detail-info">
					<view class="ticket-title">
						购买须知
						<text class="ticket-title-bg"></text>
					</view>
					<view class="detail-info-item">
						<view class="item-name">
							可订时间
						</view>
						<view class="item-desc">
							可订今日
						</view>
					</view>
					<view class="detail-info-item">
						<view class="item-name">
							出票速度
						</view>
						<view class="item-desc">
							平均2秒出票
						</view>
					</view>
					<view class="detail-info-item">
						<view class="item-name">
							无需换票
						</view>
						<view class="item-desc">
							无需换票，持【身份证】直接进入
						</view>
					</view>
					<!-- 退票政策 -->
					<view class="method">
						<view class="method-title">
							<!-- <image src="" mode=""></image> -->
							<view class="">
								
							</view>
						</view>
					</view>
				</view>


			</view>
		</scroll-view>

	</view>
</template>

<script>
	let timer
	
	export default {
		components: {

		},
		data() {
			return {
				ID: 0,
				details: {},
				typeList: [{
				Id: 0,
					Name: '视频'
				}, {
					Id: 1,
					Name: '图片'
				}],
				boxOption: 0,
				navsOption: 0,
				titleStyle: {},
				titleStyleFix:{},
				active: 0,
				mainColor: '',
				controls: false, //显示默认控件
				videoContext: '',



				checkTicketNavIndex: 1,
				imgBaseUrl: ""
			}
		},
		onLoad(options) {
			let that = this
			if (options && options.id) {
				this.ID = options.id
				this.Date=options.Date
				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;
		},
		methods: {
			goUrl() {
				uni.navigateTo({
					url: "/pages/ticketCoupons/imgList?id=" + this.ID,
				})
			},
			//获取详情
			getDetail() {
				this.request2({
						url: '/api/AppletDining/GetTicketCouponsDetails',
						data: {
							ID: this.ID,
							buyDate:this.Date
						}
					},
					res => {
						if (res.resultCode == 1) {
							res.data.ScenicSpotTag = res.data.ScenicSpotTag.split(',')
							res.data.GeographicTag = res.data.GeographicTag.split(',')
							this.details = res.data;
							console.log(this.details)
							if (res.data.VideoUrl == '') {
								this.active = 1
							};
							this.details.imgs = []
							// this.details.BannerList.forEach(x=>{
							// 	let obj= {
							// 		name:x
							// 	}
							// 	this.details.imgs.push(obj)
							// })
						}
					}
				);
			},
			changeHandler(i) {
				this.active = i;
			},
			previewImage(i) {
				console.log(i)
				uni.previewImage({
					urls: this.details.BannerList,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {
							console.log(err.errMsg);
						},
					},
				});
			},
			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,
				});
			},



		}

	}
</script>

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

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

	.notice-box {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 45rpx 45rpx 0 45rpx;
		background-color: #FFFFFF;
		height: 900rpx;
		position: relative;
		top: -100rpx;
		z-index: 10;
		.base-info{
			// height: 175rpx;
			display: flex;
			padding-bottom: 35rpx;
			border-bottom: 1rpx solid #E7E7E7;
			.left{
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
			}
			.right{
				margin-left: 50rpx;
				.name{
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1B1D1E;
					margin-bottom: 20rpx;
				}
				.evaluate{
					margin-bottom:20rpx;
					display: flex;
					align-items: center;
					.rate{
						margin: 0 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #6E6E6E;
					}
					.comment{
						display: flex;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #6E6E6E;
					}
				}
				.sell{
					width: 150rpx;
					height: 40rpx;
					background-color: #ECF1F4;
					border-radius: 4rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #111111;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}
		.detail-info{
			.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: 40rpx 0;
			
				.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;
				}
			}
			.detail-info-item{
				display: flex;
				margin-bottom: 30rpx;
				.item-name{
					width: 120rpx;
					height: 40rpx;
					background-color: #111111;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #DFBE6E;
					margin-right: 45rpx;
					text-align: center;
					line-height: 40rpx;
					}
				.item-desc{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #111111;
				}	
			}
			.method{
				width: 660rpx;
				height: 225rpx;
				background-color: #DFBE6E;
				opacity: 0.1;
				border-radius: 4rpx;
			}
		}
		
	}
	
</style>
