<template>
	<view class="p-30">
		<view style="padding: 10upx 0;position: relative;" v-if="info" @click="videoFullScreenShow = true">
			<image style="width: 100%;" :src="info.imgUrl" mode="widthFix"></image>

		</view>
		<view class="bg-white p-20 rounded" v-if="info && info.detailContent">
			<rich-text :nodes="info.detailContent"></rich-text>
		</view>
		<view class="bg-white bottom p-30">
			<u-button shape="circle" type="primary">我要加入</u-button>
		</view>

		<!-- 全屏播放视频 -->
		<video-full-screen v-model="videoFullScreenShow" :src="info.detailVideoUrl" @exit="exit()">
		</video-full-screen>
	</view>
</template>

<script>
	import videoFullScreen from '@/components/video-full-screen/index.vue'

	export default {

		components: {
			videoFullScreen
		},
		data() {
			return {
				info: null,
				videoFullScreenShow: false, // 是否全屏显示视频
				videoplayObj: {}, //video对象
			}
		},
		onLoad(option) {
			this.info = JSON.parse(option.item)
			this.info.detailContent = this.escape2Html(uni.getStorageSync('detailContent'))
			uni.setNavigationBarTitle({
				title: this.info.name
			})
		},
		mounted() {
			this.videoplayObj = wx.createVideoContext('myVideo')
		},
		methods: {

			exit() {
				this.videoFullScreenShow = false;
				this.videoplayObj.pause()
			},

			escape2Html(str) {
				var arrEntities = {
					'lt': '<',
					'gt': '>',
					'nbsp': ' ',
					'amp': '&',
					'quot': '"'
				};
				return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
					return arrEntities[t];
				});
			}
		}
	}
</script>

<style lang="scss">
	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}
</style>