<template>
  <div class="ckVideoContainer">
    <div class="top" v-if="showSelectBtn">
            <span
              class="winNumName"
            >{{$t('message.videoManage.video')}}{{$t('message.videoManage.window')}}{{index}}</span>
            <!-- <img src="@/assets/images/overview3/close.png" class="close" @click="clocseVideo(item)" /> -->
          </div>
    <span v-if="showSelectBtn" class="operateIcon operateBtn primary" @click="selectWin"
      >选中此窗口</span
    >
    <div class="ckVideoBox" :class="'ckVideoBox' + index"></div>
  </div>
</template>
<script>
export default {
  props: ["url", "index","showSelectBtn"],
  watch: {
    //监听value的变化，进行相应的操作即可
    url: function (a, b) {
      //a是value的新值，b是旧值
      this.init();
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.init()
  },
  methods: {
    selectWin() {
      this.$emit("selectWin", this.$props.index);
    },
    init() {
      console.log("加载ckplayer");
      var videoObject = {
        container: ".ckVideoBox" + this.$props.index, //容器的ID或className
        variable: "player", //播放函数名称
        autoplay: true,
        live: true,
        video: this.$props.url,
        // video: "rtmp://localhost:1935/mylive/1",
      };
      var player = new ckplayer(videoObject);
      // console.log("ckplay");
      // console.log(player);
    },
  },
};
</script>
<style lang="less" scoped>
.ckVideoContainer,
.ckVideoBox {
  width: 100%;
  height: 100%;
  position: relative;
}
.ckVideoContainer:hover .operateIcon {
  display: block;
}
.operateIcon {
  position: absolute;
  right: 10px;
  top: 10px;
  display: none;
  z-index: 100000;
  cursor: pointer;
}
.operateBtn {
  font-size: 12px;
  border-radius: 10px;
  color: #fff;
  width: auto;
  vertical-align: top;
  line-height: 19px;
  padding: 0 5px;
  &.default {
    background-color: #9a9b9c;
  }
  &.primary {
    background-color: #31a4d9;
  }
}
.top{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1005;
        // background-color: #030303;
        .winNumName{
            color: #ffffff;
            font-size: 12px;
            text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
            padding: 10px 18px;
            display: inline-block;
        }
        .close{
            padding: 8px 18px;
            float: right;
            cursor: pointer;
            display: none;
        }
    }
</style>