<template>
  <section class="screen my-order-container overflow">
    <tab
      :data="tabData"
    >
      <template v-slot:header="{data,trigger,select}" >
        <header class="my-order-header rowACenter" style="padding-bottom: 0">
          <aside
            v-for="(item,index) in data"
            :key="'my-order-'+index"
            class="my-order-button center my-follow-button"
            :class="{
              'my-order-button-select': index === select,
              'cursor-pointer': index !== select
            }"
            @click="trigger(index)"
          >{{item.label}}</aside>
        </header>
      </template>

      <template
        v-for="(item,index) in tabData"
        v-slot:[item.slot]
      >
        <component
          :is="item.slot"
        ></component>
      </template>

    </tab>
  </section>
</template>

<script>
import tabData from '../data/tab';
import {
  tab
} from '$components';
import  * as components from "../components";
export default {
  name: "my-follow",
  data(){
    return {
      tabData
    }
  },
  components:{
    tab,
    ...components
  }
}
</script>

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