<template>
  <div class="layout">
    <yw-header @updateAsideMenu="updateAsideMenu"></yw-header>
    <aside-menu :menu="menu"></aside-menu>
    <div class="main">
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="breadList.length">
        <el-breadcrumb-item v-for="item in breadList" :key="item" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath" @updateBread="updateBread"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath" @updateBread="updateBread"></router-view>
    </div>
  </div>
</template>

<script>
import YwHeader from './yw-header.vue';
import AsideMenu from './aside-menu.vue';
export default {
  name: 'layout',
  components: { YwHeader, AsideMenu },
  data() {
    return {
      menu: [],
      breadList: []
    }
  },
  watch: {
    '$route.path'() {
      this.breadList = [];
    }
  },
  methods: {
    updateAsideMenu(menu) {
      this.menu = menu || [];
    },
    updateBread(val) {
      this.breadList = val || [];
    }
  }
}
</script>

<style lang="less" scoped>
.layout {
  padding: 84px 20px 20px 240px;
  min-width: 1400px;
  height: 100vh;
  overflow: hidden;
}
.main {
  height: 100%;
  background: #fff;
  overflow-y: scroll;
}
.el-breadcrumb {
  width: 100%;
  padding: 17px 20px 18px;
  background-color: #fff;
  border-bottom: 1px solid @gray-separator;
}
/deep/.el-breadcrumb__inner {
  a:hover, &.is-link:hover {
    color: @blue;
  }
}
</style>
