<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useBreadCrumb } from '@/stores/modules/breadCrumb'

const router = useRouter()
const breadCrumb = useBreadCrumb()

const handleGoBack = () => {
  const routeData = breadCrumb.getUpperRoute()
  router.push({
    name: routeData.label,
    query: routeData.query
  })
}
const jumpLink = (label: string, query: any) => {
  label &&
    router.push({
      name: label,
      query: query
    })
}
</script>

<template>
  <div class="v-breadcrumd" v-if="breadCrumb.routeList.length > 1">
    <span class="font_family icon-icon_back_b" @click="handleGoBack"></span>
    <template v-for="(routeItem, index) in breadCrumb.routeList" :key="routeItem.label">
      <template v-if="index + 1 !== breadCrumb.routeList.length">
        <span @click="jumpLink(routeItem.label, routeItem.query)" class="previous-route">{{
          routeItem.label
        }}</span>
        <span class="interval">|</span>
      </template>
      <span v-else style="font-weight: 700">{{ routeItem.label }}</span>
    </template>
  </div>
  <div v-else></div>
</template>

<style lang="scss" scoped>
.v-breadcrumd {
  display: flex;
  align-items: center;
  gap: 4px;
  .icon-icon_back_b {
    font-size: 18px;
    cursor: pointer;
  }
  .interval {
    margin: 0 2px;
    color: var(--color-neutral-3);
    transform: rotate(20deg);
  }
  .previous-route {
    color: var(--color-neutral-3);
    cursor: pointer;
    &:hover {
      font-weight: 500;
      color: var(--color-theme);
    }
  }
}
</style>
