<template>
  <div class="wrapper" id="content">
    <el-container>
      <!-- 左侧菜单 -->
      <el-aside width="200px">
        <slot name="left"></slot>
      </el-aside>
      <el-container>
        <!-- 面包屑 -->
        <el-header height="40px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <i class="fa fa-bars"></i>
              {{sysTITLE}}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{currentRoute.meta.title}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <!-- 主要内容 -->
        <el-main>
          <slot name="maincon"></slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss">
#content,
.maincon {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .el-aside {
	background-color: rgb(47, 115, 155) !important;
  }
  .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%;
  }
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import METHOD from "@/utils/methods";
@Component({
  components: {},
})
export default class Content extends Vue {
  @Getter("routers") getRouter: any;
  @Action("setSigns") setSigns: any; //提交存储的图例json

  @Watch("$route") handleRouteChange(router: any): any {
    this.inintBreadcrum(router);
  } //监听当前路由变化的时候返回数据

  @Provide() breadcrumnItems: any; //定义数据
  @Provide() sysTITLE: any = METHOD.sysTITLE;
  @Provide() currentRoute: any;
  inintBreadcrum(router: any) {
    let arr = [];
    this.currentRoute = router;
    this.sysTITLE = router.matched[0].meta.title;
  }
  //获取图例列表
  getSigns() {
    let that = this;
    (this as any).$axios
      .post(`/legendInfo/getLegendInfoComboxData`)
      .then((res: any) => {
        this.setSigns(res); //存储到vuex
      });
  }
  created() {
    this.inintBreadcrum(this.$route);
  }
}
</script>