<template>
  <div class="page-breadcrumb">
    <span>当前所在位置：</span>
    <ul>
      <li v-for="(item,index) in data" :key="item.uid">
        <nuxt-link v-if="item.uri != null && item.uri !== ''" :to="item.uri">
          {{ item.title }}
        </nuxt-link>
        <span v-else>{{ item.title }}</span>
        <el-icon v-if="index < data.length - 1"><ArrowRight /></el-icon>
      </li>
    </ul>
  </div>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'
export default {
  name: 'PageBreadCrumb',
  components: { ArrowRight },
  props: {
    data: {
      required: true
    }
  }
}
</script>

<style scoped lang="scss">
.page-breadcrumb {
  background-color: #fff;
  height: 50px;
  line-height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  color: var(--color-gray);
  ul {
    display: flex;
    align-items: center;
    li {
      display: flex;
      align-items: center;
      color: var(--font-color);
      a {
        color: var(--primary-color);
      }
      .el-icon {
        margin: 0 10px;
      }
    }
  }
}
</style>
