<template>
  <div class="project-bread-crumb-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="project-bread-crumb-inner">
      <!-- 默认展示 -->
      <el-breadcrumb-item class="project-bread-crumb-item">
        <span @click="$router.push('/projectCostLedger')">项目成本台账</span>
      </el-breadcrumb-item>
      <!-- 当前模块 -->
      <transition name="breadcrumb" mode="out-in">
        <el-breadcrumb-item class="project-bread-crumb-item current-bread-brumb-item" v-if="breadCrumb[module] && current">
          <span>{{breadCrumb[module].breadcrumbName}}</span>
        </el-breadcrumb-item>
      </transition>
      <!-- 下级 -->
      <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' : item.path == current}">
          <span @click.stop="item.path == current ? '' : breadClickHandle(item)">{{item.breadcrumbName}}</span>
        </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,
    module: String
  },
  watch: {
    current: {
      handler(newValue, oldValue) {
        this.init(newValue);
      }
    }
  },
  data() {
    return {
      currentBreadCurmbList: [],
      breadCrumb: {
        // 详情
        detail: {
          breadcrumbName: "详情",
          childrenBreadCrumb: [
            {
              breadcrumbName: "工程项目信息",
              path: "basicEngineeringInformation"
            },
            {
              breadcrumbName: "直接费成本",
              path: "directCost"
            },
            {
              breadcrumbName: "工料汇总",
              path: "feedSummary"
            },
            {
              breadcrumbName: "措施项目",
              path: "measureItem"
            },
            {
              breadcrumbName: "其他项目",
              path: "otherItems"
            },
            {
              breadcrumbName: "现场经费",
              path: "fieldExpenses"
            },
            {
              breadcrumbName: "成本汇总",
              path: "cost"
            },
            {
              breadcrumbName: "盈亏分析对比",
              path: "profitAndLoss"
            }
          ]
        }
        // 缺省配置
      }
    };
  },
  //可访问data属性
  created() {
    this.init(this.current);
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    init(current) {
      if (!current) return;
      // 取出当前模块
      const _temp = cloneDeep(this.breadCrumb[this.module]);
      if (!_temp) return;
      this.currentBreadCurmbList = this.createBreadCrumb(current, _temp);
    },
    createBreadCrumb(current, data) {
      let result = findAncestors(data, current, "path", "childrenBreadCrumb");
      if (result) {
        result = result.filter(item => item.path);
        result = result.map(item => {
          const _temp = {
            breadcrumbName: item.breadcrumbName,
          };
          if (item.path) _temp["path"] = item.path;
          return _temp;
        });
        return result;
      }
      ;
    },
    breadClickHandle(item) {
      console.log(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>
