<template>
  <div class="introduction">
    <div class="introduction__wrap">
      <div class="introduction__wrap__title">活动介绍</div>
      <p class="introduction__wrap__text">{{ lotteryInfo.intro }}</p>
      <template v-if="!!lotteryInfo.isShowPrize">
        <div class="introduction__wrap__title">活动奖品</div>
        <div class="introduction__wrap__prize">
          <ul class="introduction__wrap__prize__list">
            <li v-for="(item, index) in lotteryInfo.prizeConfigs" :key="index">
              <img v-lazy="item.icon || img" alt />
              <p class="item__level" v-if="item.prizeAlias">{{ item.prizeAlias }}</p>
              <p class="item__name">{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import img from '@/assets/images/lottery/gift.png'

export default {
  name: 'Introduction',
  data() {
    return {
      img
    }
  },
  computed: {
    ...mapGetters(['lotteryInfo'])
  }
}
</script>

<style lang="less" scoped>
.introduction {
  width: 100%;
  background-color: #ff8e5e;
  border-radius: 6px;
  padding: 8px;
  &__wrap {
    border-radius: 6px;
    background-color: #fcf7d5;
    width: 100%;
    height: 100%;
    padding: 6px 12px;
    font-size: 12px;
    color: #fc5147;
    &__title {
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      height: 20px;
      line-height: 20px;
      margin: 8px 0;
    }
    &__text {
      font-size: 14px;
      padding: 5px;
      line-height: 18px;
    }
    &__prize {
      width: 100%;
      &__list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        li {
          text-align: center;
          width: 33.3333%;
          padding: 6px;
          img {
            display: block;
            width: 68px;
            height: 68px;
            margin: 0 auto;
          }
          p {
            font-size: 12px;
            &.item__level {
              font-size: 14px;
              height: 18px;
              line-height: 18px;
              margin: 5px 0 0;
            }
            &.item__name {
              margin: 5px 0 0;
              line-height: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
