<template>
  <div class="customhead">
    <!-- 面包屑部分。数组第一项固定为首页，可以点击跳转，其他面包屑，不允许进行跳转 -->
    <a-breadcrumb style="margin-left: 10px;" :separator="''">
      <a-breadcrumb-item v-for="(item, index) in breadcrumb.arr" v-show="item.path !== '/'"
        :class="item.path === activeRoute.path ? 'RouteActive' : ''" :key="index" style="margin: 0 1px;"
        @click="handleClickItem(item)">
        <router-link :to="item.path">
          <home-outlined v-if="item.path === '/main'" />
          {{ item.breadcrumbName }}
          <CloseOutlined style="font-size: 10px;" @click="removeBreadcrumbItme(index)" v-if="item.path !== '/main'" />
        </router-link>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
  <router-view />
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { reactive, watch, ref } from 'vue'
import { message } from 'ant-design-vue'
// 面包屑导航参数
// 获取到路由对象
const route = useRoute() //这是当前路由
const routes = useRouter() //这是当前路由
const breadcrumb = reactive({ arr: [{ path: '/main', breadcrumbName: '主页' }] })
const activeRoute = reactive({ path: {} })

const titleFlage = ref(false as any)
const closeFlag = ref(false as any)
watch(route, (newValue) => {
  console.log('点击了这个2222');
  activeRoute.path = newValue.path
  if (newValue.meta.title === '商家中心' || newValue.meta.title === '资金中心' || newValue.meta.title === '交易中心' || newValue.meta.title === '产品中心' || newValue.meta.title === '数据中心' || newValue.meta.title === '账号中心') {
    return false
  }
  if (breadcrumb.arr.length > 10 && !titleFlage) {
    message.error('当前标签数量过多,关闭标签数量可减少系统性能消耗。')
    titleFlage.value = true
  }
  breadcrumb.arr.push({ path: newValue.path, breadcrumbName: newValue.meta.title as any })
  breadcrumb.arr = fn1(breadcrumb.arr)

  if (breadcrumb.arr.length > 15) {
    breadcrumb.arr.splice(1, 1)
  }
})

const removeBreadcrumbItme = (index: any) => {
  breadcrumb.arr.splice(index, 1)
}

const handleClickItem = (item: any) => {
  console.log(item);
  activeRoute.path = item.path
}

const fn1 = (tempArr: any) => {
  for (let i = 0; i < tempArr.length; i++) {
    for (let j = i + 1; j < tempArr.length; j++) {
      if (tempArr[i].path == tempArr[j].path) {
        tempArr.splice(j, 1);
        j--;
      };
    };
  };
  return tempArr;
};

</script>

<style lang="scss">
.customhead {
  display: flex;
  height: 50px;
  align-items: center;
  overflow-y: auto;
  width: 100%;
}

.ant-breadcrumb {
  .RouteActive {
    a {
      color: #fff !important;
    }
  }
}

// .customhead{
//   span:last-child a {
//   color: rgba(0, 0, 0, .75) !important;
// }
// }


.ant-breadcrumb-link {
  border: 1px solid #d9dce4;
  padding: 5px;
  border-bottom: 0;
  box-sizing: border-box;
  background: #f3f3f5;
}

.RouteActive {
  .ant-breadcrumb-link {
    padding:6px 5px;
    background: #1965ff;
  }
}
</style>
