<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%;
  .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: 100px;
      height: 70px;
      // background-color: #fff;
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      z-index: 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      i {
        font-size: 70px;
        z-index: 1;
        transform: scaleX(1.5);
      }
    }
  }

  .blur {
    width: 120px;
    height: 84px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);
    filter: blur(20px);
    z-index: 0;
  }
}

.red {
  .play-btn {
    border: 2px solid #892325;
    color: #892325;
  }
}
.blue {
  .play-btn {
    border: 2px solid #2069c4;
    color: #2069c4;
  }
}
</style>