<template>
	<view class="page-view">
		<live-player :src="videoMsg.url" autoplay 
		 :orientation="isfullScreen ? 'horizontal': 'vertical'" class="live-player" 
		 muted="false"
		 @fullscreenchange="fullscreenchange" :style="isfullScreen? `width: 750rpx;height:${windowHeight}px;`:'width:750rpx;'"
		 @statechange="videoChange"
		 @audiovolumenotify="audiovolumenotify"
		 >
		</live-player>
		
		<cover-image 
			src="/static/images/video/full-video.png"
			@click="isfullScreen=!isfullScreen"
			class="screen-ico" 
			v-if="!isfullScreen"
			style="right:40rpx" ></cover-image>
		<cover-image
			v-else
			src="/static/images/video/orgin-video.png"
			@click="isfullScreen=!isfullScreen"
			class="screen-ico"
			style="left: 40rpx;"></cover-image>
		<!-- <cover-view class="uni-icon uni-icon-scan" @click="isfullScreen=!isfullScreen"></cover-view> -->
	</view>
</template>

<script>
	export default {
		data() {
			let appinfo = uni.getSystemInfoSync()
			return {
				requestData: {
					accessToken:"at.4ese57m70n5g281n9wlpfsyz4a4btbiw-58g0eoe6h4-02jhrfk-idxvwfdhh",
					deviceSerial:"F79721547", //679417149
					channelNo: "1",
					protocol: 3,
					type: "2",
					startTime:"",//"2021-06-10 11:00:00",
					stopTime:"",// "2021-06-10 11:30:00",
					quality: 2,
					supportH265: 0,
				},
				windowHeight: appinfo.windowHeight,
				isfullScreen: false,
				videoSrc: null,
				videoMsg: null
			}
		},
		methods: {
			videoChange(detail){
				console.log(detail)
			},
			audiovolumenotify(detail){
				console.log(detail)
			},
			getVideo () {
				let {requestData} = this
				uni.request({
					url:"https://open.ys7.com/api/lapp/v2/live/address/get",
					method: "POST",
					data: requestData,
					header:{
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success:(response)=>{
						console.log(response.data)
						if(response.data.code!='200') {
							uni.showModal({
								title: "温馨提示",
								content: "播放失败！错误码："+response.data.code+"；"+response.data.msg
							})
						}
						this.videoMsg = response.data.data
					}
				})
			}
		},
		onLoad(option) {
			
			let {sc, hd, bt, et, token} = option
			this.requestData.startTime= bt
			this.requestData.stopTime= et
			this.requestData.deviceSerial= sc
			this.requestData.channelNo= hd
			this.requestData.accessToken= token
			// this.videoSrc = `ezopen://open.ys7.com/${sc}/${hd}.rec?begin=20210610110000&end=20210610110130`
			this.getVideo()
		}
	}
</script>

<style scoped>
	.page-view{
		position: relative;
		
	}
	.live-player {
		width: 750rpx;
	}
	.screen-ico {
		position: absolute;
		bottom: 40rpx;
		right: 40rpx;
		color: #fff;
		width: 48rpx;
		height: 48rpx;
		z-index: 99;
	}
	.uni-icon-scan {
		color: #444;
		position: relative;
		/* top: -68rpx;
		margin-left: 40rpx; */
		fnot-size: 24rpx;
	}
</style>
<!-- 
<template>
    <div>
        <div
            id="video-container"
            style="width: 750rpx;height:7rem;"
          ></div>

    </div>
</template>
<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    let width = uni.upx2px(750);
    let height = width * 9 / 16;

      return {
          width: width,
          height: height,
          player: null,
          isplay: true
      }
  },
  onLoad(option) {
    console.group('mounted 组件挂载完毕状态===============》');
    let _this = this
    setTimeout(function() {
      _this.createPlay(option); // 方法调用示例，10秒后关闭视频
    }, 100)
  },
  methods: {
      createPlay(option) {
            let {sc, hd, bt, et, token} = option
            let url = `ezopen://open.ys7.com/${sc}/${hd}.rec?begin=${bt}&end=${et}`
            console.log(url)

            let width = this.width
            let height = this.height
            let player = this.player = this.$util.playVideo({
                autoplay: true,
                id: 'video-container',
                accessToken: token, // 'at.4ese57m70n5g281n9wlpfsyz4a4btbiw-58g0eoe6h4-02jhrfk-idxvwfdhh',
                url: url,

                //   url: 'ezopen://open.ys7.com/F79721547/1.rec?begin=20210603211700&end=20210603233159',

                // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
                  template: 'simple',

                // 视频上方头部控件
                //   controls: ['play', 'voice', 'fullScreen'],

                // 如果templete参数不为simple,该字段将被覆盖
                //   header: ['capturePicture', 'save', 'zoom'],
                //   plugin: ['talk'],                       // 加载插件，talk-对讲
                //   视频下方底部控件
                footer: ['fullScreen'], // 如果template参数不为simple,该字段将被覆盖'talk', 'broadcast', 'hd',
                audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
                openSoundCallBack: data => console.log('开启声音回调', data),
                closeSoundCallBack: data => console.log('关闭声音回调', data),
                startSaveCallBack: data => console.log('开始录像回调', data),
                stopSaveCallBack: data => console.log('end录像回调', data),
                capturePictureCallBack: data => console.log('截图成功回调', data),
                fullScreenCallBack: data => console.log('全屏回调', data),
                getOSDTimeCallBack: data => console.log('获取OSDTime回调', data),
                handleError: (data) => { console.log('错误', data) },
                width: width,
                height: height
            });
            console.log('player', player);

            // setTimeout(() => {
            //     player.stop()
            // }, 4 * 60 * 1000)

      }
  }
};
</script>
<style scoped>
    .video-box {
        width: 10rem;
        height: 12.5rem;
    }
</style>
 -->