<template>
  <section class="screen dress-up-container">
    <tab
        :data="tabData"
    >
      <template v-slot:header="{data,trigger,select}" >
        <header class="dress-up-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 dress-up-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]
      >
        <dress-up-tab
          :key="'dress-up-tab-'+index"
          v-bind="item"
        ></dress-up-tab>
      </template>
    </tab>
  </section>
</template>

<script>
import {
  tab
} from '$components';
import tabData from "../data/tab";
import mixins from '../mixins';
import props from '../props';
import dressUpTab from '../components/dress-up-tab';
export default {
  name: "my-dress-up",
  data(){
    return {
      tabData
    }
  },
  components:{
    tab,
    dressUpTab
  },
  props,
  mixins
}
</script>

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