<template>
  <flat-list
    @fetch="fetch"
    :paging="false"
    @changeData="changeData"
  >
    <template v-slot:page>
      <swiper :swiper-option="swiperOption" v-if="giftUserData && giftUserData.length > 0" class="gift-banner screen" :pagination="true">
        <swiper-item
            v-for="(item,index) in giftUserData"
            :key="'gift-item-'+index"
            class="gift-item"
        >
          <div class="center screen relative">
            <v-image :src="item.base_image" backgroundColor="transparent" radius="0.05rem" class="gift-image"></v-image>
            <div class="line-1 gift-name">{{item.gift_name}}</div>
            <div class="rowACenter gift-price">
              <img src="@/assets/images/currency.png" class="gift-currency" />
              <div class="flex-1">
                <div class="line-1">{{item.gift_price}}</div>
              </div>
            </div>
            <section class="absolute gift-screen-hover" @mouseover="mouseover($event,item)"
                     @mouseout="mouseout"></section>
          </div>
        </swiper-item>
      </swiper>
    </template>
  </flat-list>

</template>

<script>
import {
  swiper,
  swiperItem,
  vImage,
  FlatList
} from '$components';

import mixins from '../mixins';

import props from '../props';

export default {
  name: "gift-banner",
  components:{
    swiper,
    swiperItem,
    vImage,
    FlatList
  },
  mixins,
  props
}
</script>

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