<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-10-30 11:21:59
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-18 11:18:32
-->
<template>
  <div class="layout">
    <yw-header @updateAsideMenu="updateAsideMenu"></yw-header>
    <aside-menu :menu="menu" :active-sel-tab="activeSelTab" @resetSelTab="resetSelTab"></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"  @showTab="showTab"></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: [],
      activeSelTab: ''
    };
  },
  methods: {
    updateAsideMenu(menu) {
      this.menu = menu || [];
    },
    updateBread(val) {
      this.breadList = val || [];
    },
    /**
     * @description: 各路由返回 menuUrl
     * @param {String} menuUrl
     * @author: 无尘
     */
    showTab(menuUrl) {
      const that = this;
      that.activeSelTab = menuUrl;
    },
    /**
     * @description: 点击左侧菜单重置内页传入的tab url
     * @author: 无尘
     */
    resetSelTab() {
      const that = this;
      that.activeSelTab = '';
    }
  },
  watch: {
    '$route.path'() {
      this.breadList = [];
    }
  }
};
</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>
