<template>
  <div class="biCustomDivAllC">
    <div class="ui-modal-body" :style="styleData.uiModalBody" @click="btnClick" v-if="!styleData.isShowVideo"></div>
    <video :src="styleData.topicImage" class="videoStyle" autoplay loop muted playsinline controls v-else></video>
  </div>
</template>

<script>
export default {
  props: ['biGift', 'styleData'],
  data() {
    return {};
  },

  created() {
    console.log(this.biGift, 'biGift数据');
    this.styleData.uiModalBody['width'] = this.biGift.imgWidth / 100 + 'rem';
    this.styleData.uiModalBody['height'] = this.biGift.imgHigh / 100 + 'rem';
    this.styleData.uiModalBody['left'] = `calc(50% - ${this.biGift.imgWidth / 100 / 2}rem)`;
    this.styleData.uiModalBody['top'] = `calc(50% - ${this.biGift.imgHigh / 100 / 2}rem)`;

    this.styleData.uiModalBody['background-image'] = `url(${this.biGift.showImg})`;
    if(this.biGift.showImg.indexOf('mp4') != '-1'){
      this.styleData.isShowVideo = true;
      this.styleData.topicImage = this.biGift.showImg;
    }else{
      this.styleData.isShowVideo = false 
    }
  },

  methods: {
    btnClick() {
      this.$emit('btnClickEmit', {});
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.biCustomDivAllC {
}
.videoStyle{
    position: absolute;
    background-color: initial;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 1;
    width: 6.5rem;
    height: 10rem;
    left: calc(50% - 3.25rem);
    top: calc(50% - 5rem);
}
</style>
