<script setup lang="ts">
import type { RouteRecordName } from "vue-router";
const router = useRouter();
const route = useRoute();
const matchedList = computed(() => {
  const res: { title: unknown; name?: RouteRecordName }[] = [];
  route.matched.forEach((item) => {
    if (item.meta.breadcrumb) {
      res.push({
        name: item.name,
        title: item.meta.title,
      });
    }
  });
  return res;
});

function routerReplace(name?: RouteRecordName) {
  if (name === route.name) return;
  router.replace({ name: name ?? "/" });
}

const goBack = () => {
  router.back();
};
</script>

<template>
  <div class="bg-white ml-4 mr-4 px-4 rounded-6px flex items-center justify-between" style="height: 48px;">
    <el-breadcrumb separator="/" class="">
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="({ name, title }) in matchedList" :key="name" @click="routerReplace(name)">
          <span class="cursor-pointer" :class="name === route.name ? 'text-hex-303133' : 'text-hex-909399'">{{ title }}</span>
          <!-- <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> -->
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
    <el-button type="primary" @click="goBack" v-if="router.currentRoute.value.meta.back">返回</el-button>
  </div>
</template>

<!-- <script>

export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!this.isDashboard(first)) {
        matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      const toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    }
  }
}
</script> -->

<style lang="scss" scoped>
.text-hex-909399 :deep(.el-breadcrumb__separator) {
  color: #909399;
  font-weight: 300;
}

/* breadcrumb transition */
//.breadcrumb-enter-active,
//.breadcrumb-leave-active {
//  transition: all 0.5s;
//}
//
//.breadcrumb-enter,
//.breadcrumb-leave-active {
//  opacity: 0;
//  transform: translateX(20px);
//}
//
//.breadcrumb-move {
//  transition: all 0.5s;
//}

.breadcrumb-leave-active {
  position: absolute;
}
</style>
