<template>
  <div>
    <el-container>
      <el-header>
        <div class="space_between_in base_head">
          <topNav :iconFlag="iconFlag" :menus="menus" @getUnpack="getUnpack"></topNav>
          <UserInfo></UserInfo>
        </div>
      </el-header>
      <el-container class="card_container">
        <el-main>
          <div class="main">
            <router-view :key="$route.fullPath"></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import topNav from './topNav.vue'
  import UserInfo from './userInfo.vue'
  export default {
    name: 'BaseView',
    components: {
      topNav,
      UserInfo
    },
    data() {
      return {
        menus: [],
        // 被激活的链接地址
        activePath: '',
        iconFlag: false,
        sideWidth: 200,
      }
    },
    computed: {
      ...mapState({
        // 动态主路由
        mainMenu: state => state.permission.menu
      })
    },
    created() {
      this.activePath = localStorage.getItem('activePath')
      this.getLeftMenu()
    },
    methods: {
      getLeftMenu() {
        const mRoutes = this.$store.state.permission.menu;
        let mRoutesList = []
        mRoutes.forEach(item => {
          if (item.name == 'index') {
            mRoutesList = item.children
          }
        })
        this.menus = getpath(mRoutesList, '')

        function getpath(routerMap, parent) {
          routerMap.map(item => {
            item.path = `${(parent.path) || ''}/${item.name}`
            if (item.children && item.children.length > 0) {
              return getpath(item.children, item)
            }
          })
          return routerMap
        }
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
        this.$router.push(key)
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      defaultActive() {
        this.$nextTick(() => {
          this.$refs.menu.updateActiveName()
        })
      },
      // 保存链接的激活状态
      saveNavState(activePath) {
        localStorage.setItem("activePath", activePath);
        this.activePath = activePath
      },
      // 展开收起
      getUnpack(flag) {
        if (flag) {
          this.iconFlag = false
          this.sideWidth = 200
        } else {
          this.iconFlag = true
          this.sideWidth = 64
        }
      }
    }
  }
</script>
<style>
  .el-main {
    padding: 10px 0px 0px 0px;
    height: calc(100vh - 60px);
  }

  .home {
    /* background-color: rgba(10, 54, 107, 1); */
    /* background: url(../../assets/images/pageBg.png) center center / 100% 100% no-repeat fixed; */
  }
</style>
<style lang="scss" scoped>
  ::v-deep .el-main {
    // background: #fcfbff;
  }

  ::v-deep .el-aside {
    transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -moz-transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -o-transition: width 0.15s;
  }

  .el-header {
    // box-shadow: 0 5px 10px -2px rgba(255,255,255,.2);
    // border-bottom: 4px solid red;
    z-index: 2;
    padding: 0px 10px;
    padding-bottom: 4px;
    position: relative;
  }

  .el-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 60px;
    height: 4px;
    background: rgba(64, 158, 255, .8);
    border-radius: 5px;
  }

  .el-header:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100% - 70px);
    height: 4px;
    border-radius: 5px;
    /* 下边框的高度 */
    overflow: hidden;
    background: linear-gradient(to right, rgba(64, 158, 255, .8), rgba(64, 158, 255, .4), rgba(64, 158, 255, .1));
  }

  .base_head {
    height: 100%;
  }

  .card_container {
    height: calc(100vh - 60px);
  }

  .card_aside {
    position: relative;
    height: calc(100% - 20px);
    padding-top: 20px;
  }

  .card_menu {
    height: calc(100% - 70px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* 整个滚动条 */
  .card_menu::-webkit-scrollbar {
    width: 4px;
    /* 对于垂直滚动条，设置宽度 */
    height: 4px;
    /* 对于水平滚动条，设置高度 */
  }

  /* 滚动条轨道 */
  .card_menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 背景色 */
  }

  /* 滚动条滑块 */
  .card_menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    /* 滑块颜色 */
  }

  /* 滑块hover效果 */
  .card_menu::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* 滑块hover颜色 */
  }

  .el-menu-vertical-demo {
    border-right: none !important;
  }

  .menu_item {
    display: flex;
    align-items: center;
  }

  .menu_icon {
    font-size: 22px !important;
    margin-right: 10px;
  }

  .card_support {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: rgb(204, 204, 204);
    padding: 15px;
    background-color: #fff;

    span {
      font-size: 14px;
    }
  }

  .main {
    height: 100%;
  }
</style>
