<template>
  <van-popup
    v-model="visible"
    :overlay="false"
    position="bottom"
    transition="van-fade"
    class="introduction-popup"
    z-index="49"
    :class="lotteryInfo.showType === 7 ? 'bgtreasureColor' : 'bgluckybagColor'"
  >
    <div class="introduction-popup__main">
      <Rewards></Rewards>
      <div class="main-link" @click="visible = false">返回活动</div>
    </div>
  </van-popup>
</template>

<script>
import { mapGetters } from 'vuex'
import img from '@/assets/images/lottery/gift.png'
import Bus from '@/utils/Bus'
// 奖品介绍
import Rewards from '@/components/Lottery/Timing/Rewards'

export default {
  name: 'Introduction',
  components: {
    Rewards
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    rulePosition: {
      type: String,
      default: 'top'
    },
  },
  data() {
    return {
      img
    }
  },
  computed: {
    ...mapGetters({ lotteryInfo: 'lottery/lotteryInfo' }),
    visible: {
      get() {
        return this.value
      },
      set(val) {
        Bus.$emit('updateMain', { isShowIntro: val })
      }
    }
  },
  methods: {
    getContainer() {
      return document.querySelector('.lottery-instant')
    }
  }
}
</script>

<style lang="less" scoped>
.introduction-popup {
  width: 100%;
  height: calc(100% - 46px);
  &__main {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    padding-bottom: 13px;
    padding-top: 38px;
    position: relative;
    .main-link {
      width: 24px;
      height: 74px;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #db0000;
      line-height: 13px;
      writing-mode: tb-rl;
      text-align: center;
      background: url(img/link.png) no-repeat center;
      background-size: cover;
      position: absolute;
      right: 0;
      top: 20px;
      padding-right: 3px;
    }
  }
}
.bgtreasureColor {
  background-color: #ed112f;
}
.bgluckybagColor {
  background-color: #fb3f42;
}
</style>
