<template>
  <div :class="['video-container', theme]" @click="hanleClick">
    <video
      :src="url"
      class="video-dom"
      ref="video"
      :controls="isPlaying"
    ></video>
    <div class="modal" :style="{ opacity: opacity }">
      <div class="play-btn">
        <i class="el-icon-caret-right"></i>
      </div>
      <div class="blur"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Video",
  props: {
    url: {
      default: "",
      type: String,
    },
    theme: {
      default: "red",
      type: String,
    },
  },
  data() {
    return {
      isPlaying: false,
      opacity: 1,
    };
  },

  methods: {
    // 播放视频
    play() {
      this.$refs.video.play();
    },
    // 暂停视频
    pause() {
      this.$refs.video.pause();
    },
    hanleClick() {
      this.isPlaying = !this.isPlaying;
      if (this.isPlaying) {
        this.play();
        this.opacity = 0;
      } else {
        this.pause();
        this.opacity = 1;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.video-container {
  position: relative;
  height: 100%;
  background-color: #000;
  .video-dom {
    height: 100%;
    width: 100%;
  }
  .modal {
    // width: 100%;
    // height: 100%;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // background-color: rgba($color: #000000, $alpha: 0.5);
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // position: absolute;
    // left: 0;
    // bottom: 0;
    // transition: all 0.5s ease;
    // position: absolute;
    // z-index: 9;

    .play-btn {
      width: 80px;
      height: 80px;
      // background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      i {
        font-size: 50px;
        z-index: 1;
        transform: scaleX(1.5);
      }
    }
  }
}

.play-btn {
  border: 2px solid #fff;
  color: #fff;
  background: $deepBlue;
}
</style>
