<template>
	<view class="content" @click="copy">
		<video x5-video-player-type="h5-page" webkit-playsinline="true" 
		x5-video-orientation="portraint" id="myVideo" :src="video_url"
		 @click="copy" 
		 object-fit="contain" :controls="controls"  
		 loop="true"
		 ></video>
		<image  @click="closehj" v-if="video_index" class="video-bg" :src="video_index"></image>
		<view class="sheet" v-if="info.video_state==1">
			<image class="sheet-avatar" :src="video_face" mode=""></image>
			<view class="sheet-dz">
				<text v-if="Status" class="iconfont animate red iconxihuan"></text>
				<text v-if="dzd_status" class="iconfont iconxihuan red"></text>
				<block v-if="Status_set">
					<text v-if="Status" class="iconfont iconxihuan red"></text>
					<text v-if="!Status" @click="bindxin" class="iconfont iconxihuan "></text>
				</block>
				<view class="ft22">
					{{info.video_zan}}
				</view>
			</view>
			<view class="sheet-fx" @click="phone">
				<text class="iconfont iconlianxi"></text>
				<view class="ft22">
					{{info.video_ping}}
				</view>
			</view>
			<view class="sheet-fx" @click="share">
				<text class="iconfont iconzhuanfa"></text>
			</view>
		</view>
		
		<view class="sheet-conent">
			
			<block v-if="close">
				<view v-if="info.jump_state==1" >
					<view v-if="info.jump_type==1" :style="'width:'+jump_width+'px'+';'+'height:'+jump_height+'px'"  @click="href" class="flex-y-center sheet-conent-ad sheet-conent-ad-home">
						<image class="sheet-conent-ad-icon" :style="'width:'+icon_width+'px'+';'+'height:'+icon_width+'px'" :src="URL+info.jump_img" mode=""></image>
						<image @click.stop="del" class="del" src="../../static/images/shanchu.png" mode=""></image>
						<view class="sheet-conent-ad-text" :style="'width:'+text_width+'px'">
							<view class="text-1">
								{{info.jump_title}}
							</view>
							<view class="sheet-conent-ad-desc text-2">
								{{info.jump_cont}}
							</view>
						</view>
					</view>
					<view v-else class="sheet-conent-ad sheet-conent-ad-home">
						<view v-html="wxOpenTags">
						</view>
						<image @click.stop="del" class="del" src="../../static/images/shanchu.png" mode=""></image>
					</view>
				</view>
			</block>
			
			<block v-if="info.video_state==1">
				<view class="sheet-conent-title text-1">
					 {{info.video_title?'@':''}}{{info.video_title}}
				</view>
				<view class="sheet-conent-desc text-2">
					{{info.video_desc}}
				</view>
			</block>
		</view>
		<view class="model" @click="close_share" v-if="isdown">
			<view class="model-home">
				<image class="model-img" src="/static/images/jt.png" />
				<view>1.请点击右上角
					<block>选择分享好友或者朋友圈</block>
				</view>
			</view>
			<view class="model-close">
				2.点击关闭遮盖层
			</view>
		</view>
		<view class="model_s flex-center" v-if="hj_state" @click="closehj">
			<view class="">
				<view class="wave ripple danger">
					<view class="circle"></view>
					<view class="circle"></view>
					<view class="circle"></view>
					<view class="circle"></view>
					<view class="circle"></view>
					<view class="circle"></view>
					<view class="model_s_pa flex-center">
						<image class="model_s_sz" src="../../merchant/static/images/shouzhi.png" mode=""></image>
					</view>
				</view>
				<view class="model_s_text flex-center">
					开始播放
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		data() {
			return {
				video_face: "../../static/images/avatar.png",
				video_index: "",
				dzd_status: false,
				Status: false,
				Status_set: true,
				close: true,
				info: {},
				URL: getApp().globalData.URL,
				isdown: false,
				autoplay: true,
				controls: false,
				hj_state: false,
				video_url: "",
				wxOpenTags: "",
				jump_width:"",
				jump_height:"",	
				
				icon_width:"",
				// icon_height:"",
				text_width:""
			}
		},

		onLoad(e) {
			
			var windowWidth =uni.getSystemInfoSync().windowWidth,   // 获取当前窗口的宽度
			    windowHeight= uni.getSystemInfoSync().windowHeight;    // 获取当前窗口的高度
				this.jump_width=windowWidth/1.4;
				this.jump_height=(windowWidth/1.4)/3.1;
				this.icon_width=this.jump_height-20;
				this.text_width=this.jump_width-this.icon_width-16
				
			  getWXSign().then(res => {
			 	 console.log(res)
			  })
			  
			function getUrlParam(paraName) {
				let url = window.location.href;
				var arrObj = url.split("?");
				if (arrObj.length > 1) {
					var arr;
					for (var i = 0; i < arrObj.length; i++) {
						arr = arrObj[i].split("=");
						console.log(arr)
						if (arr != null && arr[0] == paraName) {
							return arr[1];
						}
					}
					return "";
				} else {
					return "";
				}
			}
			this.http(getUrlParam('card_num'));	
			// this.http("1611546211O2S2853V");
		},

		onReady(e) {
			
			// if(/iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){
				
			// }else{

			// }
			
			this.videoContext = uni.createVideoContext('myVideo');
			this.videoContext.requestFullScreen();
		},

		methods: {
			
			closehj(e) {
				this.videoContext.play();
				this.hj_state = false;
				this.video_index = "";
				this.copy();
			},

			copy(e) {
				let content = this.info.way_power.replace(/<br\s*\/?\s*>/ig, "\n");
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("input")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove();
				return result
			},

			href(e) {
				location.href = this.info.jump_web;
			},

			share(e) {
				this.isdown = true;
			},

			close_share() {
				this.isdown = false;
			},

			del(e) {
				this.close = false
			},

			phone(e) {
				uni.makePhoneCall({
					phoneNumber: this.info.video_tel //仅为示例
				});
			},
			
			http(card_num) {
				this.request({
					url: "funeng/scan",
					data: {
						card_num: card_num,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.info = res.data;
						this.hj_state = res.data.hj_state == 1 ? true : false;
						uni.setNavigationBarTitle({
							title: res.data.video_title
						})
						if (res.data.video_otherurl) {
							this.getup(res.data.video_otherurl);
						} else {
							this.video_url = res.data.video_url;
						}
						
						if (res.data.jump_type == 2) {
							let jump_title = res.data.jump_title,
							    jump_img=this.URL+res.data.jump_img,
								jump_cont = res.data.jump_cont,
								xcx_original_id = res.data.xcx_original_id,
								xcx_link = res.data.xcx_link;
								console.log("xcx_original_id",xcx_original_id)
								var  jump_width= this.jump_width;
								var  jump_height= this.jump_height;
								var  icon_width=this.icon_width;
								var  text_width =this.text_width;
								
						setTimeout(() => {
							this.wxOpenTags =
								`<wx-open-launch-weapp id="launch-wxapp" username="${xcx_original_id}" path="${xcx_link}" >  
										<template>  
										<style>
											 .flex-y-center {
											   display: -webkit-box;
											   display: -webkit-flex;
											   display: flex;
											   -webkit-box-align: center;
											   -webkit-align-items: center;
											   -ms-flex-align: center;
											   -ms-grid-row-align: center;
											   align-items: center;
											 }
											 
											.sheet-conent-add {
												width: ${jump_width-10}px;
												height:${jump_height}px;
										   }
											
										 .sheet-conent-ad-home {
											position: relative;
										 }
											
										 .sheet-conent-ad-icon {
												width: ${icon_width}px;
												height: ${icon_width}px;
												min-width: 60px;
												margin: 0 10px;
											}
											.sheet-conent-ad-text {
											    width: ${text_width-10}px;
											}
											.sheet-conent-ad-desc {
												font-size: 12px;
												font-family: PingFang SC, PingFang SC-Regular;
												font-weight: 400;
												color: #666666;
												margin-top:5px;
												min-height: 31px;
											}
											.text-1{
												overflow: hidden;
												text-overflow:ellipsis;
												white-space: nowrap;
											}
											</style>
											<div class="flex-y-center sheet-conent-add">
												<img class="sheet-conent-ad-icon" src="${jump_img}" mode=""></img>
												<div class="sheet-conent-ad-text">
													<div class="text-1">
														${jump_title}
													</div>
													<div class="sheet-conent-ad-desc text-2">
														${jump_cont}
													</div>
												</div>
											</div>	
										</template>
									</wx-open-launch-weapp>`;
									}, 500);
						}
						if (res.data.wx_state == 1) {
							var super_id= this.info.super_id;
							getWXSign(super_id).then(r => {
								var imgUrl = res.data.wximg_url ? res.data.wximg_url : getApp().globalData.URL + res.data.wx_img;
								if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
									this.$wx.updateAppMessageShareData({
										title: res.data.wx_title, // 分享标题
										desc: res.data.wx_desc, // 分享描述
										link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
										imgUrl: imgUrl, // 分享图标
										success: (res) => {
											// 设置成功
											console.log("设置成功", res)
										}
									})
									this.$wx.updateTimelineShareData({
										title: res.data.wx_title, // 分享标题
										link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
										imgUrl: imgUrl, // 分享图标
										success: (res) => {
											// 设置成功
											console.log("设置成功", res)
										}
									})
								} else {
									// alert("pc")
									this.$wx.onMenuShareTimeline({
										title: res.data.wx_title, // 分享标题
										desc: res.data.wx_desc, // 分享描述
										link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
										imgUrl: imgUrl, // 分享图标
										success: (res) => {
											// 设置成功
											console.log("设置成功", res)
										}
									})
									this.$wx.onMenuShareAppMessage({
										title: res.data.wx_title, // 分享标题
										desc: res.data.wx_desc, // 分享描述
										link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
										imgUrl: imgUrl, // 分享图标
										success: (res) => {
											// 设置成功
											console.log("设置成功", res)
										}
									})
								}
							})
						}
					}
				}).catch((res) => {});
			},

			getup(url) {
				this.request({
					url: "videofuneng/video_down",
					data: {
						url: url,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.video_url = res.data.video_url;
						this.video_face = res.data.video_face;
						this.video_index = res.data.video_index;
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},


			bindxin(e) {
				// 说明已经点赞了, 如果再次点击 就是取消点赞
				if (this.dzd_status) {
					this.dzd_status = false
					var video_num = this.info.video_zan + "";
					if (video_num.indexOf("w") == -1) {
						this.info.video_zan = Number(this.info.video_zan) - 1
					}
					return
				}
				this.Status = true;
				setTimeout(() => {
					this.dzd_status = true
					this.Status = false;
					this.Status_set = false;
					var video_num = this.info.video_zan + "";
					if (video_num.indexOf("w") == -1) {
						console.log("video_zan")
						this.info.video_zan = Number(this.info.video_zan) + 1
					}

				}, 2000);
			},

		}
	}
</script>

<style>
	page {
		height: 100vh;
		width: 100%;
	}

	.content {
		height: 100%;
		width: 100%;
	}

	.content video {
		height: 100%;
		width: 100%;
	}

	.sheet {
		position: absolute;
		right: 30rpx;
		bottom: 300rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		z-index: 999;
	}

	.video-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 998;
		left: 0;
	}

	.sheet-avatar {
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 30rpx;
		border-radius: 50%;
	}

	.sheet-dz {
		margin-bottom: 30rpx;
		position: relative;
	}

	.sheet-dz text {
		/* 	width: 58rpx;
		height: 48rpx; */
		font-size: 58rpx;
		margin-bottom: 4rpx;
	}

	.sheet-fx {
		margin-bottom: 30rpx;
	}

	.sheet-fx text {
		/* 	width: 58rpx;
		height: 48rpx; */
		font-size: 50rpx;
		margin-bottom: 4rpx;
	}

	.sheet-conent {
		position: absolute;
		z-index: 999;
		left: 50rpx;
		bottom: 100rpx;
		width: 600rpx;
	}

	.sheet-conent-ad {
		width: 530rpx;
		/* 270px */
		height: 168rpx;
		/* 168rpx */
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(208, 208, 208, 0.16);
		margin-bottom: 24rpx;
		padding-right: 20rpx;
	}

	.sheet-conent-ad-home {
		position: relative;
	}

	.sheet-conent-ad-text {
		width: 350rpx;
	}

	.sheet-conent-ad .sheet-conent-ad-icon {
		width: 120rpx;
		height: 120rpx;
		min-width: 120rpx;
		margin: 0 8px;
	}

	.sheet-conent-ad-desc {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #666666;
		margin-top: 10rpx;
		min-height: 62rpx;
	}

	.sheet-conent-title {
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #ffffff;
		margin-bottom: 24rpx;
	}

	.sheet-conent-desc {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #ffffff;
	}

	.del {
		position: absolute;
		right: 20rpx;
		top: 8rpx;
		width: 30rpx;
		height: 30rpx;
		/* background: #cbcbcb; */
		border-radius: 1rpx;
	}


	.sheet-dz .animate {
		position: absolute;
		z-index: 100;
		animation: ClickLikeAni 2s ease-in-out alternate forwards;
		/* background-image: url("../../assets/images/dzd.png"); */
		background-size: cover;
	}

	@keyframes ClickLikeAni {
		0% {
			top: 0px;
		}

		10% {
			top: -3px;
		}

		20% {
			top: -9px;
		}

		30% {
			top: -15px;
		}

		40% {
			top: -21px;
			transform: rotate(6deg);
		}

		50% {
			top: -27px;
			transform: rotate(12deg);
		}

		60% {
			top: -36px;
			transform: rotate(6deg);
		}

		70% {
			top: -42px;
			transform: rotate(0deg);
		}

		80% {
			top: -48px;
			transform: rotate(-6deg);
		}

		90% {
			top: -54px;
			transform: rotate(-12deg);
		}

		100% {
			top: -60px;
			transform: rotate(-6deg);
			opacity: 0;
		}

	}

	.sheet-dz .red {
		color: red;
	}

	.model {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.5);
		font-size: 18px;
	}

	.model-home {
		width: 135px;
		height: 100px;
		position: fixed;
		right: 24px;
		top: 32px;
		text-align: center;
		color: #FFFFFF;
	}

	.model-close {
		width: 100%;
		height: 100px;
		position: fixed;
		right: 24px;
		top: 200px;
		text-align: right;
		color: #FFFFFF;
	}

	.model-img {
		width: 50px;
		height: 50px;
	}



	.model_s {
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.model_s_pa {
		position: absolute;
		width: 300rpx;
		height: 300rpx;

	}

	.model_s_sz {
		width: 160rpx;
		height: 160rpx;
		margin-top: 52rpx;
		margin-left: 24rpx;
	}

	.model_s_text {
		font-size: 40rpx;
		color: #FFFFFF;
	}

	.container_title {
		font-size: 48rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Medium;
		margin-top: 90rpx;
		padding: 0 20rpx;
	}

	/************以下为具体实现************/

	.wave {
		position: relative;
		width: 300rpx;
		height: 300rpx;
		text-align: center;
		font-size: 28rpx;
		margin: 0 auto;
	}

	.wave .circle {
		position: absolute;
		border-radius: 50%;
		opacity: 0;
	}

	/* 波纹效果 */

	.wave.ripple .circle {
		width: calc(100% - 6px);
		/* 减去边框的大小 */
		height: calc(100% - 6px);
		/* 减去边框的大小 */
		border: 3px solid #fff;
	}

	.wave.ripple .circle:first-child {
		animation: circle-opacity 2s infinite;
	}

	.wave.ripple .circle:nth-child(2) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.3s;
	}

	.wave.ripple .circle:nth-child(3) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.6s;
	}

	.wave.ripple .circle:nth-child(4) {
		animation: circle-opacity 2s infinite;
		animation-delay: 0.8s;
	}

	.wave.ripple .circle:nth-child(5) {
		animation: circle-opacity 2s infinite;
		animation-delay: 1s;
	}

	.wave.ripple .circle:nth-child(6) {
		animation: circle-opacity 2s infinite;
		animation-delay: 1.2s;
	}

	.wave.ripple.danger {
		color: #FFFFFF;
	}

	.wave.ripple.danger .circle {
		border-color: #FFFFFF;
	}

	.wave.ripple.warning {
		color: orange;
	}

	.wave.ripple.warning .circle {
		border-color: orange;
	}

	/* 波动效果 */

	/* 
	.wave.solid .circle {
	  width: 100%;
	  height: 100%;
	  background: #fff;
	}
	
	.wave.solid .circle:first-child {
	  animation: circle-opacity 2s infinite;
	}
	
	.wave.solid.danger {
	  color: red;
	}
	
	.wave.solid.danger .circle {
	  background: red;
	}
	
	.wave.solid.warning {
	  color: orange;
	}
	
	.wave.solid.warning .circle {
	  background: orange;
	} */

	@keyframes circle-opacity {
		from {
			opacity: 1;
			transform: scale(0);
		}

		to {
			opacity: 0;
			transform: scale(1);
		}
	}
</style>
