<script setup lang="ts">
import navBg from '@/assets/images/nav.png'
import navActiveBg from '@/assets/images/nav-active.png'
import { computed } from 'vue';

interface NavItemProps {
  active: boolean,
  text: string,
  icon: Icon
}

const props =withDefaults(defineProps<NavItemProps>(), {
  active: false
})

const navItemBg = computed(() => props.active ? navActiveBg : navBg)

</script>

<template>
  <div class="nav-item" :style="{ backgroundImage: `url(${navItemBg})` }">
    <img :src="props.icon.src" :style="{ width:props.icon.width, height: props.icon.height }" alt="导航">
    <span>{{props.text}}</span>
  </div>
</template>

<style scoped lang="less">
@import url("@/assets/css/common.less");
.nav-item {
  width: 5.3vw;
  height:  9.4vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  flex-direction: column;
  .flex(flex-end, center);
  color: #fff;
  span {
    display: inline-block;
    margin-top: .8vh;
    margin-bottom: 1vh;
    font-size: .7vw;
  }
  cursor: pointer;
}
</style>