<template>
  <div class="w-100 h-auto">
    <!-- navigation -->
    <div class="w-100 h-auto bo_t-1px bo_b-1px bo-EAEAEA">
      <div class="xw-1200px w-100 pr-15px pl-15px cen-x">
        <div class="w-100D1 h-100">
          <ul class="d-fx jc-sb xw-700px cen-x p-r">
            <li v-for="(menu, index) in tabMenus" :key="index"
              class="h-54px bo_t-1px bo_t-we bo_t-bk-H bo_b-we cursor-pointer"
              :class="menu === selectedNavMenu ? 'bo_t-bk' : ''"
              style="list-style-type: none"
              @click="updateSelectNavMenu(menu)"
              >
              <button class="h-100 cen lh-54px f-18px fw-500">{{menu}}</button>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="xw-1200px w-100 h-auto pr-15px pl-15px cen-x">
      <tabs-child-c v-for="(menu, index) in tabMenus" :key="index">
        <slot :name="menu" v-if="selectedNavMenu === menu"></slot>
      </tabs-child-c>
    </div>
  </div>
</template>

<script>
import TabsChildC from './tabs/TabsChildC.vue'

export default {
  name: 'TabsC',
  extends: {},
  data(){
    return{
      tabMenus: ['Board', 'Subscribe', 'Payment', 'Card'],
      selectedNavMenu: 'Board',//FIXME: must be added to store
      selectedMenu: 0,
    };
  },
  components: {
    'tabs-child-c': TabsChildC
  },
  computed: {
    // tabMenus() {
    //   const [{ tabMenus }] = this.TabsC
    //   return `${tabMenus}`.split(',')
    // },
  },
  watch: {},
  methods: {
    updateSelectedMenu (fromChildValue) {
      this.selectedMenu = fromChildValue
    },
    updateSelectNavMenu (menu) {
      this.selectedNavMenu = menu
      // alert(menu)
    }
  },
  beforeCreate(){},
  mounted(){}
}
</script>
