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

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

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