import TheFooterApp from "@/components/TheFooterApp";
import { Button, Sticky, Swipe, SwipeItem, Tab, Tabs } from "vant";
import { defineComponent, KeepAlive, ref, watch } from "vue";
import { RouterView, useRoute, useRouter } from "vue-router";
import TheHeader from "../../components/TheHeader";
import Down from "../down";
import Home from "../home";
import Music from "../music";
import Video from "../video";
import styles from "./index.module.less";

export default defineComponent({
  name: "indexApp",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const active = ref(route.name as string);
    watch(route, () => [(active.value = route.name as string)]);
    console.log(route.name)
    return () => (
      <div class={styles.layout}>
        <div class={styles.sticky}>
          <TheHeader />
        </div>
        <Tabs
          class={styles.tabs}
          v-model:active={active.value}
          color="var(--van-primary-color)"
          line-width="26px"
          swipeable
          animated
          sticky
          offset-top="1.46667rem"
          onChange={(name) => {
            const url = name === 'home' ? '/' : '/' + name
            router.replace({path: url})
          }}
        >
          <Tab title="首页" name="home">
            <Home />
          </Tab>
          <Tab title="谱库" name="music">
            <Music />
          </Tab>
          <Tab title="视频" name="video">
            <Video />
          </Tab>
          <Tab title="下载" name="down">
            <Down />
          </Tab>
        </Tabs>

        <TheFooterApp />
        {/* <RouterView
          v-slots={{
            default: ({ Component }: any) => {
              return (
                <KeepAlive>
                  <Component is={Component} />
                </KeepAlive>
              );
            },
          }}
        ></RouterView> */}
      </div>
    );
  },
});
