<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const $route = useRoute();
const $router = useRouter();

const RoleType = computed(() => {
  return localStorage.getItem('RoleType') || ''
})

function handleClickBread(item){
  if(item.meta.pathFrom=='dayorweek'){
    $router.go(-1)
  }else{
    $router.push({path:'/'+item.meta.pathFrom})
  }
}

function routeClick(item) {
  if($route.path == item.path) {
        window.location.reload();
  }else {
    $router.push({path:item.path})
  }
}

</script>
<template>
  <el-breadcrumb separator="/" class="breadcrumb-container">
    <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
      <span
        v-if="item.meta.pathFrom"
        @click.stop="handleClickBread(item)"
        style="cursor: pointer; color: #4099ef;"
      >
        <template v-if="item.meta.pathFrom == 'pickList'">
          {{ RoleType == "ficc" ? "权益客户" : "ficc客户" }}
        </template>
        <template v-if="item.meta.pathFrom == '/regionCustomerDetail'">
          {{
            $route.query.title ? $route.query.title.split("/")[1] || "" : ""
          }}客户列表
        </template>
        <template v-else>
          {{ item.meta.pathName }}
        </template>
      </span>
      <span
        v-if="item.meta.pathFrom"
        style="margin: 0 9px; font-weight: 700; color: #c0c4cc; fontsize: 16px"
        >/</span
      >
      <span
        v-if="!item.children.length"
        style="cursor: pointer; color: #4099ef;"
        @click.stop="routeClick(item)"
      >
        <template v-if="item.path == '/pickList'">
          {{ RoleType == "ficc" ? "权益客户" : "ficc客户" }}
        </template>
        <template v-if="item.path == '/regionCustomerDetail'">
          {{
            $route.query.title ? $route.query.title.split("/")[1] || "" : ""
          }}客户列表
        </template>
        <template v-else>
          {{ item.meta.title }}
        </template>
      </span>
      <span v-else>{{ item.meta.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>
<style scoped lang="scss">
.el-breadcrumb {
  :deep(.el-breadcrumb__item) {
    font-size: 16px;
  }
}
</style>
