<template>
  <div class="wrapper" id="content">
    <el-container>
      <!-- 左侧菜单 -->
      <el-aside :class="[{'zk' : !iszk},{'notzk' : iszk}]">
        <slot name="left"></slot>
      </el-aside>
      <el-container>
        <!-- 面包屑 -->
        <el-header height="40px">
          <el-breadcrumb separator="/">
            <span class="fl flex" @click="toggleNavWi()">
              <i class="el-icon-menu"></i>
            </span>
            <el-breadcrumb-item>
              <i class="fa fa-bars"></i> 安全生产风险监测预警系统
            </el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumnItems" :key="index">{{item.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <!-- 主要内容 -->
        <el-main>
          <slot name="maincon"></slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
@Component({
  components: {},
})
export default class Content extends Vue {
  @Provide() breadcrumnItems: any = [];
  @Provide() iszk: boolean = true;
  @Watch("$route") handleRouteChange(router: any): any {
    this.inintBreadcrum(router);
  } //监听当前路由变化的时候返回数据
  inintBreadcrum(router: any) {
    let arr = [];
    if (router.matched) {
      let thatAlink = router.matched[1];
      if (thatAlink.meta.title == undefined) {
        arr.push({
          name: thatAlink.parent.meta.title,
          path: thatAlink.parent.path,
        });
      } else {
        arr.push({
          name: thatAlink.parent.meta.title,
          path: thatAlink.parent.path,
        });
        arr.push({ name: thatAlink.meta.title, path: thatAlink.path });
      }
    }
    this.breadcrumnItems = arr;
  }
  toggleNavWi() {
    this.iszk = !this.iszk;
  }
  created() {
    this.inintBreadcrum(this.$route);
  }
}
</script>
<style lang="scss" scoped>
#content,
.maincon {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el-aside {
  background: #414d58;
}
.el-header {
  background: #ffffff;
  line-height: 40px;
}
.el-header > div {
  height: 100%;
  line-height: 40px;
}
.el-main {
  background: #f3f3f3;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px;
}
.el-container {
  height: 100%;
}
.el-menu {
  border: none;
}
.zk {
  width: 215px !important;
}
.notzk {
  width: 0px !important;
}
</style>
<style lang="scss">
span.flex {
  cursor: pointer;
  padding-right: 5px;
  .el-icon-menu {
    color: #0aa288;
    font-size: 20px;
  }
}
</style>
