<template>
  <section class="screen flex">

    <header class="wallet-header rowACenter">
      <aside
        class="flex-1 wallet-header-item"
        v-for="(item,index) in layoutData"
        :key="'wallet-header-item'+index"
        :class="{
          'wallet-header-item-margin': index!==0,
          ['wallet-header-item-'+item.style]:item.style,
        }"
      >
        <section class="rowACenter">
          <img src="@/assets/images/currency.png" class="wallet-currency-icon" />
          <div class="flex-1 overflow">
            <div class="wallet-header-label line-1">{{item.label}}</div>
            <div class="wallet-header-placeholder line-1">{{item.placeholder}}</div>
          </div>
          <section class="rowACenter">
            <aside class="cursor-pointer center wallet-button"
              v-for="(cItem,cIndex) in item.buttonGroup"
                   :class="{
                      'wallet-button-margin': cIndex !== 0
                   }"
                   :key="'button-'+cIndex+'-'+index"
                   @click="trigger(cItem,cIndex)"
            >{{cItem.label}}</aside>
          </section>
        </section>
        <div class="wallet-header-price line-1">{{$store.getters[item.key]}}</div>
      </aside>
    </header>

    <section class="flex-1 overflow">
      <tab
          :data="tabData"
      >

        <template v-slot:header="{data,trigger,select}">
          <header class="rowACenter tab-button-header">
            <aside
              class="tab-button-item center"
              :class="{
                'tab-button-item-select': index === select,
                'cursor-pointer': index !== select
              }"
              v-for="(item,index) in data"
              :key="'tab-item-'+index"
              @click="trigger(index)"
            >{{item.label}}</aside>
          </header>
        </template>

        <template
          v-for="(item,index) in tabData"
          v-slot:[item.slot]
        >
          <wallet-info
            :key="'wallet-info-'+index"
            :type="item.slot"
          ></wallet-info>
        </template>

      </tab>
    </section>


  </section>
</template>

<script>
import layoutData from '../data/data';
import tabData from '../data/tab';
import walletInfo from '../components/wallet-info';
import {
  tab
} from '$components';
import mixins from '../mixins';
export default {
  name: "my-wallet",
  data(){
    return {
      layoutData,
      tabData
    }
  },
  components:{
    tab,
    walletInfo
  },
  created() {
    return this.$store.dispatch('updateUserMoneyPromise');
  },
  mixins
}
</script>

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