<template>
	<view class="cotainer">
		<!-- 全屏播放 -->
		<view class="playvideo" v-if="playvideo" @click="playvideo=false,isfull=false">
			<view class="playvideowrap">
				<video ref="videos" id="videos" :autoplay="true" @play="playFullScreen"
					:src="info.video?info.video.url:''" play-btn-position="center"></video>
				<view class="closevideo" @click="playvideo=false,isfull=false">X</view>
			</view>
		</view>
		<view class="playvideo" v-if="playimg" @click="playimg=false">
			<view class="playvideowrap">
				<view v-if="imgInfo.length>0 && !showVorImage" class="imgwrap">
					<movable-area scale-area class="movable-area" style="height: 380rpx;width:100%">
						<movable-view style="height: 380rpx;width:100%" class="movable-view" direction="all" scale="true" scale-min="1" scale-max="4"
							:scale-value="1">
							<u-swiper :height='380' bgColor="transparent" :border-radius="0" :list="imgInfo" :autoplay="false"></u-swiper>
							
						</movable-view>
					</movable-area>
					<view class="closevideo" @click="playimg=false">X</view>
				</view>
			</view>
		</view>




		<view class="navBarBox">
			<image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image>
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<!-- 轮播切换 -->
				<view style="display: flex;" class="video-content">
					<view class="video-content-left">
						<view v-if="info.video&&showVorImage" class="videowrap" @click="playvideo=true,isfull=true">
							<view class="videowrap-mask"></view>
							<view class="videowrap-play"></view>
							<image :src="info.video_image.url"></image>
						</view>

						<view v-if="imgInfo.length>0 && !showVorImage" class="imgwrap">
							<u-swiper @click="playimg=true" :height="340" bgColor="transparent" :border-radius="0"
								:list="imgInfo" :autoplay="false"></u-swiper>
						</view>

						<view class="video-content-left-change" v-if="info.video && imgInfo.length>0">
							<view @click="showVorImage=true">
								<image :src="require('@/packages/static/detail-camera.png')"></image>1
							</view>
							<view @click="showVorImage=false">
								<image :src="require('@/packages/static/detail-photo.png')"></image>
								{{imgInfo.length}}
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="detail-info">
				<view class="detail-info-title">{{info.name}}</view>
				<view class="detail-info-map">
					<view>
						<u-icon name="map" size="32"></u-icon>
						<view>
							<span>详细地址：</span>
							<span>{{info.address?info.address:'-'}}</span>
						
						</view>
					</view>
					<view>
						<u-icon name="clock" size="32"></u-icon>
						<view>
							<span>开放时间：</span>
							<span>{{info.time?info.time:'-'}}</span>
						</view>
					</view>
				</view>
				<view class="detail-info-go">
					<view class="detail-info-go-left" @click="toMap">
						<image :src="require('@/packages/static/detail-go.png')" mode=""></image>
						<text>开始前往</text>
					</view>
					<view class="detail-info-go-right" @click="toWx(info.appid,info.path)" v-if="info.iswx===1">
						<image :src="require('@/packages/static/detail-book.png')" mode=""></image>
						<text>去预约</text>
					</view>
				</view>
			</view>
			<!-- vr -->
			<view class="detail-vr" v-if="vrInfo.length>0">
				<view class="detail-vr-title">
					<image :src="require('@/packages/static/detail-vr.png')" mode=""></image>
				</view>
				
				<view class="detail-vr-swiper" v-if="vrInfo.length==1" style="margin-left: -25rpx;">
					<view @click="toVr(vrInfo[0].url)" class="detail-vr-swiper-item" style="width:490rpx;margin: 0 auto;position: relative;margin-top:20rpx">
						<view class="detail-vr-swiper-item-img">
							<image :src="vrInfo[0].image.url" mode=""></image>
						</view>
						<view class="detail-vr-swiper-item-title">
							<image :src="require('@/packages/static/detail-icon.png')" mode=""></image>
							<text>{{vrInfo[0].name}}</text>
						</view>
					</view>
				</view>
				
				<swiper v-else class="detail-vr-swiper" :current="currentIndex" next-margin="140rpx" @change="swierChange"
					circular :autoplay="false">
					<swiper-item v-for="(item,index) in vrInfo" :key="index">
						<view @click="toVr(item.url)" class="detail-vr-swiper-item"
							:class="currentIndex===index?'detail-vr-swiper-active':''">
							<view class="detail-vr-swiper-item-img">
								<image :src="item.image.url" mode=""></image>
							</view>
							<view class="detail-vr-swiper-item-title">
								<image :src="require('@/packages/static/detail-icon.png')" mode=""></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="detail-content">
				<image class="detail-content-top" src="../static/detail-top.png" mode=""></image>
				<image class="detail-content-bottom" src="../static/detail-bottom.png" mode=""></image>
				<view class="detail-content-title">
					场馆基础信息
				</view>
				<view class="detail-content-content">
					<rich-text v-if='showContent' :nodes="info.content?info.content:' '"></rich-text>
				</view>
			</view>
			<view class="detail-btn" @click="toQus(info.id)">
				<image src="../static/detail-btn.png" mode=""></image>
			</view>
		</view>




		<tabbar :currentPage="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import {
		toMapAPP,
		shareInfo
	} from "@/common/util.js"
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				navBarTop: 0,
				currentIndex: 0,
				info: {},
				vrInfo: [],
				imgInfo: [],
				showContent: false,
				showVorImage: true,
				isfull: false,
				playvideo: false,
				playimg: false
			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline(){
			return shareInfo
		},
		onReady() {

		},
		onLoad(option) {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
			this.getDetail(option.id)
		},
		methods: {
			playFullScreen() {
				let videoContext = uni.createVideoContext('videos', this)
				videoContext.requestFullScreen()
			},
			async getDetail(id) {
				const res = await this.$u.api.pointDetail({
					id: id
				})
				if(res.points.config && res.points.config.length>0){
					res.points.config.map(item=>{
						if(item.key==='address'){
							res.points.address = item.value
						}
						if(item.key==='time'){
							res.points.time = item.value
						}
					})
				}
				this.info = res.points
				this.vrInfo = res.points.point_content.length > 0 ? res.points.point_content : []
				if (res.points.point_image.length > 0) {
					res.points.point_image.map(item => {
						this.imgInfo.push(item.image.url)
					})
				}
				// this.imgInfo = res.points.point_image.length > 0 ? res.points.point_image : []
				this.showContent = true
			},
			swierChange(e) {
				this.currentIndex = e.detail.current
			},
			toWx(appid, path) {
				if (!appid) {
					return
				}
				path = path ? path : '/pages/index/index'
				// 跳转到其他小程序
				uni.navigateToMiniProgram({
					appId: appid, // 目标小程序的 AppID
					path: path, // 目标小程序的页面路径
					extraData: { // 需要传递的参数

					},
					success(res) {
						// 成功跳转到其他小程序的回调函数
						console.log('成功跳转到其他小程序');
					},
					fail(err) {
						// 跳转失败的回调函数
						console.log('跳转失败', err);
					}
				});
			},
			toVr(link) {
				uni.navigateTo({
					url: '/packages/vr/vr?link=' + link
				})
			},
			toMap() {
				toMapAPP(this.info.lat, this.info.lng, this.info.name)
			},
			toQus(id){
				uni.navigateTo({
					url:'/packages/question/question?id='+id
				})
			},
		}
	}
