<template>
	<view class='wrap'>
		<view class="playvideo" v-if="playvideo" @click="playvideo=false,isfull=false">
			<view class="playvideowrap">
				<video ref="video" :autoplay="true" @timeupdate="onTimeUpdate"
					:src="detailPoints.video?detailPoints.video.url:''" play-btn-position="center"></video>
				<view class="closevideo" @click="playvideo=false,isfull=false">X</view>
			</view>
			<!-- <u-icon name="photo" color="#fff" size="30"></u-icon> -->

		</view>
		<view class="playvideo" v-if="playimg" @click="playimg=false">
			<view class="playvideowrap" style="width:100%">
				<view v-if="imageArr.length>0&&showVorImage" class="imgwrap">
					<u-swiper :height="537" bgColor="transparent" :border-radius="0" :list="imageArr"
						:autoplay="false"></u-swiper>
					<view class="closevideo" @click="playimg=false">X</view>
				</view>
			</view>
		</view>
		<view class="detail-study">
			<view>
				<image :src="indextitle" class="title"></image>
			</view>
			<view>
				<image :src="studytitle" class="detail-study-title"></image>
			</view>
			<view class="detail-study-video">
				<view class="detail-study-video-content">
					<view style="display: flex;">
						<view class="detail-study-video-content-left">
							<view v-if="detailPoints.video&&showVorImage" class="videowrap"
								@click="playvideo=true,isfull=true">
								<view class="videowrap-mask"></view>
								<view class="videowrap-play"></view>
								<image :src="detailPoints.video_image.url"></image>
								<!-- <video :src="detailPoints.video?detailPoints.video.url:''" style="width: 100%;height: 340rpx;" play-btn-position="center"></video> -->
							</view>
							<view v-if="imageArr.length>0&&showVorImage" class="imgwrap">
								<u-swiper @click="playimg=true" :height="340" bgColor="transparent" :border-radius="0"
									:list="imageArr" :autoplay="false"></u-swiper>
							</view>
							<view class="detail-study-video-content-left-change" v-if="videoOrimage===3">
								<view @click="showVorImage=true">
									<image :src="require('@/static/xtdk/detail-camera.png')"></image>1
								</view>
								<view @click="showVorImage=false">
									<image :src="require('@/static/xtdk/detail-photo.png')"></image>
									{{imageArr.length}}
								</view>

							</view>
						</view>
						<view class="detail-study-video-content-right">

						</view>
					</view>
				</view>
			</view>
			<view class="detail-study-detail">
				<view class="detail-study-bg">{{companyName}}</view>
				<u-read-more :showHeight="450" :textIndent="'0em'" closeText="查看更多" color="#d0382f" ref="uReadMore">
					<rich-text :nodes="detailPoints.content"></rich-text>
				</u-read-more>
				<view class="detail-study-btn" @click="$u.throttle(toAnswer)">
					<p>你已经对{{companyName}}有一些了解了，<span v-if="companyName.length>=10">快来答题吧！</span></p>
					<p v-if="companyName.length<10">快来答题吧！</p>
				</view>
			</view>

		</view>
		<!-- <iframe ref="iframe" src="static/html/explanation.html" frameborder="0"></iframe> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indextitle: require('../../static/xtdk/index-title.png'),
				studytitle: require('../../static/xtdk/detail-study.png'),
				studybtn: require('../../static/xtdk/detail-btn.png'),
				flag: true,
				detailPoints: {},
				imageArr: [],
				videoOrimage: 1, //1:只有视频，2只有图片，3都有
				showVorImage: true,
				playvideo: false,
				isfull: false,
				playimg: false,
				companyName:''
			};
		},
		methods: {
			onTimeUpdate(e) {
				if (this.isfull) {
					this.$refs.video.requestFullScreen();
					this.isfull = false
				}
			},
			showVr(id) {
				this.$u.api.baseFormShow({
					table_name: 'map_point_contents',
					id
				})
			},

			toAnswer() {
				uni.navigateTo({
					url: `/pages/answer/answer?id=${this.$route.query?.id}`
				})
			},

			async getImages(id) {
				const res = await this.$u.api.baseFormIndex({
					table_name: 'map_point_images',
					'with_relations[0]': 'image',
					'with_relations[1]': 'video',
					'filter[0][key]': 'map_point_id',
					'filter[0][op]': 'eq',
					'filter[0][value]': id
				})

				return res
			},

			async getDetail(id) {
				const res = await this.$u.api.pointDetail({
					//table_name: 'map_points',
					'with_relations[0]': 'image',
					'with_relations[1]': 'video',
					'with_relations[2]': 'videoImage',
					'with_relations[3]': 'mapPointContent',
					id
				})

				return res
			},
			async getVrs(id) {
				const res = await this.$u.api.pointDetail({
					table_name: 'map_point_contents',
					'with_relations[0]': 'image',
					'with_relations[1]': 'video',
					'filter[0][key]': 'map_point_id',
					'filter[0][op]': 'eq',
					'filter[0][value]': id
				})

				return res
			},

			hiddenLoad() {
				uni.hideLoading()
			}
		},
		async onLoad(option) {
			let detail = await this.getDetail(option.id)
			this.detailPoints = detail.points
			this.companyName = this.detailPoints.name
			this.$nextTick(() => {
				this.$refs.uReadMore.init();
			})
			let vrs = detail.content

			let images = await this.getImages(option.id)
			images.data.map(item => {
				this.imageArr.push(item.image.url)
			})
			if (this.detailPoints.video && this.imageArr.length > 0) {
				this.videoOrimage = 3
			} else if (this.imageArr.length > 0 && !this.detailPoints.video) {
				this.videoOrimage = 2
			} else {
				this.videoOrimage = 1
			}
			// if (this.flag) {
			//   uni.showLoading({
			//     mask: true,
			//     title: '加载中'
			//   })
			//   window.showVr = this.showVr
			//   window.toAnswer = this.toAnswer
			//   window.hideLoading = this.hiddenLoad

			//   this.$nextTick(() => {
			// let detail = await this.getDetail(option.id)
			// let vrs = detail.content
			// let images = await this.getImages(option.id)
			//     this.$refs['iframe'].onload = async () => {
			//       let detail = await this.getDetail(option.id)
			//       let vrs = detail.content
			//       let images = await this.getImages(option.id)
			//       this.$refs['iframe'].contentWindow.setDomData({ detail: detail.points , vrs: vrs, images: images.data })
			//     }
			//   })

			//   this.flag = false
			// }
		},
	}
