import { Button, Sticky, Tab, Tabs } from "vant";
import { defineComponent, KeepAlive, ref } from "vue";
import { RouterView, useRoute } from "vue-router";
import TheHeader from "../../components/TheHeader";
import styles from "./index.module.less";

export default defineComponent({
  name: "indexApp",
  setup() {
    const route = useRoute();
    const active = ref(route.name as string);
    return () => (
      <div class={styles.layout}>
        <div class={styles.sticky}>
          <TheHeader />
          <Tabs
            class={styles.tabs}
            active={active.value}
            color="var(--van-primary-color)"
            line-width="26px"
          >
            <Tab to="/" title="首页" name="home"></Tab>
            <Tab to="/music" title="谱库" name="music"></Tab>
            <Tab to="/video" title="视频" name="video"></Tab>
            <Tab to="/down" title="下载" name="down"></Tab>
          </Tabs>
        </div>
        <RouterView
          v-slots={{
            default: ({ Component }: any) => {
              return (
                <KeepAlive>
                  <Component is={Component} />
                </KeepAlive>
              );
            },
          }}
        ></RouterView>
      </div>
    );
  },
});