<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.path);
  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">
    <div class="nav-content">
      <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 :icon="item.icon" :name="item.title">
          {{ item.title }}
        </van-tabbar-item>
      </template>
    </div>
  </van-tabbar>
</template>

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

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