<template name="vodComment">
	<view>
		<view class="banner">
			<dever-video
			:src="item.video" 
			:pic="item.pic" 
			:control="true"
			:index="0" 
			:vid="item.id" 
			:load.sync="load"
			@play="play"
			ref="video"
			>
			</dever-video>
		</view>
		<block v-if="item.type == 2">
			<comment ref="comment" :item="item" :type="`content/video_comment`" :type_id="item.id"></comment>
		</block>
		<block v-if="item.type == 1">
			<seat ref="seat" :item="item" :type="`content/video_comment`" :type_id="item.id" @start="start" @stop="stop"></seat>
		</block>
	</view>
</template>

<script>
import deverVideo from '@/lib/dever/components/video.nvue';
import comment from "@/lib/dever/components/comment.vue";
import seat from '@/lib/dever/components/seat.vue';
export default {
	name: "vodComment",
	props: {
		control : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
		index : 0
	},
	data() {
		return {
			load : false,
		}
	},
	mounted() {
		this.control[this.index] = this;
	},
	methods:{
		start : function() {
			this.$refs.video.start();
		},
		stop : function() {
			this.$refs.video.stop(true);
		},
		play : function(state, time) {
			if (this.item.type == 1) {
				var method = 'seat';
			} else {
				var method = 'comment';
			}
			if (state == 'start') {
				this.$refs[method].start();
			} else if (state == 'stop') {
				this.$refs[method].stop();
			} else if (state == 'time' && time) {
				this.$refs[method].time(time);
			}
		},
	},
	components:{
		deverVideo,comment,seat
	}
}
</script>

<style>
.banner{
  position: relative;
  width: 750rpx;
  height: 422rpx;
  display: block;
}
</style>