<template>
	<view >
		<u-popup key="1" :show="videoShow" :round="10" @close="closeVideo">
			<view class="" style="padding: 10px;">
			<view>
				<view class="container" >
					<div ref="videoContent" @tap="renderScript.handleClick" id="url-player-test"
						:videoData="videoData"
						:opname = "opname"
						:change:opname="renderScript.opnameChange"
						:change:videoData="renderScript.receiveMsg"></div>
				</view>						
			</view>
			 <div class="fullScreenButton-container" >
			  <div
			    :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
			    @tap="renderScript.changeVideoScreen"
			  ></div>
			</div>
			<view class="btn" style="text-align: center;">
				<button type="primary" @click="closeVideo" size="mini">关闭视频</button>
			</view>
			</view>
			</u-popup>			
	</view>
</template>

<script>
	export default {
		name:"oneVideo",
		props:['videoData'],
		data() {
			return {
				videoShow:true,
				 isFullScreen: false,
				 opname:''
			};
		},methods:{
			closeVideo(){					
					// this.timer = null;
					// await this.setVideoTime();
					// this.player.dispose();
				this.opname = 'close'
				this.$nextTick(()=>{
					this.$emit('close')
				})
				
			}
		}
	}
</script>
<script module="renderScript" lang="renderjs">

import $ from 'jquery'
//  import StaticADComponent from './staticadcomponent/index.js';
/**
  * 静态广告组件
  */


