<template>
  <section class="screen my-order-container overflow">
    <tab
      :data="tabData"
    >
      <template v-slot:header="{data,trigger,select}" >
        <header class="my-order-header rowACenter">
          <aside
            v-for="(item,index) in data"
            :key="'my-order-'+index"
            class="my-order-button center"
            :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]
      >
        <order-item
          :item="item"
          :key="'order-item'+index"
          :order-status="item.orderStatus"
        ></order-item>
      </template>

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

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

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