<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import yl from '@/assets/img/yl.png';

const router = useRouter();
const route = useRoute();

const navigation = ref([
  {
    title: '首页',
    link: {
      name: 'home',
      path: '/home'
    },
    // icon: '/tabbar/home.png',
    icon: 'home-o',
    inactive: ''
  },
  {
    title: '伊调研',
    // link: {
    //   name: 'home',
    //   path: '/home'
    // },
    icon: yl
  },
  {
    title: '我的',
    link: {
      name: '',
      path: '/survey'
    },
    icon: 'friends-o'
    // icon: '/tabbar/mine.png'
  }
]);

// 当前的 nav
const currentNav = computed(() => {
  // 第一种方式
  const nav = navigation.value.find((item) => item?.link?.path === route.fullPath);
  // 第二种方式
  // const nav = navigation.value.find((item) => item?.link?.path === window.location.pathname);

  return nav;
});
const activeTab = ref(currentNav.value?.title);

/**
 * Handle changing of navigation
 * @param {object} nav - the navigation item selected
 */
function handleChangeNav(title: string) {
  const nav = navigation.value.find((item) => item.title === title);
  const params: { [key: string]: string } = {};
  //  如果有 name 表示，优先取 name 参数
  nav && nav.link?.name.length !== 0
    ? (params.name = nav?.link?.name as string)
    : (params.path = nav?.link?.path as string);
  router.push(params);
}

watch(activeTab, (value) => {
  handleChangeNav(value as string);
});
</script>

<template>
  <van-tabbar v-model="activeTab" class="navigation">
    <template v-for="(item, index) in navigation" :key="item.title">
      <span
        v-if="index === 1"
        style="
          display: flex;
          flex-flow: column nowrap;
          justify-content: center;
          align-items: center;
        "
      >
        <img :src="item.icon" alt="" style="width: 30px; height: 30px" />
        {{ item.title }}
      </span>
      <van-tabbar-item v-else :icon="item.icon" :name="item.title">
        {{ item.title }}
      </van-tabbar-item>
    </template>
  </van-tabbar>
</template>

<style scoped lang="scss">
.navigation {
  padding: 3px 0;
  // width: 100vw;
  // background-color: white;
  // display: flex;
  // flex-flow: row;
  // justify-content: space-around;
  // position: fixed;
  // bottom: 0px;
  // z-index: 10;
}

.navigation-item {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
</style>
