<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
        <div class="is-link">
          <span>{{ item.meta.title }}</span>
        </div>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/modules/user'

const HOME_URL = import.meta.env.VITE_HOME_URL

const route = useRoute()
const userStore = useUserStore()

const breadcrumbList = computed(() => {
  let breadcrumbData = userStore.getBreadcrumbs[route.matched[route.matched.length - 1].path] ?? []
  // 🙅‍♀️不需要首页面包屑可删除以下判断
  if (breadcrumbData[0].path !== HOME_URL) {
    breadcrumbData = [
      { path: HOME_URL, meta: { icon: 'dashboard', title: '首页' } },
      ...breadcrumbData
    ]
  }
  return breadcrumbData
})
</script>

<style scoped lang="scss">
.is-link {
  font-size: 16px;
  color: var(--el-header-text-color);
}
</style>
