<!-- 
/**
  * 荧石云播放器组件
  * @param: {Object} opts [top, left, eventOutClose(事件超出容器后关闭, 默认false), showCloseBtn(默认false)]
  *	@example1: 

  		npm install --save-dev ezuikit-js
	
		1, 引入
			import EZUIKitJs from '@/components/EZUIKitJs'

		2, 注册
			export default {
				components: {
					EZUIKitJs,
				},
			}
		
		3, 创建
			{
				autoPlayer:			// 是否自动播放
				selectSeat:			// 选择列表的位置 'right' || 'left' || 'none'
				playerToParam		// 根据传入参数播放 param[Object]
			}
			<EZUIKitJs ref="EZUIKit" selectSeat="right | none" autoPlayer="true"/>

  * @author: Kimber
  * @createtime: 2021/11/30(周二)
  */
 -->
<template>
	<div class="cv-inbox">
		<div class="vi-select" v-if="selectSeat!=='none'" :class="{'dir-right':selectSeat==='right'}">
			<el-select v-model="videoIndex" class="cus-select" placeholder="请选择视频" size="small" @change="selectVideo" label="操作">
				<el-option v-for="(obj, index) in videoList" :label="obj.name" :value="index"></el-option>
			</el-select>
		</div>
		<div class="cv-inbody">
			<div class="EZUIKit-video" id="video-container"></div>
		</div>
	</div>
</template>

<script>
import EZUIKit from "ezuikit-js";
import axios from 'axios';
import { getVideoInfo } from './config'
const request = axios.create({});
request.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

export default {
	name: "EZUIKit",
	data() {
		return {
			videoIndex:0,
			videoList:[],
		}
	},
	props: {
		selectSeat: String,
		autoPlayer: String,
	},
	mounted(){
		this.videoContainer = this.$el.querySelector("#video-container");
		//var configInfo = getVideoInfo(this.$store.state.user.user.username);


		//this.info = configInfo.info;
		//this.videoList = configInfo.list;

		if(this.autoPlayer !== 'false'){
			// 播放视频
			this.selectVideo(this.videoIndex);
		};

		// setTimeout(()=>{
		//   player.stop(); // 方法调用示例，10秒后关闭视频
		// },10000)
	},
	methods: {
		/**
		  * 获取Token
		  * @param: {Object} item
		  * @return: 
		  * @author: Kimber
		  * @updatetime: 
		  * @createtime: 2021/11/23(周二)
		  */
		playerVideo(item){
			if(this.videoContainer.firstElementChild){
				this.videoContainer.innerHTML = '';
				setTimeout(() => {
					this.createVideo(item);
				}, 500);
			}else{
				this.createVideo(item);
			};
		},

		createVideo(item){
			this.getAccessToken(this.info.appKey, this.info.appSecret).then(accessToken => {
				var url = this.getUrl(item);
				this.player = new EZUIKit.EZUIKitPlayer({
					autoplay: true,
					id: "video-container",
					accessToken:accessToken,
					url: url,
					template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
					// 视频上方头部控件
					//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
					//plugin: ['talk'],                       // 加载插件，talk-对讲
					// 视频下方底部控件
					// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
					// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
					// openSoundCallBack: data => console.log("开启声音回调", data),
					// closeSoundCallBack: data => console.log("关闭声音回调", data),
					// startSaveCallBack: data => console.log("开始录像回调", data),
					// stopSaveCallBack: data => console.log("录像回调", data),
					// capturePictureCallBack: data => console.log("截图成功回调", data),
					// fullScreenCallBack: data => console.log("全屏回调", data),
					// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
				});
			})
		},
		
		/**
		  * 获取Token
		  * @param: {String} appKey
		  * @param: {String} appSecret
		  *	@example1: getAccessToken('appKey', 'appSecret').then(accessToken => {});
		  * @return: 
		  * @author: Kimber
		  * @updatetime: 
		  * @createtime: 2021/9/1
		  */
		getAccessToken(appKey, appSecret){
			var dataJson = 'appKey='+appKey+'&appSecret='+appSecret;
			return request.post("/ys7com", dataJson).then(res=>{
				var data = res.data || {};
				if (data['code'] == '200') {
					return data['data']['accessToken']
				}else{
					return null
				}
			}).catch(err=>{
				console.log(err);
				return err
			})
		},

		getUrl(item){
			var captcha = item.captcha ? item.captcha + '@' :  '';
			var id = item.id || this.info.id || '';
			return 'ezopen://'+captcha+'open.ys7.com/'+id+'/'+item.channel;
		},
		// 视频选择事件
		selectVideo(index){
			var item = this.videoList[index];
			this.playerVideo(item)
		},
		playerToParam(param){
			this.info = {
				id: param.id,
				appKey:param.appKey,
				appSecret:param.appSecret,
			};
			this.playerVideo(param)
		},
		// 视频选择事件
		playVideoName(key){
			var configInfo = getVideoInfo(key);
			if(configInfo && configInfo.info){
				this.info = configInfo.info;
				this.videoList = configInfo.list;
				var item = this.videoList[0];
				this.playerVideo(item)
			}else{
				this.videoContainer.innerHTML = '';
			};
		},
	}
};
</script>
<style lang="scss">
	.cv-inbox{
		position:relative;height:100%;width:100%;display:flex;flex-direction:column;
		.vi-select{
			.cus-select{
				margin:5px;
				input{display:inline-block;width:150px;border:1px solid #d0d2ff;background-color:#014468;
					color:#d0d2ff;font-size:12px;
				}
				.el-input{}
				.el-input__inner{
					height:20px;line-height:20px

				}
				.el-input__suffix-inner{
					.el-select__caret{line-height:20px}
				}
			}
		}
		.dir-right{text-align:right;}

		.cv-inbody{
			flex:1;position:relative;
			.EZUIKit-video{
				background-color:#01050f;
				position:absolute;top:0;left:0;height:100%;width:100%;
				iframe{height:100%;width:100%;}
			}
		}
	}
</style>
