<template>
	<view class="main">
		<view class="back" />
		<u-navbar
			title="详情"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF"
			:placeholder="true"
			@leftClick="onBackTouched"
		/>
		<view class="body">
			<view class="image_out_box" v-if="isContainImage() || isContainVideo()">
				<video v-if="isContainVideo()" :src="pageData.skipurl" object-fit="fill"/>
				<image v-else-if="isContainImage()" :src="pageData.picurl" mode="widthFix"/>
			</view>	
			<text class="title">我是品牌风采和业务动态的文章摘要我是品牌风采的文章标题</text>
			<text class="time">{{this.$utils.formatTime(pageData.inserttime)}}</text>
			<view style="height: 50rpx;" />
			<u-parse :content="getShowingContent()" :tagStyle="style"/>
			<view style="height: 50rpx;" />
		</view>
		
	</view>
	
</template>

<script>
	///在进入这个页面之前，必须要设置需要显示的内容，否则可能会出现错误
	export default {
		
		data() {
			return {
				pageData : getApp().globalData.showingSkipData,
				style : {
					p : 'text-indent:50rpx;'
				},
			};
		},
		destroyed() {
			getApp().globalData.showingSkipData = null;
		},
		methods:{
			onBackTouched(){
				uni.navigateBack({
					
				});
			},
			/**
			 * 是否需要显示图片
			 */
			isContainImage(){
				var types	= this.pageData.getShowType();
				var index 	= types.indexOf(0x01);
				return index != -1;
			},
			///是否包含视频
			isContainVideo(){
				var types	= this.pageData.getShowType();
				//console.log(types);
				var index 	= types.indexOf(0x04);
				//console.log("是否含有视频：",index);
				return index != -1;
			},
			getShowingContent(){
				return  '<p>合同是适应私有制的商品经济的客观要求而出现的的，是商品交换在法律上的表现形式。</p>' + 
						'<p>商品生产产生后，为了交换的安全和信誉，人们在长期的交换实践中逐渐形成了许多关于交换的习惯和仪式。</p>' + 
						'这些商品交换的习惯和仪式便逐渐成为调整商品交换的一般规则。随着私有制的确立和国家的产生，' + 
						'统治阶级为了维护私有制和正常的经济秩序，把有利于他们的商品交换的习惯和规则用法律形式加以规定，并以国家强制力保障实行。' + 
						'于是商品交换的合同法律形成便应运而生了。古罗马时期合同就受到人们的重视。签订合同必须经过规定的方式，才能发生法律效力。' +
						'于是商品交换的合同法律形成便应运而生了。古罗马时期合同就受到人们的重视。签订合同必须经过规定的方式，才能发生法律效力。' +
						'于是商品交换的合同法律形成便应运而生了。古罗马时期合同就受到人们的重视。签订合同必须经过规定的方式，才能发生法律效力。' +
						'于是商品交换的合同法律形成便应运而生了。古罗马时期合同就受到人们的重视。签订合同必须经过规定的方式，才能发生法律效力。';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.p{
		text-indent: 25rpx;
	}
	.body{
		width: 686rpx;
		height: auto;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		position: relative;
		left: 24rpx;
	}
	.title{
		position: absolute;
		width: 686rpx;
		height: 120rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 60rpx;
		color: #333333;
		//letter-spacing: 40rpx;
		opacity: 1;
		position: relative;
		top: 10rpx;
		
	}
	.image_out_box{
		width: 686rpx;
		height: 520rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		//background-color: #1CBBB4;
		border-radius: 20rpx;
	}
	.image{
		width: 686rpx;
		height: 393rpx;
	}
	.time{
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: relative;
		top: 10rpx;
		line-height: 33rpx;
	}
</style>
