<template>
  <div class="project-bread-crumb-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="project-bread-crumb-inner">
      <transition-group name="breadcrumb" tag="div" v-if="currentBreadCurmbList.length">
        <el-breadcrumb-item class="project-bread-crumb-item" v-for="(item,index) of currentBreadCurmbList" :key="item.path"
          :class="{'current-bread-brumb-item' : useTrigger(item)}">
          <slot :name="item.path" :data="item">
            <span @click.stop="useTrigger(item) ? '' : breadClickHandle(item)">{{item.breadcrumbName}}</span>
          </slot>
        </el-breadcrumb-item>
      </transition-group>
    </el-breadcrumb>
  </div>
</template>
<script>
import { cloneDeep } from "lodash-es";
import { findAncestors } from "@/utils";
export default {
  name: "projectBreadCrumb",
  props: {
    current: String,
    breadCrumbTree: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    current: {
      handler(newValue, oldValue) {
        this.init(newValue);
      }
    },
    breadCrumbTree: {
      handler(newValue) {
        this.comBreadCrumbTree = newValue;
        this.init(this.current);
      },
      deep: true
    }
  },
  data() {
    return {
      currentBreadCurmbList: [],
      comBreadCrumbTree: this.breadCrumbTree
    };
  },
  //可访问data属性
  created() {
    this.init(this.current);
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    init(current) {
      if (this?.comBreadCrumbTree?.length) {
        const _temp = cloneDeep(this.comBreadCrumbTree);
        // 根节点path 为root
        _temp[0].path = "root";
        this.currentBreadCurmbList = current ? this.createBreadCrumb(current, _temp) : this.createBreadCrumb("root", _temp);
      }
    },
    createBreadCrumb(current, data) {
      let result = findAncestors(data[0], current, "path", "childrenBreadCrumb");
      if (result) {
        result = result.map(item => {
          const _temp = {
            breadcrumbName: item.breadcrumbName,
            triggerHandle: item.triggerHandle === false ? false : true
          };
          if (item.path) _temp["path"] = item.path;
          return _temp;
        });
        return result;
      }
      return [];
    },
    useTrigger(item) {
      return item.path == this.current || item.triggerHandle === false;
    },
    breadClickHandle(item) {
      this.$emit("breadCrumbTrigger", item);
    }
  },
}
</script>
<style lang="scss" scoped>
.project-bread-crumb-container {
  ::v-deep .project-bread-crumb-inner {
    .project-bread-crumb-item {
      font-size: 14px;
      font-weight: 350;
      height: 24px;
      line-height: 24px;

      .el-breadcrumb__inner {
        color: rgba(35, 35, 35, 0.4);
        cursor: pointer;
        &:hover {
          color: #0081ff;
        }
      }

      .el-breadcrumb__separator {
        color: rgba(35, 35, 35, 0.4);
        font-size: 12px;
        margin: 0px 4px;
      }

      &.current-bread-brumb-item {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
        .el-breadcrumb__inner {
          color: #232323;
          cursor: unset;
          &:hover {
            color: inherit;
          }
        }
      }
    }
  }
}
</style>
