<template>
  <div class="video-wrap" @dblclick="screen" ref="video">
    <div class="cpt_video">
      <div class="video-header">
        <div class="title">
          <span class="title-scroll">{{ name }}</span>
          <span class="title-scroll">{{ name }}</span>
        </div>
        <span class="label">{{ label }}</span>
        <div class="el-icon-close close" @click="close"></div>
      </div>
      <components :is="playerCom" ref="player" :url="url" :className="'fkLivePlayer'" />
      <slot></slot>
    </div>
  </div>
</template>

<script>
import LiveNVRPlayer from "./components/livenvr/index.vue";
import QingLiuPlayer from "./components/qingliu";
import SRSPlayer from "./components/srs";

export default {
  name: "Player",
  components: {
    QingLiuPlayer,
    LiveNVRPlayer,
    SRSPlayer,
  },
  props: {
    url: {
      type: String,
      default: "",
    },
    brand: {
      type: String,
      default: "qingliu",
    },
    // 持续滚动的文字
    name: {
      type: String,
      default: "",
    },
    // 关闭图标旁边的文字
    label: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isFullScreen: false, //是否全屏
    };
  },
  computed: {
    /**
     * 播放器组件名
     */
    playerCom() {
      switch (this.brand.toLowerCase()) {
        case "flv":
          return "LiveNVRPlayer";

        case "srs":
          return "SRSPlayer";

        case "livenvr":
          return "LiveNVRPlayer";

        case "qingliu":
          return "QingLiuPlayer";

        case "webrtc":
          // return "LiveNVRPlayer";
          return "SRSPlayer";

        default:
          return "LiveNVRPlayer";
      }
    },
  },

  watch: {},
  async mounted() {},
  beforeDestroy() {},
  methods: {
    close(data) {
      this.$emit("close");
    },
    screen() {
      this.isFullScreen = !this.isFullScreen;
      if (this.playerCom === "LiveNVRPlayer") {
        this.$refs.player.fullScreen(this.isFullScreen);
      } else {
        this.$refs.player.fullScreen(this.isFullScreen);
      }
    },
    play() {
      if (this.playerCom === "LiveNVRPlayer") {
        this.$refs.player.$refs["livePlayer"].pause();
      }
    },
    pause() {
      if (this.playerCom === "LiveNVRPlayer") {
        this.$refs.player.$refs["livePlayer"].play();
      }
    },
    async reset() {
      this.showPlayer = false;
      this.$nextTick(() => {
        this.showPlayer = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.video-wrap {
}
.cpt_video {
  width: 100%;
  height: 100%;
  background: #333;
  align-items: center;
  position: relative;

  .video-header {
    background: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: absolute;
    top: 5px;
    width: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;

    .close {
      cursor: pointer;
      opacity: 0.6;
      color: #ffffff;
    }
    .title {
      font-family: Microsoft YaHei;
      font-size: 14px;
      color: #fff;
      font-weight: 400;
      white-space: nowrap;
      line-height: 30px;
      overflow: hidden;

      .title-scroll {
        display: inline-block;
        animation: scrollTitle 15s linear infinite;
        position: relative;
        box-sizing: border-box;
        padding-right: 50px;
      }
    }
    .label {
      white-space: nowrap;
      margin-left: 5px;
      color: #fff;
      font-size: 12px;
    }
  }
}

@keyframes scrollTitle {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