export default {
/**
* 静态广告组件
*/

components: {
    // MyComponent
  },
    mounted() {
        // 在适合的生命周期，通过script和link标签引入播放器sdk、css
        console.log(this.options, '这是monted')
        // this.loadWebPlayerSDK()
        // this.loadComponent()
    },
    data() {
        return {
            player: null,
            curTime: null,
            curStatus: null,
            // currentTime:null,
        }
    },


    watch: {


        curTime(val) {
            if (this.curTime !== null && this.curStatus !== null) {
                this.$refs.videoContent1.click()
            }
        }
    },

    methods: {

        handleClick(event, ownerInstance) {
            console.log('event at line 165:', event)
//             this.player.on('ready',function(){
//    var status=  this.player.fullscreenService.getIsFullScreen()
//    console.log('status at line 403:', status)
// console.log('触发点击事件',status))
//   })

            // ownerInstance.callMethod('getData')

        },
        emitData(event, ownerInstance) {
            var that = this;

            ownerInstance.callMethod('recordTime', {
                time: that.curTime,
                status: that.curStatus
            })

        },
        changeVideoScreen(event, ownerInstance) {
            var that = this;
            // this.$emit('changeScreenLoading',true)
            var status=this.player.fullscreenService.getIsFullScreen();
       


            ownerInstance.callMethod('screenChange', {
               status:status,
               primary:status?'portrait':'landscape'
            })


 if(status){



setTimeout(() => {
  plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
    this.player.fullscreenService.cancelFullScreen() ;
  // this.$emit('changeScreenLoading',false);
  
  
}, 100);


  // this.player.setPlayerSize('100%','200px');




            }else{

//               this.player.setPlayerSize({
//   w:"400px",
//   height:'60%'
//  });
// plus.screen.unlockOrientation();
this.player.fullscreenService.requestFullScreen();
     setTimeout(() => {
      // this.$emit('changeScreenLoading',false);
         plus.screen.lockOrientation("landscape-primary");

      }, 100);






            }
        },
        endEmitData(event, ownerInstance) {
            var that = this;

            ownerInstance.callMethod('handleEnd', )
        },
        getLive() {
if(this.videoData.type==1){
  var fullScreenButtonComponent = Aliplayer.Component({
  /**
  * 初始函数，在new对象时调用
  *
  * @param {string} adAddress - 广告视频地址
  * @param {string} toAddress - 广告链接地址
  */
  init: function (status, toAddress) {

    this.fullScreenStatus=status
    // this.adAddress = adAddress;
    // this.toAddress = toAddress;

    this.$html = $('.fullScreenButton-container');
  // this.$html.hide();
  },

  /**
  * 创建广告Dom元素
  */
  createEl: function (el) {


    this.$html.find('.ad').attr('src', this.adAddress);
    var $adWrapper = this.$html.find('.ad-wrapper');
    $adWrapper.attr('href', this.toAddress);
    $adWrapper.click(function () {
      // Aliplayer.util.stopPropagation();
    });
    // this.$html.find('.close').click(function () {
    //   this.$html.hide();
    // });
    // $(el).find('.prism-controlbar').append(this.$html);
    $(el).find('.prism-time-display').after(this.$html);
  },
  ready: function (player, e) {
    // this.$html.hide()
  },
  /**
  * 隐藏广告
  */
  play: function (player, e) {
    // this.$html.show();
  },
  /**
  * 显示广告
  */
  pause: function (player, e) {
    // this.$html.show();
  },
  /**
  * 隐藏广告
  */
  playing: function (player, e) {
    this.$html.show();
    // this.$html.hide();
  },
  waiting: function (player, e) {
    // this.$html.hide()
  },
  timeupdate: function (player, e) {
  },
  error: function (player, e) {
  },
  /**
  * 显示广告
  */
  ended: function (player, e) {
    // this.$html.show();
  }
});

console.log('this.currentVideoList at line 456111111111111111111111:', this.videoList)
     var player = new Aliplayer({
                id: "url-player-test",
                "vid": this.videoData
                    .videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
                "playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
                "encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
                "playConfig": {
                    "EncryptType": 'AliyunVoDEncryption'
                },
                width: '100%', //容器的大小
                // videoWidth: '100vw', //容器的大小
                // videoHeight: '100vh', //容器的大小
                height: '200px', //容器的大小
				// autoplay: false,
                playsinline:true,
     controlBarVisibility:"click",
     cover:"",
                components: [
//                   {
//   name: 'BulletScreenComponent',
//   type: AliPlayerComponent.BulletScreenComponent,
//   /** Descriptions of the scrolling text component parameters: text, style, bulletPosition
//    * text: The scrolling text
//    * style: The style of the scrolling text
//    * bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
//    */
//   args: ['本课程版权归天津众妙之门科技有限公司所有，翻版必究!', {fontSize: '16px', color: 'red',}, 'random']
// },
{name:'adComponent',type:fullScreenButtonComponent,args:['http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']},



// {
//   name: 'RotateMirrorComponent',
//   type: AliPlayerComponent.RotateMirrorComponent
// },


],

                skinLayout:[
   {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
    {name: "H5Loading", align: "cc"},
    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    {name: "infoDisplay"},
    {name:"tooltip", align:"blabs",x: 0, y: 56},
    {name: "thumbnail"},
    {
      name: "controlBar", align: "blabs", x: 0, y: 0,
      children: [
        {name: "progress", align: "blabs", x: 0, y: 44},
        {name: "playButton", align: "tl", x: 15, y: 12},
        {name: "timeDisplay", align: "tl", x: 10, y: 7},
        // {name: "fullScreenButton", align: "tr", x: 10, y: 12},
        // {name:"subtitle", align:"tr",x:15, y:12},
        {name:"setting", align:"tr",x:15, y:12},
        {name:"prism-speed-selector", align:"tr",x:15, y:12},
        {name: "volume", align: "tr", x: 5, y: 10}
      ]
    }
  ]

            }, function(player) {



            });



            this.player = player;
            this.$refs.videoContent.click()

var timer = setInterval(() => {
    var that = this;
    that.curTime = parseInt(this.player.getCurrentTime());
    that.curStatus = this.player.getStatus()

}, 1000);
// player.on('ready',function(){
//      player.fullscreenService.requestFullScreen()

//   })
this.player.on('ended', function() {
    console.log('that.curTime at line 242:', this.curTime)
    console.log('that.curStatus at line 210:', this.curStatus)
    this.$refs.videoContent2.click()

})
}


            // player.setRotate(90)

            //全屏播放

            // player.one('canplay', function() {
            //     // console.log('canplay', this.player.tag);
            //     player.tag.play();

            // });



        },
        receiveScreenType(newValue) {
            console.log('newValue at line 427屏幕方向111111111111:', newValue)

        },
        receiveFirstTime(newValue, oldValue, ownerVm, vm) {
            // //数据变化

            console.log('newValue111', newValue)

            console.log('vm4444', vm)
            console.log('this.firstTime at line 215:', newValue)
            if (this.player) {
                this.player.seek(newValue);
            }


        },
        // receiveVideoList(newValue, oldValue, ownerVm, vm) {
        //     // //数据变化

        //     console.log('currentVideoListcurrentVideoListcurrentVideoList', newValue)

        // },
		opnameChange(newValue, oldValue, ownerVm, vm) {
			console.log('opnameChange-----------', newValue)
			if(newValue == 'close'){
				this.timer = null;
				// await this.setVideoTime();
				this.player.dispose();
			}
		},
        receiveMsg(newValue, oldValue, ownerVm, vm) {
            //数据变化
            console.log('数据变化newValue', newValue)
			if(newValue.playAuth){
				  this.loadWebPlayerSDK()
				// this.checkValue()
			}else{
				
			}
			// this.loadWebPlayerSDK()
            // console.log('oldValue', oldValue)
            // console.log('ownerVm', ownerVm)
            // console.log('vm', vm)
        },
        receiveWinWidth(newValue, oldValue, ownerVm, vm) {
            //数据变化
            console.log('newValue', newValue)
            // console.log('oldValue', oldValue)
            // console.log('ownerVm', ownerVm)
            // console.log('vm', vm)
        },
        receiveWinHeight(newValue, oldValue, ownerVm, vm) {
            //数据变化
            console.log('newValue', newValue)
            // console.log('oldValue', oldValue)
            // console.log('ownerVm', ownerVm)
            // console.log('vm', vm)
        },
        checkValue() {
            console.log(this.videoData, this.videoData.playAuth, "1111888888")
			console.log('zoulema ');
            if (!this.videoData.playAuth) {
                setTimeout(() => {
                    this.checkValue();					
                }, 1000);
            } else {

console.log('this.videoList at line 这是这只只是594:', this.currentVideoList)
                this.getLive();
            }
        },
        loadWebPlayerSDK() {
            return new Promise((resolve, reject) => {



                const s_tag = document.createElement('script'); // 引入播放器js
                s_tag.type = 'text/javascript';
                s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
                s_tag.charset = 'utf-8';
                s_tag.onload = () => {
                  const s_tag1 = document.createElement('script'); // 引入播放器js
                s_tag1.type = 'text/javascript';
                s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js';
                s_tag1.charset = 'utf-8';
                s_tag1.onload = () => {
                    this.checkValue();					
                    resolve();

                }
                document.body.appendChild(s_tag1);

                }
                document.body.appendChild(s_tag);



                const l_tag = document.createElement('link'); // 引入播放器css
                l_tag.rel = 'stylesheet';
                l_tag.href =
                    'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';



                document.body.appendChild(l_tag);
            });
        },
        loadComponent() {
            // return new Promise((resolve, reject) => {
            //     const s_tag = document.createElement('script');
            //     s_tag.type = 'text/javascript';
            //     // 需要先下载组件 js 文件，放到项目 /static/ 目录下
            //     // 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
            //     s_tag.src = '@/static/aliplayercomponents.js';
            //     s_tag.charset = 'utf-8';
            //     s_tag.onload = () => {
            //         resolve();
            //     }
            //     document.body.appendChild(s_tag);
            // });
        }
    }
}
</script>

<style>
	.fullScreenButton-container {
	  color: #fff;
	  float: right;
	  height: 35px;
	  margin-top: 6px;
	  margin-right: 5px;
	  display: flex;
	  align-items: center;
	  position: relative;
	  i {
	    color: #fff;
	    display: inline-block;
	    font-size: 22px;
	    display: block;
	    margin-top: 7px;
	    cursor: pointer;
	    & + i {
	      margin-left: 3px;
	    }
	    @media (min-width: 768px) {
	      &:hover + .player-tooltip {
	        display: block;
	      }
	    }
	  }}
</style>
<style>

</style>