<template>
  <div class="h-screen">
    <router-view></router-view>
    <van-tabbar v-model="active" @change="onChange" active-color="#154a9a" inactive-color="#000000">
      <van-tabbar-item v-for="(item, index) in tabData" :key="index" :name="item.name">
        <span>{{item.title}}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon_active : item.icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import course from "~/assets/course.png";
import course_active from "~/assets/course_active.png";
import personal from "~/assets/personal.png";
import personal_active from "~/assets/personal_active.png";

const router = useRouter()

let active = $ref("");
const tabData = $ref([
  {
    title: "课程",
    name: "course",
    icon: course,
    icon_active: course_active,
    url: "/main/course/qjkc"
  },
  {
    title: "我的",
    name: "personal",
    icon: personal,
    icon_active: personal_active,
    url: "/main/personal"
  }
])

// init()
function init() {
  let path = router.currentRoute.value.path;
  let index = tabData.findIndex(item => path.includes(item.url));
  if (index !== -1)
    active = tabData[index].name;
  else
    active = tabData[0].name;
}

watch(
  () => router.currentRoute.value,
  (val) => {
    init()
  },
  {
    immediate: true
  }
)

function onChange(name) {
  let index = tabData.findIndex(item => item.name === name);
  let url = tabData[index].url;
  router.push({
    path: url
  })
}
</script>

