<template>
  <div class="breadcrump-box transition duration-300 ease-in-out py-3 ">
    <div class="card-body">
      <nav aria-label="breadcrumb" class="flex flex-wrap">
        <ul v-for="(itm,i) in arrBcPath" :key="`bread-${i}`" class="breadcrumb">
          <li v-if="i == 0 && itm[0] == '#'" class="breadcrumb-item flex-1 cursor-pointer" @click="bookselec(itm[i])">
            <span class="shield">
              <span class="icon">
                <svg
                  v-if="itm === '#fa-cloud'"
                  aria-hidden="true"
                  focusable="false"
                  data-prefix="fas"
                  data-icon="cloud"
                  class="svg-inline--fa fa-cloud fa-w-16 dark:text-white text-blue-400"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 640 512"
                ><path fill="currentColor" d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg>
                <svg
                  v-if="itm === '#fa-book'"
                  aria-hidden="true"
                  focusable="false"
                  data-prefix="fad"
                  data-icon="book-reader"
                  class="svg-inline--fa fa-book-reader fa-w-16 dark:text-white"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 512 512"
                ><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M256 192a96 96 0 1 1 96-96 96 96 0 0 1-96 96z" opacity="0.4" /><path class="fa-primary" fill="currentColor" d="M233.59 241.1c-59.33-36.32-155.43-46.3-203.79-49C13.55 191.13 0 203.51 0 219.14v222.8c0 14.33 11.59 26.28 26.49 27.06 43.66 2.29 132 10.68 193 41.43 9.37 4.72 20.48-1.71 20.48-11.87v-246a13.31 13.31 0 0 0-6.38-11.46zm248.61-49c-48.35 2.74-144.46 12.73-203.78 49a13.56 13.56 0 0 0-6.42 11.63v245.79c0 10.19 11.14 16.63 20.54 11.9 61-30.72 149.32-39.11 193-41.4C500.42 468.24 512 456.29 512 442V219.14c0-15.63-13.55-28.01-29.8-27.09z" /></g></svg>
                <span v-else class="iconify" :data-icon="itm.replace('#','').replace('fa-','fa:')" />
              </span>
            </span>
            <span class="slash text-xs">/</span>
          </li>
          <li v-else-if="arrBcPath[i+1]" class="breadcrumb-item flex-1 cursor-pointer">
            <a href="#{itm}" class="mx-1 leading-tight text-xs" @click="(e) => { e.preventDefault(); $router.push(`/${itm}`)}">
              {{ translate(itm) }}</a>
            <span class="slash text-xs">/</span>
          </li>
          <li v-else class="breadcrumb-item active flex-1 mx-1 ml-1 leading-tight text-xs cursor-pointer" aria-current="page">
            <span style="line-height: 2.2em" @click="bookselec(itm)"> {{ translate(itm) }} </span>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const props = defineProps({
  bcPath: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['onBookSelec'])
// const currAppTab = ref('')
const arrBcPath = computed(() => props.bcPath.split('/'))
const bookselec = (book: any) => {
  emit('onBookSelec', book)
}
const { t, locale } = useI18n()
const translate = (txt: any) => {
  const tr_txt = t(`bc.${txt}`)
  return tr_txt === `bc.${txt}` ? txt : tr_txt
}
// $: arrBcPath=bcPath.split("/");
// const bookselec = (e) => {
//  dispatch("bookselec","main");
//   // console.log(`mode: ${mode} id: ${id} target: ${target}`);
//   const parent=".tabs-menu";
//   document.querySelectorAll(`${parent} span`).forEach(it => it.classList.remove('active') )
//  // e.target.parentElement.childNodes.forEach(it => it.classList.remove('active') )
//  // e.target.classList.add('active')
//   document.querySelectorAll(`${parent} span`).forEach(it => it.classList.remove('active') )
//   document.querySelectorAll(`${parent} span.itm-${id}`).forEach(it => it.classList.add('active') )
//   dispatch("choosetab",id);
//   //const tab=document.querySelector(`#${currTab}`);
//   //if (tab) { }
// }
</script>
<style scoped>
.breadcrumb-item .shield {
  padding: 0em 0.5em;
/* margin-top: -0.4em; */
}
.breadcrumb-item .icon {
  padding: 0em;
  margin: 0;
}
.breadcrumb-item .icon svg {
  width: 100%;
}
.breadcrumb .breadcrumb-item {
  position: relative;
}
.breadcrumb-item a:hover {
  padding-bottom: 0.2em;
  border-bottom: 1px solid rgb(154, 154, 154);
  border-bottom-width: thin;
  border-bottom-style: dashed;
}
/*
.breadcrumb .breadcrumb-item:first-child {
  margin-left: 0 !important;
}
*/
.breadcrumb .breadcrumb-item:not(:last-child):after {
  content: '/';
  color: rgb(154, 154, 154);
}
</style>