
<template>
  <!-- 四级路由布局页，关联父级 main.vue -->
  <router-view :key="$route.fullPath"></router-view>
  <mtp-tabbar class="mtp-tabbar--bottom" :data-source="tabList" :selectedIndex="tabIndex" label="title" @change="tabChange" />
</template>

<script lang="ts">
import { defineComponent, inject, ref, Ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { initData } from '@/common/methods';
import { OperationTabMenu } from '@/services/go/commonService/interface'
import { useMenu } from '@/@next/hooks/common'
import MtpTabbar from '@/@next/components/base/tabbar/index.vue'

export default defineComponent({
  components: {
    MtpTabbar,
  },
  setup() {
    const { menus, getChildrenMenus } = useMenu();

    const route = useRoute();
    const router = useRouter();
    const parentTabList = inject<Ref<OperationTabMenu[]>>('thirdMenuList'); // 父级菜单(上边tab栏)
    const parentTabIndex = inject<Ref<string[]>>('index'); // 父级选中的菜单
    const tabList = ref<OperationTabMenu[]>([]);
    const tabIndex = ref(0);

    const tabChange = (item: OperationTabMenu) => {
      router.push({ name: item.code });
    }

    initData(() => {
      if (parentTabList?.value && parentTabIndex?.value) {
        const i = Number(parentTabIndex.value[0]);
        const code = parentTabList.value[i].code;

        const tmpList = getChildrenMenus(menus.value, code);
        if (tmpList.length) {
          tabList.value = tmpList;
          const index = tmpList.findIndex((e) => e.code === route.name);

          if (index > -1) {
            tabIndex.value = index;
            router.push({ name: tmpList[index].code });
          } else {
            router.push({ name: tmpList[0].code });
          }
        }
      }
    })

    return {
      tabList,
      tabIndex,
      tabChange,
    }
  }
})
</script>