<template>
	<view class="park">
		<!-- 		<view class="park-navbar">
			<u-navbar title="观看视频" :border-bottom="false" :background="background"></u-navbar>
		</view> -->
		<u-mask :show="show">
			<view class="warp" @click.stop="pauseVideo">
				<video @tap.stop style="width: 100%;" :loop='true' id="myVideo" :src="video_url"></video>
				<view class="share">
					<button @click.stop="lookVideo" class="buttons"> 复制分享好友</button>
				</view>
			</view>
		</u-mask>
	</view>
</template>
<script>
	import * as api from '@/api/tutorial'
	export default {
		data() {
			return {
				background: {
					background: 'none'
				},
				video_url: '',
				title: ''

			}
		},
		onLoad(options) {
			this.show = true;
			let videoContext = wx.createVideoContext('myVideo')
			videoContext.seek(0);
			this.video_url = options.url;
			this.title = options.title
		},
		onShow() {

		},
		onShareAppMessage(res) {
			let that = this
			return {
				path: "/pages/merchantTutorial/lookVideo?url=" + that.video_url,
				imageUrl: that.video_url,
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {
						that.$toast('分享成功')
					}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						that.$toast('取消分享')
					} else if (res.errMsg == 'shareAppMessage:fail') {
						that.$toast('分享失败')
					}
				}
			}
		},
		methods: {
			lookVideo() {
				let str =
					`【小程序内商家教程视频】：${this.title}\n【点开学习】\n${this.video_url}(温馨提示：小程序商家教程内可以搜索你想要的内容，让你学习更加方便)`
				uni.setClipboardData({
					data: str, //	这里是个坑接受字符串类型 value转化为字符串
					success: function() {
						//调用方法成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			pauseVideo() {
				uni.createSelectorQuery().select('#myVideo').boundingClientRect(function(rect) {
					uni.createVideoContext('myVideo', this).pause();
				}).exec();
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style>
	.park {
		height: 100%;
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}

	.warp {
		width: 100%;
		height: 100%;
		background: #fff;
		/* padding-top: 170rpx; */
		/* height: calc(100% - 170rpx);
		 */

	}

	.share {
		width: 100%;
		height: 150rpx;
		color: white;
		text-align: center;
		vertical-align: top;
		margin-top: 30rpx;
	}

	.buttons {
		margin-top: 30rpx;
		border-radius: 42rpx;
		text-align: center;
		width: 300rpx;
		background: linear-gradient(125.45deg, #ff8a66 0%, #f34a40 100%);
		margin: 0 auto;
		border: none !important;
		padding: 0;
		line-height: 80rpx;
		height: 80rpx;
		font-size: 34rpx;
		font-family: PingFang SC,
			PingFang SC;
		font-weight: 700;
		color: white;
	}

	#myVideo {
		background-color: #fff !important;
		height: calc(100% - 150rpx);
	}
</style>
