<template>
  <div class="video-container" @click="hanleClick">
    <video :src="url" class="video-dom" ref="video"></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,
    },
  },
  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%;
  .video-dom {
    height: auto;
    width: 100%;
  }
  .modal {
    width: 100%;
    height: 100%;
    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: 100px;
      height: 70px;
      border: 2px solid #892325;
      // background-color: #fff;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #892325;
      position: absolute;
      z-index: 1;
      i {
        font-size: 50px;
        z-index: 1;
      }
    }
  }

  .blur {
    width: 100px;
    height: 70px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    filter: blur(26px);
    z-index: 0;
  }
}
</style>