<template>
  <!-- 三级路由布局页，关联父级 top.vue -->
  <div class="exposure">
    <mtp-tabbar class="mtp-tabbar--top" :data-source="list" v-model:selectedIndex="selectedIndex" label="title" @change="selectMenu" />
    <router-view :key="routerKey" />
  </div>
</template>

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

export default defineComponent({
  components: {
    MtpTabbar
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const routerKey = ref('default');
    const list = inject<Ref<OperationTabMenu[]>>('thirdMenuList');
    const index = inject<Ref<string[]>>('index');

    // 当前选中的标签
    const selectedIndex = computed({
      get: () => Number(index?.value[0]),
      set: (val) => {
        if (index) {
          index.value = [val.toString()];
        }
      }
    })

    // 切换路由
    function selectMenu(value: OperationTabMenu) {
      router.push({ name: value.code });
    }

    // 处理当路由跳转时页面不刷新的问题
    // 有两种情况判断是否刷新，1.当前标签code中不存在子路由时刷新，2.当前标签code中存在子路由时不刷新
    watch(() => route.name, (val) => {
      const currentTab = list?.value[selectedIndex.value];
      // 通过当前标签code和当前路由name做比较，如果相同说明无子路由
      if (currentTab?.code === val) {
        routerKey.value = route.fullPath;
      }
    })

    return {
      selectMenu,
      list,
      routerKey,
      selectedIndex
    }
  }
})
</script>

<style lang="less">
.exposure {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;

    .mtp-tabbar--bottom {
        padding-bottom: 0 !important;
    }
}
</style>
