<template>
  <index v-show="state.tabIndex === 0" />
  <live v-show="state.tabIndex === 1" />
  <activity v-show="state.tabIndex === 2" />
  <tabbar :current="state.tabIndex" :list="final.list" @tab-change="(index) => state.tabIndex = index"/>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import activity from "./activity/index.vue";
import index from "./index/index.vue";
import live from "./live/index.vue";
import tabbar from "@/components/layout/tabbar.vue";

const state = reactive({
  tabIndex: 0,
});
const final = {
  list: [
    {
      text: "首页",
      icon: "wap-home",
    },
    {
      text: "直播",
      icon: "bars",
    },
    {
      text: "地图",
      icon: "manager",
    },
  ],
};
</script>

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