<template>
	<view>
		<!-- <scroll-view style="height:{{windowHeight?windowHeight:''}}px;" scroll-y="{{!show}}"> -->
		<view v-if="nav_show" class="nav_show">
			<view :class="'topLine ' + (swith_area == index ? 'active' : ' ')" :data-index="index" @tap="swith_tab"
				v-for="(item, index) in ['简介', '详情', '剧照', '须知']" :key="index">
				{{ item }}
			</view>
		</view>
		<view class="topView">
			<image class="image" id="nav0" :src="show_detail.background_pic" mode="widthFix" style="width: 750rpx" />

			<view class="list">
				<image class="img" :src="show_detail.show_pic" />
				<view class="info">
					<view class="title">{{ show_detail.show_name }}</view>
					<view class="des">
						<view class="des_title">演出时段</view>
						<view class="des_info">{{ show_detail.start_date }}-{{ show_detail.end_date }}</view>
					</view>
					<view class="des">
						<view class="des_title">演出时长</view>
						<view class="des_info">约{{ show_detail.show_length }}分钟（以现场为准）</view>
					</view>
					<view class="price">
						<text style="font-size: 32rpx">¥</text>
						<text style="margin: 0 2rpx">{{ show_detail.lowest_price }}</text>
						<text style="font-size: 24rpx">起</text>
					</view>
				</view>
			</view>

			<view class="_area">
				<view class="info">
					<view class="text1">{{ show_detail.city_name }}｜{{ show_detail.theater_name }}</view>
					<view class="text2">地址：{{ show_detail.traffic_info }}</view>
				</view>
				<image src="/static/images/ui/location.png" :data-longitude="show_detail.longitude"
					:data-latitude="show_detail.latitude" @tap="loc" />
			</view>

			<view class="_block" id="nav1">
				<view class="_title">
					<view class="_icon" />
					演出详情
				</view>
				<view class="img1">
					<view class="img_cac"
						:style="rolled ? (show_detail.detail_pic[0] ? 'height:1000rpx;overflow: hidden;' : '') : ''">
						<block v-for="i in show_detail.detail_pic" :key="i">
							<image class="img1_list" :src="i" mode="widthFix" />
						</block>
					</view>
					<view class="roll" @tap="roll_spread">{{ rolled ? '展开演出详情' : '收起演出详情' }}</view>
				</view>
			</view>

			<view class="_block" id="nav2">
				<view class="_title">
					<view class="_icon" />
					精彩现场
				</view>
				<scroll-view class="_flex" :scroll-x="true">
					<block v-for="(item, index) in show_detail.wonderful_list" :key="index">
						<block v-if="item.type == 'image'">
							<image class="_img" :src="item.url" :data-index="index" @tap="previewMedia" />
						</block>

						<block v-if="item.type == 'video'">
							<!-- #ifndef MP-ALIPAY -->
							<video class="_img" :src="item.url" @play="bindPlayCallBack" :id="'video_' + index" />
							<!-- #endif -->
						</block>
					</block>
				</scroll-view>
				<view class="roll" @tap="stage_click" v-if="!show_detail.wonderful_list.length<=0">查看更多</view>
			</view>

			<view class="_block" id="nav3">
				<view class="_title">
					<view class="_icon" />
					购票须知
				</view>
				<view class="warning">
					<view class="dot_icon">
						<view class="dot" />
					</view>
					<view class="text">
						<text>温馨提示：由于票品特殊性，出售后不退不换！

							1.请在指定购票渠道购票，否则出现不良后果（如假票等），由购票者自行承担。门票售出，恕不退换。门票售出后因严重自然灾害、洪水、地震等不可抗力因素造成的演出票时间推移、延时或无法演出，主办方将提前通知；如特殊原因演出取消，购票者可获得的所有赔偿仅限于不高于票面价格的购票票款补偿。开心果票务网仅为本演出/赛事/活动的票务代理，其时间变更及取消等责任由主办方负责。

							2.每票一人，对号入座，进门一次有效，无副券作废，请观众着装整洁，服从现场工作人员管理，依序入场。

							3.剧院演出1.2米以下儿童谢绝入场（儿童专场除外），1.2米以上儿童请在家长的带领下，凭票入场。

							4.请勿在条码及其周围1厘米内涂写、折叠、损坏，否侧造成条码无法识别不能入场，由购票者自行承担责任。

							5.具体入场时间以场馆规定为准。

							6.请自觉接受安全检查。严禁携带枪支、弹药、管制刀具等违禁物品；严禁携带打火机等易燃易爆物品；严禁携带液态物品入场。

							7.请勿带包。请勿携带专业摄影、摄像器材，未经许可，现场禁止录音、录像及照相；场内禁止吸烟、禁止踩踏座椅、禁止投掷物品、禁止翻阅隔离设施。

							8.迟到的观众请适时入场，请勿妨碍他人观看演出，请勿在通道内滞留。请勿在场内大声喧哗。请将手机等响闹装置置于静音状态。

							9.剧照仅供参考，演员阵容以现场为准。

							10.观看结束后，请观众有序退场，请勿滞留。

							11.以上规定如与个别活动要求发生冲突时，以活动要求为准。

							12.任何购买、持有或使用门票的人均被认为已经阅读、理解并接受以上条款。</text>
					</view>
				</view>
			</view>
		</view>

		<!-- </scroll-view> -->

		<view class="bottom_area" :class="safeAreaHeight===0?'safeAreaBottom':''">
			<view class="tips">* {{ show_detail.brief }}</view>
			<view class="bottom">
				<button class="iconButton" @tap="_like">
					<image class="icon"
						:src="'/static/images/ui/' + (show_detail.is_follow ? 'liked' : 'like') + '.png'" />
					<view class="text">想看</view>
				</button>
				<button class="iconButton" open-type="share">
					<image class="icon" src="/static/images/ui/share.png" />
					<view class="text">分享</view>
				</button>
				<button class="button" :class="'btn'+show_detail.is_end"
					style="background:linear-gradient(90deg, #CCC 0%, #CCC 100%);"
					v-if="show_detail.is_end==1">演出结束</button>
				<button class="button" style="background:linear-gradient(90deg, #FF4284 0%, #FF1D42 100%);" v-else
					@tap="changeRange">立即购买</button>
			</view>
		</view>
		<u-popup :show="show" @close="onClose" @open="open" :round="10">
			<view class="drama_list">
				<view class="title">{{ Xshow_detail.show_name }}</view>
				<view class="area">{{ Xshow_detail.city_name }}｜{{ Xshow_detail.theater_name }}</view>
				<view class="select">
					请选择场次
					<text class="_select">场次时间均为演出当地时间</text>
				</view>
				<scroll-view :scroll-y="true" class="scroll" :show-scrollbar="false" catchtouchmove>
					<view :data-index="index"
						:class="'sel_area ' + (current == index ? '_selected' : '_not_sel') + ' ' + (item.tkt_num == 0 ? 'null_tkt' : '')"
						@tap="_cur" v-for="(item, index) in drama_list" :key="index">
						{{ item.show_date }}

						<view class="tags" v-if="item.tkt_num == 0">售罄</view>
					</view>
					<view style="height: 1rpx"></view>
				</scroll-view>
			</view>

			<view class="_bottom">
				<button class="selector_dsn" :data-cur_drama="current" @tap="_next">
					{{ Xshow_detail.tickets_status == 0 ? '选座购票' : '立即购买' }}
				</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		httpUtil,
		http,
		login_check
	} from '../../../utils/util';
	export default {
		data() {
			return {
				current: 0,
				rolled: true,
				swith_area: 0,
				safeAreaHeight: 0,
				windowHeight: '',
				drama_list: '',

				Xshow_detail: {
					show_name: '',
					city_name: '',
					theater_name: '',
					tickets_status: 0
				},

				show_detail: {
					background_pic: '',
					show_pic: '',
					show_name: '',
					start_date: '',
					end_date: '',
					show_length: '',
					lowest_price: '',
					city_name: '',
					theater_name: '',
					traffic_info: '',
					longitude: '',
					latitude: '',
					detail_pic: false,
					wonderful_list: [],
					brief: '',
					is_follow: false
				},

				suggest_show: '',
				nav_show: false,
				show: false
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 是否为全面屏手机留出安全距离
			const safeAreaHeight = () => {
				console.log(uni.getSystemInfoSync());
				if (!uni.getSystemInfoSync().safeAreaInsets) {
					return 0;
				}
				return uni.getSystemInfoSync().safeAreaInsets.bottom
			};

			this.setData({
				safeAreaHeight: safeAreaHeight()
			});
			var that = this;
			uni.getSystemInfo({
				success(res) {
					that.setData({
						windowHeight: res.windowHeight
					});
				}
			});
			let cycle_id = options.cycle_id;
			http('/api/v1/drama-list', 'get', {
				cycle_id
			}).then((res) => {
				this.setData({
					drama_list: res.drama_list,
					Xshow_detail: res.show_detail
				});
			});

			if (cycle_id) {
				http('/api/v1/show-detail', 'get', {
					cycle_id
				}).then((res) => {
					this.setData({
						show_detail: res.show_info,
						suggest_show: res.suggest_show
					});
				});
			} else {
				uni.showToast({
					title: '未传入轮次id',
					icon: 'fail',
					duration: 2000
				});
			}
		},
		onPageScroll: function(ev) {
			let windowHeight = this.windowHeight;
			let arr;
			let a;
			let query = uni.createSelectorQuery();

			for (var i = 0; i < 4; i++) {
				query.select('#nav' + i).boundingClientRect();
			}

			query.exec((res) => {
				arr = [res[0].top, res[1].top, res[2].top, res[3].top];

				for (var i = 0; i < 4; i++) {
					if (arr[i] < 20) {
						a = i;
					}
				}

				if (a) {
					this.setData({
						swith_area: a
					});
				}
			});

			if (ev.scrollTop > windowHeight) {
				this.setData({
					nav_show: true
				});
			} else {
				if (ev.scrollTop < windowHeight) {
					this.setData({
						nav_show: false
					});
				}
			}
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			uni.stopPullDownRefresh();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			var that = this;
			return {
				//自定义转发内容
				title: that.show_detail.show_name,
				//自定义转发标题
				imageUrl: that.show_detail.background_pic //不设置此字段时，默认截取当前页面作为展示的图片
			};
		},
		methods: {
			bindPlayCallBack: function(e) {
				console.log('当前视频', e.target.id);
				var current_video = e.target.id;
				var that = this;
				let video = that.show_detail.wonderful_list;

				for (var i in video) {
					var index_video = 'video_' + i;
					var videoContextPrev = uni.createVideoContext(index_video);

					if (current_video != index_video) {
						// 暂停其他的
						videoContextPrev.pause();
					}
				}
			},

			previewMedia(e) {
				let mediaList = this.show_detail.wonderful_list;
				let imageList = [];
				let current = e.currentTarget.dataset.index;
				let errorMedia = 0;
				mediaList.forEach((e) => {
					if (e.type !== 'image') {
						errorMedia = errorMedia + 1;
					} else {
						imageList.push(e.url);
					}
				});
				uni.previewImage({
					urls: imageList,
					current: imageList[current - errorMedia]
				});
			},
			stage_click() {
				let {
					abb_id
				} = this.Xshow_detail
				uni.navigateTo({
					  url: '/pages/opera/stage/stage_photo?abb_id=' + abb_id+"&show_title="+this.show_detail.show_name,
				})

			},
			roll_spread() {
				this.setData({
					rolled: !this.rolled
				});
			},

			changeRange() {
				uni.setNavigationBarTitle({
					title: '选择场次'
				});
				var that = this;

				if (login_check()) {
					let cycle_id = that.show_detail.cycle_id;
					httpUtil('/api/v1/drama-list', 'get', {
						cycle_id
					}).then((res) => {
						that.setData({
							drama_list: res.drama_list,
							Xshow_detail: res.show_detail,
							show: true
						});
						// this.popup.changeRange();
						this.show = true
					});
				}
			},

			onClose() {
				this.setData({
					show: false
				});
				uni.setNavigationBarTitle({
					title: '开心麻花'
				});
			},

			_cur(e) {
				this.setData({
					current: e.currentTarget.dataset.index
				});
			},

			_like() {
				if (login_check()) {
					let status;
					let follow = false;

					if ('undefined' !== typeof this.show_detail.is_follow) {
						follow = this.show_detail.is_follow;
					}

					let abb_id = this.show_detail.abb_id;

					if (follow) {
						status = 0;
					} else {
						if (!follow) {
							status = 1;
						}
					}

					http('/api/v1/follow', 'get', {
						abb_id: this.show_detail.abb_id,
						status
					}).then((res) => {
						if (status == 1) {
							uni.showToast({
								icon: 'success',
								title: '已添加到想看的演出列表',
								duration: 2000
							});
						} else {
							if (status == 0) {
								uni.showToast({
									icon: 'success',
									title: '已取消想看',
									duration: 2000
								});
							}
						}

						let show_detail = this.show_detail;
						show_detail.is_follow = !show_detail.is_follow;
						this.setData({
							show_detail
						});
					});
				}
			},

			_next(e) {
				if (this.Xshow_detail.tickets_status == 0) {
					let url = '/pages/make_order/choose_sit/choose_sit?drama_id=' + this.drama_list[e.currentTarget.dataset.cur_drama].drama_id
					// #ifdef MP-BAIDU
					url = '/pages/make_order/choose_sit/choose_sit_baidu?drama_id=' + this.drama_list[e.currentTarget.dataset.cur_drama].drama_id
					// #endif
					// #ifdef MP-ALIPAY
					url = '/pages/make_order/choose_sit/choose_sit_alipay?drama_id=' + this.drama_list[e.currentTarget.dataset.cur_drama].drama_id
					// #endif
					// #ifdef MP-TOUTIAO
					url = '/pages/make_order/choose_sit/choose_sit_toutiao?drama_id=' + this.drama_list[e.currentTarget.dataset.cur_drama].drama_id
					// #endif
					uni.navigateTo({
						url
					});
				} else {
					if (this.Xshow_detail.tickets_status == 1) {
						uni.navigateTo({
							url: '/pages/make_order/random_sit/random_sit?drama_id=' + this.drama_list[e
								.currentTarget.dataset.cur_drama].drama_id
						});
					}
				}
			},

			loc(e) {
				if (e.currentTarget.dataset.longitude && e.currentTarget.dataset.latitude) {
					uni.openLocation({
						latitude: e.currentTarget.dataset.latitude,
						longitude: e.currentTarget.dataset.longitude,
						name: this.show_detail.theater_name,
						address: this.show_detail.traffic_info
					});
				} else {
					uni.showToast({
						title: '地址信息错误',
						icon: 'fail',
						duration: 2000
					});
				}
			},

			open() {},

			swith_tab: function(e) {
				let swith_area = e.currentTarget.dataset.index;
				let seleted_id = '#nav' +
					swith_area; // tt.createSelectorQuery().select(seleted_id).boundingClientRect(function(rect){console.log(rect)}).exec()

				uni.createSelectorQuery()
					.select(seleted_id)
					.boundingClientRect()
					.selectViewport()
					.scrollOffset()
					.exec(function(res) {
						uni.pageScrollTo({
							scrollTop: res[0].top + res[1].scrollTop,
							duration: 300
						});
					});
				this.setData({
					swith_area
				});
			}
		}
	};
</script>
<style>
	/* 隐藏pop层中场次选择的滚轮 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.nav_show {
		position: fixed;
		top: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background: #fff;
		box-shadow: 0 4rpx 8rpx 0 #dbdbdb;
		border-top: 2rpx solid #f8f8f7;
		border-bottom: 2rpx solid #f8f8f7;
		z-index: 99;
	}

	.topLine {
		text-align: center;
		margin: 20rpx;
		color: #7b7b7b;
	}

	.topLine.active {
		position: relative;
		color: #181818;
		font-weight: bold;
	}

	.topLine.active:after {
		content: ' ';
		width: 1rem;
		height: 0.12rem;
		bottom: 0;
		/* #ifdef MP-ALIPAY */
		width: 0.4rem;
		height: 0.04rem;
		bottom: 0.5rem;
		/* #endif */
		background: #fff;
		position: absolute;
		/* bottom: -0.1rem; */
		left: 50%;
		transform: translateX(-50%);
		background-color: #ff446b;
		border-radius: 0.12rem;
	}

	.topView {
		padding-bottom: 500rpx;
		position: relative;
	}

	.image {
		position: absolute;
		top: -480rpx;
	}

	.list {
		display: flex;
		padding: 20rpx 30rpx;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		position: relative;
		margin-top: 480rpx;
	}

	.list .img {
		width: 204rpx;
		height: 306rpx;
		background: #d8d8d8;
		border-radius: 16rpx;
	}

	.list .info {
		padding: 0 8rpx 0 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}

	.list .info .title {
		font-size: 32rpx;
		font-weight: bold;
		color: #181818;
	}

	.list .info .des {
		font-size: 24rpx;
		color: #7b7b7b;
	}

	.list .info .des .des_title {
		font-size: 24rpx;
		color: #7b7b7b;
	}

	.list .info .des .des_info {
		color: #181818;
	}

	.list .info .price {
		font-size: 44rpx;
		font-weight: bold;
		color: #ff1d42;
	}

	._area {
		margin: 20rpx 0;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
	}

	._area image {
		width: 60rpx;
		height: 60rpx;
	}

	._area .info .text1 {
		font-size: 28rpx;
	}

	._area .info .text2 {
		font-size: 24rpx;
		margin-top: 4rpx;
		color: #7b7b7b;
	}

	._block {
		background: #fff;
		margin-bottom: 20rpx;
	}

	._block ._title {
		display: flex;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		color: #181818;
		padding: 30rpx;
	}

	._block ._title ._icon {
		width: 8rpx;
		height: 36rpx;
		background: #ff446b;
		border-radius: 4rpx;
		margin: 0 20rpx 0 0;
	}

	._block ._flex {
		white-space: nowrap;
		margin: 0 30rpx;
		/* #ifndef MP-ALIPAY */
		display: flex;
		width: 690rpx;
		/* #endif */
	}

	._block ._flex ._img {
		border-radius: 8rpx;
		width: 540rpx;
		height: 360rpx;
		margin: 0 10rpx;
		/* #ifdef MP-BAIDU || MP-ALIPAY */
		display: inline-block !important;
		flex-shrink: 0;
		object-fit: fill !important;
		/* #endif */
	}

	._block .img1 {
		margin: 0 auto 0 30rpx;
		display: flex;
		flex-direction: column;
	}

	._block .img1 .img1_list {
		width: 690rpx;
		vertical-align: top;
		margin-top: -1rpx;
	}

	._block .roll {
		text-align: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #1394f2;
	}

	._block .warning {
		background: #fff;
		padding-bottom: 20rpx;
		display: flex;
	}

	._block .warning .dot_icon {
		width: 8rpx;
		margin: 0 20rpx 0 30rpx;
		height: 36rpx;
		align-items: center;
		display: flex;
	}

	._block .warning .dot_icon .dot {
		width: 8rpx;
		height: 8rpx;
		background: #7b7b7b;
		border-radius: 50%;
	}

	._block .warning .text {
		font-size: 24rpx;
		color: #181818;
		margin-right: 40rpx;
	}

	.bottom_area {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
.safeAreaBottom{
	padding-bottom: env(safe-area-inset-bottom);
	padding-bottom: constant(safe-area-inset-bottom);
}
	.bottom_area .tips {
		height: 74rpx;
		background: #fff0f5;
		color: #ff446b;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_area .bottom {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 28rpx 0;
	}

	.bottom_area .bottom .iconButton {
		background-color: transparent !important;
		padding: 0 !important;
		line-height: inherit !important;
		margin: 0 0 0 60rpx !important;
		width: auto !important;
		font-weight: 500 !important;
		border-radius: none !important;
		display: flex;
		flex-direction: column;
		/* #ifdef MP-ALIPAY */
		border: none;
		height: auto;
		/* #endif */
	}

	.bottom_area .bottom .iconButton .icon {
		width: 40rpx;
		height: 40rpx;
	}

	.bottom_area .bottom .iconButton .text {
		font-size: 20rpx;
		color: #181818;
		margin-top: 6rpx;
	}

	/* #ifdef MP-ALIPAY */
	.bottom_area .bottom .iconButton .text text {
		line-height: 0.32rem;
	}

	/* #endif */

	.bottom_area .bottom .button {
		width: 400rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #ffffff;
		margin-right: 40rpx;
		/* #ifdef MP-ALIPAY */
		margin-left: auto;
		/* #endif */
	}

	.bottom_area .bottom .btn1 {
		pointer-events: none;
	}

	.drama_list {
		padding: 30rpx;
	}

	.drama_list .title {
		font-size: 36rpx;
		font-weight: bold;
		color: #181818;
	}

	.drama_list .area {
		font-size: 24rpx;
		color: #7b7b7b;
		margin: 10rpx 0 30rpx 0;
	}

	.drama_list .select {
		font-size: 24rpx;
		font-weight: bold;
		color: #181818;
	}

	.drama_list ._select {
		margin-left: 30rpx;
		color: #7b7b7b;
	}

	.drama_list .scroll {
		height: 400rpx;
		width: 80%;
		margin: 20rpx 0 100rpx 0;
	}

	.drama_list .scroll .sel_area {
		margin: 10rpx 0;
		padding: 10rpx 30rpx;
		display: inline-block;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #181818;
		position: relative;
		width: 288rpx;
		text-align: center;
		white-space: nowrap;
	}

	.drama_list .scroll ._selected {
		border: 1rpx solid red;
	}

	.drama_list .scroll ._not_sel {
		border: 1rpx solid #808080;
		color: #808080;
	}

	.drama_list .scroll .null_tkt {
		background: #dddddd;
		color: #ffffff;
		border: 2rpx solid #dddddd;
	}

	.drama_list .scroll .tags {
		position: absolute;
		color: #ff1d42;
		position: absolute;
		padding: 0 5rpx;
		border-radius: 4rpx;
		border: 2rpx solid #ff1d42;
		top: -12rpx;
		right: -40rpx;
	}

	._bottom {
		margin-top: 20rpx;
		border-top: 3px solid #dddddd;
	}

	._bottom .selector_dsn {
		margin: 30rpx 25% 0 25%;
		/* #ifdef MP-BAIDU */
		margin: 30rpx 25%;
		/* #endif */
		width: 50%;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
		border-radius: 44rpx;
		font-size: 28rpx;
		color: #ffffff;
	}
</style>