</script>

<style lang="scss">
	.wrap {
		background: url(../../static/xtdk/detail-bg.png) no-repeat top left;
		background-size: 100% 100%;
		background-color: #fdd5d6;
		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%);

				uni-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%);
				}
			}

		}

		.title {
			width: 514rpx;
			height: 274rpx;
			margin: 0 auto;
			padding-top: 60rpx;
			display: block;
		}

		.detail-study {


			&-title {
				width: 685rpx;
				height: 87rpx;
				margin: 0 auto;
				display: block;
				padding-top: 20rpx;
			}

			&-video {
				background: url(../../static/xtdk/detail-video-bg.png) no-repeat top left;
				width: 100%;
				height: 340rpx;
				background-size: 100% 213rpx;
				background-position: 0 64rpx;

				&-content {
					width: 685rpx;
					height: 340rpx;
					margin: 0 auto;
					// border:1px solid red;
					margin-top: 40rpx;
					font-size: 0;

					&-left {
						width: 475rpx;
						height: 340rpx;
						position: relative;

						& .videowrap {
							image {
								width: 475rpx;
								height: 340rpx;
								padding-top: 0;
							}

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

							&-play {
								background: url(../../static/xtdk/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;
							}
						}

						// ::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
								}
							}

						}
					}

					&-right {
						background: url(../../static/xtdk/detail-video.png) no-repeat top left;
						width: 210rpx;
						height: 340rpx;
						background-size: 100% 100%;
					}
				}

			}

			&-detail {
				width: 685rpx;
				margin: 20rpx auto;
				padding-bottom: 40rpx;

			}

			&-bg {
				width: 685rpx;
				height: 49rpx;
				background: url(../../static/xtdk/detail-study1.png) no-repeat top left;
				background-size: 100% 100%;
				margin: 20rpx auto;
				line-height: 49rpx;
				color: #bf3022;
				padding-left: 60rpx;
				font-family: '宋体';
				font-size: 30rpx;
			}

			&-btn {
				width: 685rpx;
				height: 182rpx;
				background: url(../../static/xtdk/detail-btn.png) no-repeat top left;
				background-size: 100% 100%;
				margin: 0 auto;
				padding-top: 100rpx;
				padding-left: 215rpx;
				color: #fbf2dd;
				font-size: 20rpx;
				margin-top: 20rpx;
				padding-right:40rpx;
			}
		}
	}
</style>