<template>
  <div :class="['breadcrumb-box mask-image', !globalStore.breadcrumbIcon && 'no-icon']">
    <el-breadcrumb :separator-icon="ArrowRight">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
          <div
            class="el-breadcrumb__inner is-link"
            :class="{ 'item-no-icon': !item.meta.icon }"
            @click="onBreadcrumbClick(item, index)"
          >
            <el-icon v-if="item.meta.icon && globalStore.breadcrumbIcon" class="breadcrumb-icon">
              <component :is="item.meta.icon" />
            </el-icon>
            <span class="breadcrumb-title">{{ item.meta.title }}</span>
          </div>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script setup>
  import { computed } from 'vue';
  import { HOME_URL } from '@/config';
  import { useRoute, useRouter } from 'vue-router';
  import { ArrowRight } from '@element-plus/icons-vue';
  import { useAuthStore } from '@/stores/modules/auth';
  import { useGlobalStore } from '@/stores/modules/global';

  const route = useRoute();
  const router = useRouter();
  const authStore = useAuthStore();
  const globalStore = useGlobalStore();

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

  // Click Breadcrumb
  const onBreadcrumbClick = (item, index) => {
    if (index !== breadcrumbList.value.length - 1) router.push(item.path);
  };
</script>

<style scoped lang="scss">
  .breadcrumb-box {
    display: flex;
    align-items: center;
    overflow: hidden;
    .el-breadcrumb {
      white-space: nowrap;
      .el-breadcrumb__item {
        position: relative;
        display: inline-block;
        float: none;
        .item-no-icon {
          transform: translateY(-3px);
        }
        .el-breadcrumb__inner {
          display: inline-flex;
          &.is-link {
            color: var(--el-header-text-color);
            &:hover {
              color: var(--el-color-primary);
            }
          }
          .breadcrumb-icon {
            margin-top: 1px;
            margin-right: 6px;
            font-size: 16px;
          }
          .breadcrumb-title {
            margin-top: 2px;
          }
        }
        &:last-child .el-breadcrumb__inner,
        &:last-child .el-breadcrumb__inner:hover {
          color: var(--el-header-text-color-regular);
        }
        :deep(.el-breadcrumb__separator) {
          transform: translateY(-1px);
        }
      }
    }
  }
  .no-icon {
    .el-breadcrumb {
      .el-breadcrumb__item {
        top: -2px;
        :deep(.el-breadcrumb__separator) {
          top: 4px;
        }
        .item-no-icon {
          transform: translateY(0);
        }
      }
    }
  }
</style>
