<template>
  <section :style="{height:height+'px'}" class="flex">
    <header class="rowACenter gift-wall-header">
      <span>礼物总价值:</span>
      <span><img src="@/assets/images/currency.png" class="gift-wall-currency" /><span class="gift-wall-price">21456</span></span>
    </header>
    <section class="flex-1">
      <swiper class="screen chat-gift-swiper"
              :swiper-option="swiperOption"
              :pagination="true"
              v-if="giftData && giftData.length>0"
      >
        <swiper-item
          v-for="(item,index) in giftData"
          :key="'gift-'+index"
          class="gift-wall-item center"
        >
          <v-image :src="item.base_image" class="gift-wall-icon" backgroundColor="transparent"></v-image>
          <div class="gift-wall-number line-1">12</div>
        </swiper-item>
      </swiper>
    </section>
  </section>
</template>

<script>
import {
  vImage,
  swiper,
  swiperItem
} from '$components';
import props from '../props';
import mixins from '../mixins';
import {mapState} from "vuex";
export default {
  name: "gift-wall",
  components: {
    vImage,
    swiper,
    swiperItem
  },
  computed:mapState({
    // @ts-ignore
    giftData:(state)=> state.gift.giftData
  }),
  mixins,
  props,
  created() {
    return this.$store.dispatch('initializationGiftPromise');
  }
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
