<template>
  <section class="banner" v-if="isShowBanner">
    <a class="banner__wrap" target="_blank" :href="bannerLink">
      <div class="banner__wrap__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: 'lotteryInfo'
    }),
    isShowBanner() {
      const { isShowBanner } = this.lotteryInfo
      return !!isShowBanner
    },
    bannerImg() {
      const { banner } = this.lotteryInfo
      const img = banner || CONFIG.defBanner
      return img
    },
    bannerLink() {
      return this.lotteryInfo.url || false
    }
  }
}
</script>

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