<template>
  <!-- 基础信息维护 -->
  <div class="title_declaration">
    <!-- 左侧菜单 -->

    <el-menu
      background-color="#e5f1fd"
      text-color="#666"
      active-text-color="#0063c7"
      unique-opened
      :default-active="menuActivePath"
      class="leftMenu"
      router
    >
      <div class="chose_btn">k</div>
      <!-- 基础信息维护 -->
      <el-submenu index="1">
        <template slot="title">
          <span>基础信息维护</span>
        </template>
        <el-menu-item index="/home/basic_staff_information/basic_staff_information_management"
          >人员管理</el-menu-item
        >
      </el-submenu>
    </el-menu>
    <!-- 内容 -->
    <div class="content">
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>{{ ownRoute.name }}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="itemRoute.meta.hasChildren">{{
            itemRoute.name
          }}</el-breadcrumb-item>
          <el-breadcrumb-item v-else>{{ itemRoute.name }}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="itemRoute.meta.childrenTitle">{{
            itemRoute.meta.childrenTitle
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 主要内容出口 -->
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
// 引入local
import local from "@/utils/local";
export default {
  data() {
    return {
      // 当前页面路由
      ownRoute: {},
      //当前选项路由
      itemRoute: {
        meta: {},
      },
      // 当前激活path
      menuActivePath: "",
    };
  },
  methods: {
    // 获取当前页面路由
    getRouters() {
      local.get("allRoutes").forEach((item) => {
        if (item.path === local.get("ownpath")) {
          console.log(item);
          this.ownRoute = item;
        }
      });
    },
    // 获取当前选项路由
    getItemRoutes() {
      if (this.ownRoute.children) {
        this.ownRoute.children.forEach((item) => {
          if (item.path === location.hash.substring(1)) {
            this.itemRoute = item;
          }
        })
      }
    },
    // 计算激活路由
    // calcActive() {
    //   if (!this.itemRoute.meta.fatherPath) return;
    //   this.menuActivePath = this.itemRoute.meta.fatherPath;
    // },
  },
  created() {
    this.getRouters();
    this.getItemRoutes();
    this.menuActivePath = this.$route.path;
    // this.calcActive();
  },

  watch: {
    "$route.path"() {
      this.getItemRoutes();
      // this.calcActive();
    },
  },
};
</script>

<style lang="less" scoped>
.title_declaration {
  flex: 1;
  display: flex;
  .el-menu {
    // display: none;
    border-radius: 10px;
    overflow: hidden;
    flex: 200px 0 0;
    border-right: none;
    .chose_btn {
      width: 10px;
      height: 50px;
      background-color: orange;
      float: left;
    }
    .el-submenu {
      /deep/.el-menu {
        .el-menu-item {
          background-color: #f9f9f9 !important;
          &.is-active,
          &.is-active.parent {
            background-color: #ddd !important;
            color: #0063c7 !important;
          }
          &:hover {
            background-color: #ddd !important;
            color: #6ab5f6 !important;
          }
        }
      }
    }
  }
  .content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    .breadcrumb {
      box-sizing: border-box;
      border-bottom: 2px solid #e5f1fd;
      flex: 58px 0 0;
      display: flex;
      color: #666;
      font-weight: bold;
      align-items: center;
      padding-left: 20px;
    }
    .main {
      width: calc( 100vw - 240px);
      flex: 1;
      padding: 20px;
    }
  }
}
</style>
