<script setup lang="ts">
import { ref } from 'vue'
import NavItem from './modules/NavItem.vue'
import { xfclIcon, spjkIcon, szxfsIcon, trsyIcon,wxxfzIcon, xfjgIcon } from '@/utils/icons'
const navItems = [
  {
    text: "消防机构",
    icon: xfjgIcon
  },
  {
    text: "市政消防栓",
    icon: szxfsIcon
  },
  {
    text: "天然水域",
    icon: trsyIcon
  },
  {
    text: "微型消防站",
    icon: wxxfzIcon
  },
  {
    text: "消防车辆",
    icon: xfclIcon
  },
  {
    text: "视频监控",
    icon: spjkIcon
  }
]

type EmitHandler = {
  (e: 'clickItem', index: number, text: string) : void
}

const emits = defineEmits<EmitHandler>()


const activeItem = ref(0)

function onClickItemHandler(index: number, item: any) {
  activeItem.value = index
  emits('clickItem',index,item.text)
}

</script>

<template>
  <div class="nav-panel">
    <nav-item v-for="(item,index) in navItems" 
    :active="index === activeItem"
    :key="`${item.text}-${index}`" 
    :text="item.text" 
    :icon="item.icon"
    @click="() => onClickItemHandler(index, item)"
    />
  </div>
</template>

<style scoped lang="less">
.nav-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,-20%);
  width: 40.7vw;
  height:  9.4vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
