<template>
  <div :class="isChoice?'showVideo':'closeVideo'">
    <div class="videoTitle">
      <span style="margin-left: 15px;color: #334d6e">
         <img src="@/assets/images/camera.png" alt="fold" style="width: 18px;height: 18px">
        {{ videoName }}
      </span>
      <el-button v-if="videoName !=''" type="text" size="medium" style="margin-left: 8px;" @click="closeVideo">关闭</el-button>
      <el-dropdown @command="videoSetting" trigger="click" style="float: right;margin-right: 15px">
              <span class="el-dropdown-link">
                <img src="@/assets/images/setting.png" alt="fold" style="width: 18px;height: 18px">
              </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">全屏 </el-dropdown-item>
          <el-dropdown-item command="2">抓图(.JPEG) </el-dropdown-item>
          <el-dropdown-item command="3">抓图(.BMP) </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div :id="playId" class="videoContent"></div>
    <div class="mask" @dblclick="fullScreen"></div>
  </div>
</template>

<script>
import { getPreviewURLs } from "@/api/video/video";
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
export default {
  name: "play-video",
  props:{
    playId:{
      type: String
    },
    isChoice:{
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      showVideoNum: 1,
      player: null,
      cameraIndexCode: "",
      videoName: ""
    }
  },
  created(){
   // console.log(this.playId,"gagaga")
  },
  mounted() {
    if(!window.JSPlugin){
      this.loadScript("/h5player/h5player.min.js").then(() =>{
        this.createPlayer();
      this.init()
    })
    }else{
      this.createPlayer();
      this.init()
    }
  },
  methods:{
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener('resize', () => {
        this.player.JS_Resize()
      })
    },
    createPlayer() {
      this.player = new window.JSPlugin({
        szId: this.playId,
        szBasePath: "/h5player",
        iMaxSplit: 1,
        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
        openDebug: true,
        oStyle: {
          borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
        }
      });
    },
    loadScript(src){
      return new Promise(reslove =>{
        let scpritE1 = document.createElement("script");
      scpritE1.type = "text/javascript";
      scpritE1.src = src;
      scpritE1.onload = () => {
        reslove();
      }
      document.body.appendChild(scpritE1);
    })
    },
    playVideo(data){
      this.videoName = data.label;
     /* if(this.cameraIndexCode == data.deviceNum){
        return;
      }*/
      this.cameraIndexCode = data.deviceNum;
      if(data.deviceNum){
        getPreviewURLs({cameraIndexCode: data.deviceNum}).then(response =>{
          if(response.data.code == '0'){
            this.videoOpenNum++;
            let url = response.data.data.url;
            this.player.JS_Play(url,{playURL: url, mode: 0 }, 0).then(() => {
                console.log('realplay success')
            },
              e => { console.error(e) }
            )
          }
        });
      }
    },
    videoSetting(val){
      if(val== '1'){
        this.fullScreen();
      }
      if(val == '2'){
        this.capture("'JPEG'")
      }
      if(val == '3'){
        this.capture("'BMP'")
      }
    },
    //分屏设置自适应
    fit(){
      this.player.JS_Resize();
    },
    //全屏
    fullScreen(){
      this.player.JS_FullScreenDisplay(true).then(
        () => { console.log(`wholeFullScreen success`) },
        e => { console.error(e) }
      )
    },
    //抓图
    capture(imageType) {
      this.player.JS_CapturePicture(0, 'img', imageType).then(
          () => { console.log('capture success', imageType) },
        e => { console.error(e) }
      )
    },
    //关闭视频
    closeVideo(){
      this.player.JS_Stop().then(() => {
            this.videoName = "";
            console.log('stop realplay success')
       },
        e => { console.error(e) }
      )
    },
  }
}
</script>

<style scoped lang="scss">
  .showVideo{
    border: 2px solid #334d6e;
    height: 100%;
    position: relative;
    border-radius: 5px;
    box-shadow: 6px 0px 18px 1px rgba(0, 0, 0, 0.06);
  }

  .closeVideo{
    //border: 1px solid blue;
    height: 100%;
    position: relative;
    border-radius: 5px;
    box-shadow: 6px 0px 6px 6px rgba(0, 0, 0, 0.06);
  }

  .videoTitle{
    //border: 1px solid darkgreen;
    height: 40px;
    line-height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #F5F7FA;
  }

  .el-dropdown-link {
    cursor: pointer;
    font-size: 20px;
    color: blue;
  }

  .videoContent{
    height: 100%;
    padding: 40px 0px 0px 0px
  }

  .mask{
    position: absolute;
    top: 40px;
    bottom: 0;
    width: 100%;
  }

  .el-button--text{
    color: #334d6e;
  }

</style>
