<template>
  <section class="screen gift-list-container">
    <flat-list
      :security-size="20"
      @fetch="fetch"
    >
      <template v-slot:layout="{data}">
        <section class="row wrap">
          <aside
              class="gift-list-item center"
              v-for="(item,index) in data"
              :style="{
              'margin-top': index / 7 < 1 ? '0px' :''
            }"
          >
            <v-image backgroundColor="transparent" :src="item.base_image" radius="0.03rem" class="gift-list-icon"></v-image>
            <div class="line-1 gift-list-title">{{item.gift_name}}</div>
            <div class="line-1 gift-list-number">{{item.gift_num || 0}}</div>
          </aside>
        </section>
      </template>

    </flat-list>

  </section>
</template>

<script>
import {
  vImage,
  FlatList
} from '$components';
import props from '../props';
import data from '../data/data';
export default {
  name: "gift-list",

  computed:{
    giftItem(){
      return ((data[this.mode] || {})[this.type])  || {};
    }
  },

  methods:{
    fetch(obj){
      return this.$request({
        url:this.giftItem.url,
        token:true,
        page:obj.data
      }).then((data)=>{
        return obj.success(data.data);
      }).catch(obj.fail);
    }
  },

  props,

  components:{
    vImage,
    FlatList
  }
}
</script>

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