<template>
	<!-- 回看 -->
	<view class="content">
		<far-bottom></far-bottom>
		<video class="videoBack" :src="viedoBack" controls autoplay='true' page-gesture='true'></video>
		<view class="on">
			<view class="anchorName f-28">
				{{anchor_name}}
			</view>
			<view class="name f-24">
				{{name}}
			</view>
		</view>
	    <view class="detail">
	    	<view class="backDetail f-28">回看详情</view>
			<view class="imgC" :style="{'background-image':'url('+coverImg+')'}" @click="lastSee">
			</view>
	    </view>
	</view>
</template>

<script>
	import App from "@/common/js/app.js";
	export default {
		data() {
			return {
				viedoBack:'',
				name:'',
				anchor_name:"",
				coverImg:'',
				id:''
			}
		},
		methods: {
		   backSee(roomid){
			  let _this = this,
			  	requestData = {
			  		page:1,
			  		page_index:10,
			  		room_id:roomid
			  	};
			  App._post_form('&p=wxapp&do=playBack', requestData, res => {
				  console.log(res,'-----------------')
			  	 this.viedoBack = res.data.live_replay[1].media_url;
			  }) 
		   },
		   lastSee(){
			   let id = this.id;
			   this.backSee(id);
		   }
		},
		onLoad(e) {
	       this.backSee(e.id);
		   this.id = e.id;
		   this.name = e.name;
		   this.anchor_name = e.anchor_name;
		   this.coverImg = uni.getStorageSync('coverImg')
		}
	}

</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100%;
		.videoBack {
			width: 100%;
			height: 350upx;
		}
		.detail {
			margin-top:30upx;
			margin-left:15upx;
			.imgC {
			margin-top:10upx;
				width: 334upx;
				height: 334upx;
				border-radius: 10upx 10upx 0upx 10upx;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
			}
		}
		.on {
			display: flex;
			flex-wrap: wrap;
			.anchorName {
				margin-left: 10upx;
			}
			.name {
				margin-left: 30upx;
				margin-top: 5upx;
			}
		}
		
	}
</style>
