<template>
  <div>
    <tab1 v-show="$store.state.data.tabbarActive == 0" />
    <tab2 v-show="$store.state.data.tabbarActive == 1" />
    <tab3 v-show="$store.state.data.tabbarActive == 2" />
    <tab4 v-show="$store.state.data.tabbarActive == 3" />
    <tabbar />
  </div>
</template>

<script setup name="MobileIndex">
import tab1 from "@/views/mobile/tab1";
import tab2 from "@/views/mobile/tab2";
import tab3 from "@/views/mobile/tab3";
import tab4 from "@/views/mobile/tab4";
import tabbar from "@/views/mobile/components/tabbar";
const { proxy } = getCurrentInstance();

watch(
  () => proxy.$store.state.data.tabbarActive,
  (newValue) => {
    if (newValue === undefined) {
      return;
    }
    proxy.$router.push({
      path: proxy.$route.path,
      query: {
        tab: newValue,
      },
    });
  }
);

const tabbarActive = parseInt(proxy.$router.currentRoute.value.query.tab);
if ([0, 1, 2, 3].some((item) => item === tabbarActive)) {
  proxy.$store.state.data.tabbarActive = tabbarActive || 0;
} else {
  proxy.$store.state.data.tabbarActive = 0;
}

</script>
