<style>
	.video_Page {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.video_Page .sharebox_top_nav {
		width: 100%;
		display: flex;
		position: absolute;
		z-index: 999;
		left: 20px;
	}

	.video_Page .uni_vdplayer {
		width: 100%;
		height: 100%;
	}

	.video_Page .player-video {
		width: 100%;
		height: 100%;
	}

	.video_Bottom {
		position: absolute;
		bottom: 20px;
		right: 15px;
		width: 53%;
		height: 42px;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.good_Detail {
		width: 50px;
		height: 50px;
	}

	.good_other {
		width: 40px;
		height: 40px;
	}

	.video_detail {
		position: absolute;
		width: 210px;
		height: 65px;
		top: -80px;
		left: -230%;
		background-color: #fff;
		border-radius: 5px;
		padding: 5px;
	}

	.video_Tra {
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 10px solid #fff;
		position: absolute;
		top: -16px;
		left: 18px;
	}

	.video_cha {
		width: 17px;
		height: 17px;
		position: absolute;
		right: -5px;
		top: -5px;
	}

	.video_Shop {
		display: flex;
		position: relative;
	}

	.video_imgCt {
		width: 55px;
		height: 55px;
		margin-right: 5px;
	}

	.video_shopTitle {
		width: 114px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 11px;
		color: #111111;
	}

	.video_price {
		color: #FF3F47;
		font-size: 13px;
		margin-top: 6px;
	}

	.v_fx {
		width: 40px;
		height: 40px;
		border: none;
		outline: none;
		padding: 0;
		margin: 0;
		line-height: unset;
		background: none;
	}

	.video_Page button:after {
		border: none;
	}

	.vd-cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	video::-webkit-media-controls {
		display: none !important;
	}
</style>
<template>
	<view class="video_Page">
		<view class="sharebox_top_nav" :style="{top:nav+10+'px'}">
			<view class="arrow" @click="redirectPrev">
				<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
			</view>
		</view>
		<swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" :style="{'height':swiperHeight}">
			<block v-for="(item,index) in vlist" :key="index">
				<swiper-item>
					<view class="uni_vdplayer">
						<video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :loop="true" :show-progress="true"
						 :controls="false" :show-center-play-btn="false" :src="item.video_url" :autoplay="index==videoIndex" :objectFit="getVideoHeight(item.VideoType)" />
					</view>
					<!-- 中间播放按钮 -->
					<view class="vd-cover flexbox" @click="handleClicked(index)">
						<image v-if="!isPlay" style="width:74px;height:74px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"></image>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="video_Bottom">
			<view style="position: relative;">
				<template v-if="isShowInfo">
					<view class="video_detail">
						<view class="video_Shop">
							<view class="video_imgCt">
								<image style="width:100%;height:100%;" :src="comGoodImg" />
							</view>
							<view>
								<view class="video_shopTitle">
									{{comGoodTitle}}
								</view>
								<view class="video_price">
									<text style="font-size:10px;">¥</text>{{comGoodPrice}}
								</view>
							</view>
							<view class="video_cha" @click="isShowInfo=false">
								<image style="width:100%;height:100%;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_close.png"></image>
							</view>
						</view>
					</view>
					<view class="video_Tra"></view>
				</template>
				<image class="good_Detail" @click="getShowInfo()" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_goods.png"></image>
			</view>
			<image class="good_other" @click="goHome()" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_home.png"></image>
			<image class="good_other" @click="getBuy()" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_buy.png"></image>
			<button class="v_fx" open-type="share">
				<image style="height:100%;width: 100%;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_share.png"></image>
			</button>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
		<good-sku v-if="showSku" borderRadius="20" v-model="showSku" :good="sku" :option-type="2"></good-sku>
	</view>
</template>
<script>
	import goodSku from "@/components/goods/goodsku";
	import auth from "@/components/auth/index";
	export default {
		data() {
			return {
				vlist: [],
				videoIndex: 0,
				swiperHeight: 0, //高度
				GoodsId: 0, //商品id
				nav: 0,
				goodObj: {}, //商品对象
				msg: {
					pageIndex: 1,
					pageSize: 1,
					Name: '',
					GoodsType: 0,
					CategoryIds: '',
					OrderBy: 0,
					IsVideo: 1
				},
				isShowInfo: true, //显示商品弹窗
				comGoodImg: '', //商品缩小图
				comGoodTitle: '', //商品名称
				comGoodPrice: '', //商品价格
				showSku: false, //是否显示商品SKU
				sku: {},
				showAuth: false,
				u: {},
				isPlay: true, //当前视频是否播放中
				videoContextList: []
			}
		},
		components: {
			goodSku,
			auth
		},
		onReady() {
			this.getGoodInfo(); //获取传过来的数据
			this.getList();
		},
		onLoad(option) {
			this.GoodsId = option.GoodsId;
			this.sysheight = uni.getSystemInfoSync().windowHeight;
			this.swiperHeight = `${this.sysheight}px`;
			this.videoIndex = 0; //默认加载第一条
			this.vlist = [];
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"],
			});
		},
		methods: {
			//获取商品视频
			getVideoHeight(type) {
				//视频填充方式(0默认，1-填充)
				if (type == 0) {
					return 'contain'
				} else {
					return 'fill'
				}
			},
			//返回上一页
			redirectPrev() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 滑动切换 
			handleSlider(e) {
				let curIndex = e.detail.current
				if (curIndex > 0) {
					this.videoContextList[curIndex - 1].pause()
				}
				if (curIndex < this.vlist.length - 1) {
					this.videoContextList[curIndex + 1].pause()
				}
				this.videoContextList[curIndex].play()
				this.videoContextList[curIndex].seek(0)
				this.isPlay = true
				this.videoIndex = curIndex;
				this.comGoodImg = this.vlist[curIndex].picUrl;
				this.comGoodTitle = this.vlist[curIndex].name;
				this.comGoodPrice = this.vlist[curIndex].price;
				this.GoodsId = this.vlist[curIndex].id;
				this.sku = this.vlist[curIndex];
				let xz = this.vlist.length - e.detail.current;
				if (xz == 1) {
					this.msg.pageIndex++;
					this.getList(); //加载更多视频
				}
			},
			//点击暂停
			handleClicked(index) {
				if (this.isPlay) {
					this.pause(index)
				} else {
					this.play(index)
				}
			},
			// 播放
			play(index) {
				this.videoContextList[index].play()
				this.isPlay = true
			},
			// 暂停
			pause(index) {
				this.videoContextList[index].pause()
				this.isPlay = false
			},
			//获取传递过来商品信息
			getGoodInfo() {
				this.request2({
						url: "/api/AppletGoods/GetAppletGoodsInfo",
						data: {
							GoodsId: this.GoodsId,
						},
					},
					(res) => {
						if (res.resultCode == 1) {
							this.goodObj = res.data.goods;
							let obj = {
								OriginalPrice: this.goodObj.original_price,
								id: this.goodObj.id,
								name: this.goodObj.name,
								picUrl: this.goodObj.cover_pic,
								price: this.goodObj.price,
								video_url: this.goodObj.video_url,
								VideoType: this.goodObj.video_type
							}
							this.vlist.push(obj);
							this.comGoodImg = this.goodObj.cover_pic;
							this.comGoodTitle = this.goodObj.name;
							this.comGoodPrice = this.goodObj.price;
							this.GoodsId = this.goodObj.id;
							this.sku = obj;
							this.videoContextList.push(uni.createVideoContext('myVideo0', this));
						} else {

						}
					}
				);
			},
			//滚动加载的商品信息
			getList() {
				this.request2({
						url: '/api/AppletGoods/GetAppletGoodsPageListForZY',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							var data = res.data.pageData;
							if (data.length > 0) {
								let obj = {
									OriginalPrice: data[0].original_price,
									id: data[0].id,
									name: data[0].name,
									picUrl: data[0].cover_pic,
									price: this.goodObj.price,
									video_url: data[0].video_url,
									VideoType: data[0].video_type
								}
								this.vlist.push(obj);
								this.videoContextList = []
								for (var i = 0; i < this.vlist.length; i++) {
									this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
								}
							}
						}
					}
				);
			},
			//回到首页
			goHome() {
				uni.redirectTo({
					url: "/pages/index/index"
				});
			},
			//加入购物车或购买
			getBuy() {
				this.u = uni.getStorageSync('mall_UserInfo');
				if (!this.u) {
					this.u = {
						nickName: '未登录',
						avatarUrl: ''
					};
					this.showAuth = true;
				} else {
					this.showSku = true;
				}
			},
			reloadUserinfo() {
				this.u = uni.getStorageSync('mall_UserInfo');
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			//分享
			onShareAppMessage() {
				return {
					title: this.comGoodTitle,
					path: "/pages/video/index?GoodsId=" + this.GoodsId,
					imageUrl: this.comGoodImg
				};
			},
			onShareTimeline() {
				setTimeout(() => {
					this.getReceive();
				}, 2500);
				let uid = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserId :
					0;
				if (uid == 0) {
					uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0
				}
				let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").SmallShopId :
					0;
				if (SmallShopId == 0) { //如果微店id为0 去找所属微店id
					SmallShopId = uni.getStorageSync("mall_UserInfo") ?
						uni.getStorageSync("mall_UserInfo").UserSmallShopId :
						0;
				}
				return {
					title: this.comGoodTitle,
					query: "GoodsId=" + this.GoodsId + "&user_id=" + uid + "&SmallShopId=" + SmallShopId,
					imageUrl: this.comGoodImg,
				};
			},
			//点击商品
			getShowInfo() {
				this.isShowInfo = !this.isShowInfo;
			}
		},
		mounted() {},
		created() {
			this.nav = uni.getMenuButtonBoundingClientRect().top;
		},
	}
</script>