<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()

const matchedList = computed(() => {
  const res = []
  route.matched.forEach((item) => {
    if (item.meta.breadcrumb) {
      res.push({
        title: item.meta.title,
      })
    }
  })
  return res
})

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

<template>
  <div class="flex justify-between items-center h-40px w-1200px m-auto mt-10px mb-5px">
    <div class="flex items-center text-hex-5B5B5B text-12px">
      <el-icon :size="15"><Location /></el-icon>
      当前位置：首页 > 考试阅卷 >
      <el-breadcrumb class="text-hex-5B5B5B text-12px tracking-wide" :separator-icon="ArrowRight">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item v-for="({ name, title }) in matchedList" :key="name">
            <span class="text-12px">&nbsp;{{ title }}</span>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
<!--    <div class="btn cursor-pointer" @click="linkTo">-->
<!--      返回-->
<!--    </div>-->
  </div>
</template>

<style scoped>
.btn {
  width: 90px;
  height: 36px;
  line-height: 36px;
  background: #367acf;
  border-radius: 4px;
  color: #fff;
  text-align: center;
}
</style>
