<template>
	<view class="page">
		<!-- <nav-bar type="transparentFixed"></nav-bar> -->
		<swiper class="video_swiper" vertical circular :skip-hidden-item-layout="true" duration="300"
			@change="onSwiperChange">
			<swiper-item v-for="(item,index) of videoObj" :key="index" :data-index="index">
				<short-video :play="swiperIndex == index" :src="item.video_url" :index="index" :progress="progress"
					:progressValue="progressValue"></short-video>
				<!-- <view class="content_bottom_box">
					<view class="content_goods_info">
					</view>
					<text class="content_user_name">@{{item.video_title}}</text>
					<text class="content_description">{{item.video_desc}}~</text>
				</view> -->
				<view class="sheet-conent">
					<block v-if="item.close">
						<view v-if="item.jump_state==1">
							<view style="  flex-direction: row;align-items: center;" v-if="item.jump_type==1"
								:style="'width:'+jump_width+'px'+';'+'height:'+jump_height+'px'"
								@click="href(item.jump_web)"
								class="flex-y-center  flex-row  sheet-conent-ad sheet-conent-ad-home">
								<image class="sheet-conent-ad-icon"
									:style="'width:'+icon_width+'px'+';'+'height:'+icon_width+'px'"
									:src="URL+item.jump_img" mode=""></image>
								<image @click.stop="del(index)" class="del" src="../../static/images/shanchu.png"
									mode=""></image>
								<view class="sheet-conent-ad-text" :style="'width:'+text_width+'px'">
									<view class="text-1" style="display: block;">
										{{item.jump_title}}
									</view>
									<view class="sheet-conent-ad-desc text-2" style="display: block;">
										{{item.jump_cont}}
									</view>
								</view>
							</view>
							<view v-else class="sheet-conent-ad sheet-conent-ad-home">
								<view v-html="item.wxOpenTags">
								</view>
								<image @click.stop="del(index)" class="del" src="../../static/images/shanchu.png"
									mode=""></image>
							</view>
						</view>
					</block>

					<block v-if="item.video_state==1">
						<view class="sheet-conent-title text-1" style="display: block;">
							{{item.video_title?'@':''}}{{item.video_title}}
						</view>
						<view class="sheet-conent-desc text-2" style="display: block;">
							{{item.video_desc}}
						</view>
					</block>
				</view>

				<view class="right_suspended">
					<!-- <image class="sheet-avatar" :src="video_face" mode=""></image> -->
					<view class="suspended_features_item" v-if="item.video_zan">
						<text class="iconfont animate red iconxihuan"></text>
						<text class="suspended_features_text">{{item.video_zan}}</text>
						<!-- <text class="suspended_features_dot">{{item.video_zan}}</text> -->
					</view>
					<view class="suspended_features_item" v-if="item.video_tel" @click="phone(item.video_tel)">
						<text class="iconfont iconlianxi"></text>
						<text class="suspended_features_text">{{item.video_ping}}</text>
					</view>

					<view class="suspended_features_item" v-if="item.video_zan" @click="share(index,item.card_num)">
						<text class="iconfont iconzhuanfa"></text>
						<text class="suspended_features_text">分享</text>
					</view>

				</view>
			</swiper-item>
		</swiper>


		<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="progress_drag" @touchstart="onTouchstart" @touchmove="onTouchmove" @touchcancel="onTouchcancel"
			@touchend="onTouchend"></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" style="text-align: center;">
					开始播放
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import shortVideo from "@/components/module/short_video.vue";

	// #ifdef H5
	import getWXSign from "@/static/js/config.js";
	// #endif 
	export default {
		components: {
			shortVideo,
		},
		data() {
			return {
				swiperIndex: -1,
				progress: 10000,
				progressValue: 0,
				shareShow: false,
				videoObj: [],
				page: 1,
				URL: getApp().globalData.URL,
				close: true,
				wxOpenTags: "",
				jump_width: "",
				jump_height: "",
				isdown: false,
				icon_width: "",
				// icon_height:"",
				text_width: "",
				hj_state: true,
				card_num: '',
			};
		},

		onReachBottom() {
			console.log("到底了")
			this.http();
		},

		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			// uni.hideTabBar();
			let systemInfo = uni.getSystemInfoSync();
			this.screenWidth = systemInfo.screenWidth;
			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
			// #ifdef H5
			getWXSign().then(res => {
				console.log(res)
			})
			// #endif 
			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 "";
				}
			}
			// #ifdef H5
			this.card_num = getUrlParam('card_num') || "";
			// #endif 
			this.http();

		},

		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			// uni.hideTabBar();
			// #ifdef APP-PLUS
			uni.showModal({
				title: "提示",
				content: "APP体验效果不好，暂没做兼容",
				showCancel: false
			});
			// #endif
		},

		//方法
		methods: {

			closehj(e) {
				this.hj_state = false;
				this.swiperIndex = 0;
			},
			href(jump_web) {
				location.href = jump_web;
			},
			share(index, code) {
				this.isdown = true;
				// #ifdef H5
				this.videoObj[index]
				let desc = {
					wx_title: this.videoObj[index].wx_title,
					wx_desc: this.videoObj[index].wx_desc,
					wx_img_url: this.videoObj[index].wximg_url,
				}
				console.log(desc, code, "desc")
				this.share_desc(desc, code);
				// #endif
			},
 

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

			del(index) {
				this.videoObj[index].close = false;
				// this.close = false;
			},

			phone(video_tel) {
				uni.makePhoneCall({
					phoneNumber: video_tel //仅为示例
				});
			},

			http() {
				this.request({
					url: "Videofuneng/videolist",
					data: {
						token: uni.getStorageSync("token"),
						page: this.page,
						limit: 20,
						card_num: this.card_num,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						for (let i of res.data) {
							i.close = true;
							if (i.jump_type == 2) {
								let jump_title = i.jump_title,
									jump_img = this.URL + i.jump_img,
									jump_cont = i.jump_cont,
									xcx_original_id = i.xcx_original_id,
									xcx_link = i.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(() => {

								i.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);
							}
						}
						this.page = this.page + 1;
						this.videoObj = this.videoObj.concat(res.data);
						let desc = {
							wx_title: "欢迎来到视频交流区",
							wx_desc: "记录美好生活的视频平台",
							wx_img_url: getApp().globalData.URL + "/forward/icon_2.png",
						}
						// #ifdef H5
						this.share_desc(desc, "");
						// #endif
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			share_desc(desc, code) {
				let card_num = code ? code : "";
				let siteroot = this.URL;
				getWXSign().then(r => {
					var imgUrl = desc.wx_img_url;
					console.log(imgUrl, "imgUrl")
					if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
						this.$wx.updateAppMessageShareData({
							title: desc.wx_title, // 分享标题
							desc: desc.wx_desc, // 分享描述
							link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
							imgUrl: imgUrl, // 分享图标
							success: (res) => {
								// 设置成功
								console.log("设置成功", res)
							}
						})
						this.$wx.updateTimelineShareData({
							title: desc.wx_title, // 分享标题
							link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
							imgUrl: imgUrl, // 分享图标
							success: (res) => {
								// 设置成功
								console.log("设置成功", res)
							}
						})
					} else {
						this.$wx.onMenuShareTimeline({
							title: desc.wx_title, // 分享标题
							desc: desc.wx_desc, // 分享描述
							link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
							imgUrl: imgUrl, // 分享图标
							success: (res) => {
								// 设置成功
								console.log("设置成功", res)
							}
						})
						this.$wx.onMenuShareAppMessage({
							title: desc.wx_title, // 分享标题
							desc: desc.wx_desc, // 分享描述
							link: siteroot + "/forward/#/pages/home/shortVideo?card_num=" + card_num,
							imgUrl: imgUrl, // 分享图标
							success: (res) => {
								// 设置成功
								console.log("设置成功", res)
							}
						})
					}
				})
			},

			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},

			onSwiperChange(e) {
				this.swiperIndex = e.detail.current;
				console.log(this.swiperIndex)
				if (this.swiperIndex == this.videoObj.length - 1) {
					this.http();
				}
			},


			onTouchstart(e) {
				this.progress = 0;
			},

			// 手指触摸后移动
			onTouchmove(e) {
				//手指当前坐标
				// #ifdef APP-NVUE
				const clientX = e.changedTouches[0].screenX;
				// #endif
				// #ifndef APP-NVUE
				const clientX = e.changedTouches[0].clientX;
				// #endif
				this.progress = parseInt((clientX / this.screenWidth) * 100);
			},
			// 手指触摸动作被打断，如来电提醒，弹窗
			onTouchcancel(e) {
				// #ifdef APP-NVUE
				this.progressValue = parseInt((e.changedTouches[0].screenX / this.screenWidth) * 100);
				// #endif
				// #ifndef APP-NVUE
				this.progressValue = parseInt((e.changedTouches[0].clientX / this.screenWidth) * 100);
				// #endif
			},

			// 手指触摸动作结束
			onTouchend(e) {
				// #ifdef APP-NVUE
				this.progressValue = parseInt((e.changedTouches[0].screenX / this.screenWidth) * 100);
				// #endif
				// #ifndef APP-NVUE
				this.progressValue = parseInt((e.changedTouches[0].clientX / this.screenWidth) * 100);
				// #endif
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>

<style lang="scss">
	.page {
		background-color: #1a1b20;
		width: 100%;
		position: relative;
	}

	.iconfont {
		font-size: 50rpx;
	}

	.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: 140rpx;
		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;
	}

	.progress_drag {
		position: absolute;
		bottom: 0rpx;
		left: 0;
		width: 100%;
		padding: 15rpx 0;
		z-index: 5;
	}

	.video_swiper {
		width: 100%;
		height: calc(100vh - var(--window-bottom));
	}

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

	.content_bottom_box {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		padding: 0 0rpx 40rpx 0rpx;
		background-image: linear-gradient(to, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
		// align-items: flex-start;
		z-index: 1;
	}

	.content_goods_info {
		height: 49rpx;
		// flex-direction: row;
		align-items: center;
		background-color: rgba($color: #000000, $alpha: 0.4);
		padding: 0 12rpx;
		margin: 0 182rpx 0 40rpx;
	}

	.content_goods_info_image {
		width: 24rpx;
		height: 24rpx;
	}

	.content_goods_info_text {
		font-size: 24rpx;
		color: #ffffff;
		margin-left: 12rpx;
	}

	.content_user_name {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
		margin: 70rpx 182rpx 0 40rpx;

	}

	.content_description {
		font-size: 28rpx;
		color: #ffffff;
		margin: 30rpx 182rpx 0 40rpx;
	}

	.right_suspended {
		position: fixed;
		right: 30rpx;
		bottom: 280rpx;
		align-items: center;
		z-index: 999
	}

	.suspended_user_info {
		position: relative;
	}

	.suspended_user_info_image {
		width: 120rpx;
		height: 120rpx;
		border: solid 2rpx #ffffff;
		border-radius: 50%;
	}

	.suspended_user_info_icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%) translateY(50%);
	}

	.suspended_features_item {
		align-items: center;
		position: relative;
		margin-top: 60rpx;
		color: #FFFFFF;
	}

	.suspended_features_icon {
		width: 48rpx;
		height: 48rpx;
	}

	.suspended_features_text {
		margin-top: 12rpx;
		font-size: 28rpx;
		color: #ffffff;
	}

	.suspended_features_dot {
		font-size: 20rpx;
		color: #ffffff;
		position: absolute;
		top: -10rpx;
		right: 0;
		transform: translateX(50%);
		height: 24rpx;
		background-color: #ff3682;
		border-radius: 12rpx;
		line-height: 24rpx;
		padding: 0 9rpx;
	}

	.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;
		margin: 0 auto;
		margin-top: 72rpx;
		margin-left: 86rpx;
	}

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

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

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