<template>
  <div class="dk-video" :style="_style">
    <div v-if="!poster" class="dk-video-content">
      <i class="el-icon-video-play" />
      <p v-if="!videoPath">请选择或者上传您的视频</p>
      <p v-else>当前不支持预览,请到实际页面查看</p>
    </div>
    <div v-else style="position: relative">
      <img :src="poster" alt="" width="100%">
      <div class="video-preview">
        <i class="el-icon-video-play" />
        <p v-if="!videoPath">请选择或者上传您的视频</p>
        <p v-else>当前不支持预览,请到实际页面查看</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DkVideo',
  props: {
    poster: {
      default: '',
      type: String
    },
    isHeight: {
      default: false,
      type: Boolean
    },
    height: {
      default: 0,
      type: Number
    },
    videoPath: {
      default: '',
      type: String
    },
    isOpenClose: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {}
  },
  computed: {
    _style() {
      var style = {}
      if (this.height && this.isHeight) {
        style.height = this.height + 'px'
      } else {
        style.height = '240px'
      }
      return style
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
.dk-video{
  width: 100%;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  color: #eee;
  .dk-video-content{
    text-align: center;
    p{font-size: 12px;color: #999}
  }
  .el-icon-video-play{
    font-size: 50px;
  }
  .video-preview{
    position: absolute;
    top: 0;
    background: #000;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
