<template>
  <div class="breadcrumb">
    <i
      class="breadcrumb-collapse-icon"
      :class="themeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
      @click="handleThemeConfigChange"
    />
    <el-breadcrumb>
      <transition-group name="breadcrumb" mode="out-in">
        <el-breadcrumb-item v-for="(v, k) in breadcrumbs" :key="v.path">
          <span v-if="k === breadcrumbs.length - 1" class="breadcrumb-text">
            <i
              :class="v.meta?.icon"
              class="breadcrumb-iconfont"
              v-if="v.meta?.icon && themeConfig.isBreadcrumbIcon"
            />
            {{ v.meta?.title }}
          </span>
          <a v-else @click="handleBreadcrumbClick(v)">
            <i
              :class="v.meta?.icon"
              class="breadcrumb-iconfont"
              v-if="v.meta?.icon && themeConfig.isBreadcrumbIcon"
            />
            {{ v.meta?.title }}
          </a>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, onMounted } from "vue";
import find from "lodash/find";
import { RouteRecordRaw, onBeforeRouteUpdate } from "vue-router";
import store from "@/hooks/useStore";
import { useRouter, useRoute } from "vue-router";
import { log } from "console";

type RecordRaw = RouteRecordRaw & { pid: string | null };

export default defineComponent({
  name: "Breadcrumb",

  setup() {
    const router = useRouter();
    const route = useRoute();
    const breadcrumbs = ref<RecordRaw[]>([]);

    const themeConfig = computed(() => {
      return store.state.themeConfig;
    });
    const flatRouteList = computed(() => {
      return store.state.routeList.flatRouteList as unknown as RecordRaw[];
    });
    /**
     * 点击切换折叠菜单
     */
    const handleThemeConfigChange = () => {
      store.state.themeConfig.isCollapse = !themeConfig.value.isCollapse;
    };

    const handleBreadcrumbClick = (val: any) => {
      const { redirect, path } = val;
      if (redirect) router.push(redirect);
      else router.push(path);
    };

    const getBreadcrumbList = (path: string, flatRouteList: RecordRaw[]) => {
      const breadcrumbList = [];
      const routeRacord = find(flatRouteList, { path });
      if (routeRacord) {
        breadcrumbList.push(routeRacord);
        const recursion = (id: string | null) => {
          if (id) {
            const record = <RecordRaw>find(flatRouteList, { id });
            breadcrumbList.unshift(record);
            const { pid } = record;
            if (pid) {
              recursion(pid);
            } else {
              record.meta!.title = "首页";
            }
          }
        };
        recursion(routeRacord.pid);
      }
      return breadcrumbList;
    };

    onBeforeRouteUpdate((to) => {
      console.log(to.path);
      console.log(flatRouteList.value);
      breadcrumbs.value = getBreadcrumbList(to.path, flatRouteList.value);
    });

    onMounted(() => {
      breadcrumbs.value = getBreadcrumbList(route.path, flatRouteList.value);
    });

    return {
      flatRouteList,
      themeConfig,
      breadcrumbs,
      handleThemeConfigChange,
      handleBreadcrumbClick,
    };
  },
});
</script>

<style lang="scss" scoped>
.breadcrumb {
  display: flex;
  align-items: center;
  .breadcrumb-collapse-icon {
    margin-right: 15px;
    color: var(--bg-topBarColor);
    cursor: pointer;
  }
  .breadcrumb-text {
    opacity: 0.7;
    color: var(--bg-topBarColor);
  }
  .breadcrumb-iconfont {
    font-size: 14px;
    color: var(--bg-topBarColor);
  }
  ::v-deep(.el-breadcrumb__separator) {
    opacity: 0.7;
    color: var(--bg-topBarColor);
  }
  ::v-deep(.el-breadcrumb__inner) {
    color: var(--bg-topBarColor);
  }
}
</style>
