<template>
  <section v-if="isShowBanner" class="banner">
    <a class="banner__wrap" target="_blank" :href="bannerLink">
      <div class="banner__content" :style="`background-image:url('${bannerImg}')`"></div>
    </a>
  </section>
</template>

<script>
// 默认背景图
import CONFIG from '@/config'
import { mapGetters } from 'vuex'

export default {
  name: 'Banner',
  computed: {
    ...mapGetters({
      lotteryInfo: 'lottery/lotteryInfo'
    }),
    isShowBanner() {
      const { isShowBanner } = this.lotteryInfo
      return !!isShowBanner
    },
    bannerImg() {
      const { banner } = this.lotteryInfo
      const img = banner || CONFIG.defBanner
      return `${img}${CONFIG.ossImageServe}`
    },
    bannerLink() {
      return this.lotteryInfo.url || false
    }
  }
}
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  display: flex;
  &__wrap {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 110 / 330 * 100%;
    position: relative;
  }
  &__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    font-size: 0;
  }
}
</style>
