<template>
  <section class="screen wallet-container">
    <tab
        :data="tabData"
    >
      <template v-slot:header="{data,trigger,select}" >
        <header class="wallet-info-header relative rowACenter">
          <aside
              v-for="(item,index) in data"
              :key="'my-order-'+index"
              class="wallet-info-aside center flex-1"
              :class="{
              'my-order-button-select': index === select,
              'cursor-pointer': index !== select
            }"
              @click="trigger(index)"
          >{{item.label}}</aside>
          <aside class="absolute center wallet-info-line"
                 :style="{
            width: 100 / data.length  +'%',
            left: (100 / data.length * select)+'%'
          }"
          >
            <div></div>
          </aside>
        </header>
      </template>

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

</template>

<script>
import {
  tab
} from '$components';
import walletList from '../../wallet-list';
import tabData from "../data/tab";
import props from '../props';
export default {
  name: "wallet-info",
  data(){
    return {
      tabData
    }
  },
  components:{
    tab,
    walletList
  },
  props
}
</script>

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