</script>

<style lang="scss">
	.cotainer {
		background: #f3efea;
		width: 100vw;
		padding-bottom: 135rpx;
		height: 100vh;
		width: 100vw;
		overflow: scroll;

		.playvideo {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 11;
			background-color: rgba(0, 0, 0, 0.6);

			&>.playvideowrap {
				width: 95%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				video {
					width: 100%
				}

				::v-deep .u-indicator-item-round.u-indicator-item-round-active {
					background-color: #bf3022;
				}

				.closevideo {
					color: #fff;
					width: 50rpx;
					height: 50rpx;
					border: 1px solid #fff;
					border-radius: 50rpx;
					position: absolute;
					text-align: center;
					line-height: 50rpx;
					/* display: inline-block; */
					right: 0rpx;
					top: -25rpx // transform: translate(0,-50%);
				}
			}

		}

		.navBarBox {
			// height: 299rpx;
			padding-bottom: 30rpx;
			width: 100%;
			position: relative;
			border-bottom: 10rpx solid #dbd0ba;

			&-top {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0
			}

			.navBar {
				display: flex;
				position: relative;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;

				.video-content {
					width: 668rpx;
					height: 380rpx;
					margin: 0 auto;
					// border:1px solid red;
					font-size: 0;

					&-left {
						width: 668rpx;
						height: 380rpx;
						position: relative;

						& .videowrap {
							image {
								width: 668rpx;
								height: 380rpx;
								padding-top: 0;
							}

							&-mask {
								width: 668rpx;
								height: 380rpx;
								background-color: rgba(0, 0, 0, 0.5);
								position: absolute;
								z-index: 9;
								top: 0;
								left: 0;
							}

							&-play {
								background: url(../static/detail-videoplay.png) no-repeat top left;
								width: 67rpx;
								height: 68rpx;
								background-size: 100% 100%;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								z-index: 10;
							}
						}

						& .imgwrap {
							::v-deep swiper {
								width: 668rpx !important;
								height: 380rpx !important;
							}
						}

						// ::v-deep .u-swiper-indicator{
						// 	display: none;
						// }
						::v-deep .u-indicator-item-round.u-indicator-item-round-active {
							background-color: #bf3022;
						}

						&-change {
							padding: 10rpx 30rpx;
							border-radius: 20rpx;
							background-color: rgba(0, 0, 0, 0.3);
							display: flex;
							position: absolute;
							bottom: 20rpx;
							left: 20rpx;
							z-index: 10;

							&>view {
								font-size: 24rpx;
								color: #fff;

								&:first-child {
									margin-right: 10rpx;
									border-right: 1px solid #fff;
									padding-right: 10rpx
								}

								image {
									width: 23rpx;
									height: 21rpx;
									padding-right: 10rpx
								}
							}

						}
					}
				}

			}
		}

		.detail {
			margin: 30rpx;
			margin-top: 40rpx;

			&-info {
				background-color: #fff;
				padding: 45rpx 25rpx;
				border-radius: 10rpx;

				&-title {
					color: #000;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
				}

				&-map {
					color: #73685c;
					font-size: 24rpx;
					padding-bottom: 10rpx;

					>view {
						display: flex;
						align-items: flex-start;
						margin-bottom: 20rpx;
						>view{
							display: flex;
							span:first-child{
								min-width: 120rpx;
							}
						}
					}
				}

				&-go {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 20rpx;
					padding-top: 30rpx;
					border-top: 1px solid #ddd;

					>view {
						color: #bc9766;
						font-size: 24rpx;
						display: flex;
						align-items: center;
					}

					&-left {
						image {
							width: 33rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}

					&-right {
						background-color: #bc9766;
						padding: 10rpx 30rpx;
						border-radius: 30rpx;
						color: #fff !important;

						image {
							width: 27rpx;
							height: 33rpx;
							margin-right: 10rpx;
						}
					}
				}
			}

			&-vr {
				background-color: #fff;
				padding: 45rpx 25rpx;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding-right: 0;
				padding-bottom: 25rpx;
				&-title {
					image {
						width: 122rpx;
						height: 30rpx;
					}
				}

				&-swiper {
					// display: flex;
					// overflow: auto;
					min-height: 530rpx;
					position: relative;
					&-item {
						padding: 25rpx;
						margin: 20rpx;
						background-color: #fef8e9;
						// border-radius: 20rpx;
						// margin-bottom:0;
						position: absolute;
						// height: 200rpx;
						// width: 570rpx;
						border-radius: 20rpx;
						z-index: 5;
						top: 0;

						// transform: rotateY(40deg) scale(.9);
						// transform: ;
						&-img {
							font-size: 0;

							image {
								width: 440rpx;
								height: 350rpx;
							}
						}

						&-title {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 80rpx;
							margin-top: 15rpx;
							margin-bottom: 0;

							image {
								width: 43rpx;
								height: 43rpx;
								margin-right: 10rpx
							}

							text {
								max-width: 350rpx;
							}
						}
					}

					&-active {
						z-index: 10;
						top: 0;
						transition: all 0.2s ease-in 0s;
						// transform: rotateY(0deg) scale(1);
					}
				}
			}

			&-content {
				background-color: #fff;
				padding: 45rpx 25rpx;
				padding-bottom: 50rpx;
				border-radius: 10rpx;
				margin-top: 30rpx;
				position: relative;

				&-top {
					width: 208rpx;
					height: 102rpx;
					position: absolute;
					left: 0;
					top: 34rpx;
				}

				&-bottom {
					width: 226rpx;
					height: 46rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}

				&-title {
					color: #000;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
					position: relative;
				}

				&-content {
					margin-top: 40rpx;
					line-height: 2;
				}
			}

			&-btn {
				image {
					width: 322rpx;
					height: 89rpx;
					margin: 45rpx auto;
					display: block;
				}
			}
		}


	}
</style>