<template>
  <div class="h-full">
    <router-view></router-view>
    <van-tabbar v-model="active" @change="onChange" active-color="#db664d" inactive-color="#b3b3b3">
      <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 caiji from "~/assets/caiji.png";
import caiji_active from "~/assets/caiji_active.png";
import wode from "~/assets/wode.png";
import wode_active from "~/assets/wode_active.png";

const router = useRouter()

let active = $ref("");
const tabData = $ref([
  {
    title: "采集",
    name: "caiji",
    icon: caiji,
    icon_active: caiji_active,
    url: "/home/caiji"
  },
  {
    title: "我的",
    name: "wode",
    icon: wode,
    icon_active: wode_active,
    url: "/home/wode"
  }
])

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;
}

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

