<template>
	<el-drawer
		v-model="visible"
		destroy-on-close
		@closed="closeDrawer"
		:size="800"
	>
		<el-container v-loading="loading">
			<el-main style="padding: 0 20px 20px 20px;">
				<sc-title :title="channelName"></sc-title>
				<video id="videoElement" muted="muted"></video>
			</el-main>
			<el-footer>
				<el-button @click="visible = false">关闭</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>-->
<script>
	import scVideo from '@/components/scVideo'
	export default {
		components: {scVideo},
		emits: ["success", "closed"],
		props: {
			channelId: {
				type: String,
			},
			channelName: {
				type: String,
			}
		},
		data() {
			return {
				loading: false,
				visible: true,
				isSaveing: false,
				params:{
					json:{
						data: {
							channelId: "",
							streamType: "2",
							type: "flv"
						}
					},
					code:'video_realtime'
				},
			};
		},
		created(){
			const scriptInfo = document.createElement("script");
			scriptInfo.setAttribute("data-callType","callScript");
			scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
			document.head.appendChild(scriptInfo)
		},
		mounted() {
			this.$nextTick(()=>{
				this.params.json.data.channelId = this.channelId;
				// this.params.json = JSON.stringify(this.jso);
				this.$API.am.video.item.req(this.params).then(res=>{
					debugger;
					console.log(res);
					this.url = res.url;
					if (flvjs.isSupported()) {
						let videoElement = document.getElementById('videoElement');
						let flvPlayer = flvjs.createPlayer({
							type: 'flv',
							url: res.url
						});
						flvPlayer.attachMediaElement(videoElement);
						flvPlayer.load();
						flvPlayer.play();
					}
				})
			})
		},
		methods: {
			closeDrawer() {
				this.$emit('closed');
			},

		},
	};
</script>

<style>
	/*.el-drawer.rtl{
		width: 90%!important;
	}*/
</style>
