<template>
  <section class="screen flex">
    <header class="row between">
      <aside
        v-for="(item,index) in layoutData"
        :key="'my-gift-header-'+index"
        class="my-gift-item"
        :class="['my-gift-item-'+item.style]"
      >
        <header class="rowACenter">
          <img src="@/assets/images/currency.png" class="my-gift-item-currency" />
          <div class="my-gift-item-label">{{item.label}}</div>
        </header>
        <footer class="my-gift-item-number line-1">{{user.other && user.other[item.key] || 0}}</footer>
      </aside>
    </header>
    <article class="flex-1 my-gift-content">
      <tab
        :data="tabData"
      >
        <template v-slot:header="{data,trigger,select}">
          <header class="my-gift-tab-header rowACenter relative">
            <aside
                v-for="(item,index) in data"
                :key="'my-gift-tab-'+index"
                class="my-gift-tab-item center relative"
                :class="{
                  'cursor-pointer': index !== select
                }"
                @click="trigger(index)"
            >
              {{item.label}}
              <div v-if="index === select" class="my-gift-tab-line absolute center">
                <div></div>
              </div>
            </aside>
            <div class="flex-1"></div>
<!--            <aside v-if="data[select].exchange" class="my-gift-exchange button">兑换到钱包</aside>-->
          </header>
        </template>

        <template
          v-for="(item,index) in tabData"
          v-slot:[item.slot]
        >
          <gift-list
            :key="'gift-list-'+index"
            :type="item.type"
            :mode="mode"
          ></gift-list>
        </template>
      </tab>
    </article>
  </section>
</template>

<script>
import layoutData from '../data/data';
import tabData from '../data/tab';
import {
  tab
} from '$components';
import giftList from '../components/gift-list';
import mixins from '../mixins';
import props from '../props';
export default {
  name: "my-gift",

  data(){
    return {
      layoutData,
      tabData
    }
  },

  mixins,
  props,

  created() {
    this.$store.dispatch('updateUserLevelPromise');
  },

  components:{
    tab,
    giftList
  }

}
</script>

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