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

<script>
import deverAudio from '@/lib/dever/components/audio.nvue';
import deverComment from "@/lib/dever/components/comment.vue";
import deverSeat from '@/lib/dever/components/seat.vue';
export default {
	name: "audioComment",
	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.audio.start();
		},
		stop : function() {
			this.$refs.audio.stop();
		},
		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:{
		deverAudio,deverComment,deverSeat
	}
}
</script>

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