<template>
  <div class="flex flex-col items-center cursor-pointer" @click="navigateToRoute">
    <div
      class="rounded-[20px] flex items-center justify-center w-[45px] h-[45px]"
      :class="[isActive ? 'active' : '']"
    >
      <img :src="props.info?.img" class="w-full h-full" />
    </div>
    <div
      class="text-center text-[12px] w-[75px]"
      :class="[isActive ? 'font-semibold' : '']"
    >
      {{ t(props.info.name) }}
    </div>
  </div>
</template>
<script setup>
import { watch, computed } from 'vue'
import router from '../../../router'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'

const { t, locale } = useI18n()
const props = defineProps({
  info: { type: Object, required: true },
})
const route = useRoute()

const isActive = computed(() => {
  //根据第一个/后面的字符串判断是否是当前路由
  return route.path.split('/')[2] === props.info.path.split('/')[2]
})

const navigateToRoute = () => {
  router.push(props.info.path)
}

</script>
<style scoped>
.active {
  border-radius: 19.296px;
  background: #f67f20;
  box-shadow: 0px 12.864px 38.593px 0px rgba(234, 124, 105, 0.32);
}
</style>    