<template>
  <div class="video">
    <div class="banner">
      <img :src="data.imgUrl" alt="">
      <span @click="play"></span>
    </div>
    <p class="desc" @click="goDetail">{{ data.profileDesc }}</p>
    <Follow :data="data"/>
    <WinShop v-if="data.isWin" :data="data.winData"/>
    <div class="video-mask" v-show="showMask">
      <video 
        ref="video"
        controls="controls"
        playsinline 
        preload="auto"
        :src="data.videoUrl"
        type="video/mp4"
        @focus="focus"
        x5-video-player-type="h5" 
        x5-video-player-fullscreen="true"></video>
        <span class="close" @click="close"></span>
    </div>
    <span class="ad-sign" v-show="data.isAd"></span>
  </div>
</template>

<script>
import Follow from './Follow.vue'
import WinShop from './WinShop.vue'

export default {
  props: {
    data: Object
  },
  components: {
    Follow,
    WinShop
  },
  data() {
    return {
      imageUrl: 'https://tva1.sinaimg.cn/crop.0.0.640.640.180/005P6ewpjw8ey3wc87wtwj30hs0hsdhi.jpg?KID=imgbed,tva&Expires=1570527715&ssig=nGixsILrjI',
      showMask: false
    }
  },
  mounted() {
    console.log(this.data)
  },
  methods: {
    focus() {
      debugger
    },
    play() {
      this.showMask = true;
      this.$refs.video.play();
    },
    goDetail() {
      location.href = this.data.detailUrl;
    },
    close() {
      this.showMask = false;
      this.$refs.video.pause();
    }
  }
}
</script>

<style lang="scss" scoped>
  .video{
    position: relative;
    .banner{
      position: relative;
      img{
        width: 100%;
        object-fit: cover;
      }
      span{
        position: absolute;
        width: 0.96rem;
        height: 0.96rem;
        top: 50%;
        left: 50%;
        margin-top: -0.48rem;
        margin-left: -0.48rem;
        background: url('../imgs/on_play.png') no-repeat;
        background-size: 100% 100%;
        background-position: center center;
      }
    }
    .desc{
      display: -webkit-box;
      -webkit-line-clamp:2;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      font-size: 13px;
      line-height: 0.36rem;
      margin: 0.14rem;
      color: #282F3C;
    }
    .ad-sign{
      position: absolute;
      top: 0;
      right: 0;
      width: 0.3rem;
      height: 0.18rem;
      background: url('../imgs/icon_adimg.png');
      background-position: center center;
      background-size: 100% 100%;
    }
    &-mask{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1000;
      background:#000;
      video{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        max-height: 80%;
        object-fit: fill;
      }
      .close{
        position:absolute;
        width: 25px;
        height: 25px;
        top: 20px;
        left: 20px;
        font-size: 30px;
        background: url('../imgs/close.png');
        background-size: 100% 100%;
        background-position: center center;
      }
    }
  }
</style>