<template>
  <div class="bg-secondaryBlue">
    <div class="flex flex-row w-8/12 mx-auto">
      <div
        v-for="nav in navs"
        :key="nav.id"
        class="w-1/6 px-2 flex flex-row items-center justify-center py-3 cursor-pointer border-b-2 border-transparent hover:border-blue-300"
        :class="currentNav == nav.id ? ' border-blue-300' : ''"
        @click="handleNavClick($event, nav.id)"
      >
        <svg-icon :iconClass="nav.icon" class="w-6 h-6 text-left mr-3" />
        <div class="text-gray-800 text-sm font-medium">{{ nav.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { computed, ref, watch } from 'vue';

const navs = [
  {
    id: 1,
    title: '食品安全',
    icon: 'shipin'
  },
  {
    id: 2,
    title: '医疗溯源',
    icon: 'yiliao'
  },
  {
    id: 3,
    title: '公益慈善',
    icon: 'gongyi'
  },
  {
    id: 4,
    title: '远程团队',
    icon: 'yuancheng'
  },
  {
    id: 5,
    title: '电子档案',
    icon: 'dangan'
  },
  {
    id: 6,
    title: '电子合同',
    icon: 'hetong'
  },
]

enum NAV_EVENT {
  NAV0 = 1,
  NAV1,
  NAV2,
  NAV3,
  NAV4,
  NAV5
}

const route = useRoute()
let currentNav = computed(() => {
  let routePath = '/solutions'
  const path = route.path
  let activeNav = 0
  switch (path) {
    case routePath + '/foodSafety':
      activeNav = 1
      break;
    case routePath + '/healthProvenance':
      activeNav = 2
      break;
    case routePath + '/publicWelfare':
      activeNav = 3
      break;
    case routePath + '/team':
      activeNav = 4
      break;
    case routePath + '/digitalDocument':
      activeNav = 5
      break;
    case routePath + '/digitalContract':
      activeNav = 6
      break;
  }
  return activeNav
})

const router = useRouter()

const handleNavClick = (e: Event, type: NAV_EVENT) => {
  let routePath = '/solutions'
  switch (type) {
    case NAV_EVENT.NAV0:
      routePath = routePath + '/foodSafety'
      break;
    case NAV_EVENT.NAV1:
      routePath = routePath + '/healthProvenance'
      break;
    case NAV_EVENT.NAV2:
      routePath = routePath + '/publicWelfare'
      break;
    case NAV_EVENT.NAV3:
      routePath = routePath + '/team'
      break;
    case NAV_EVENT.NAV4:
      routePath = routePath + '/digitalDocument'
      break;
    case NAV_EVENT.NAV5:
      routePath = routePath + '/digitalContract'
      break;
  }
  router.push(routePath)
}
</script>