<template>
  <el-container class="home-container">
    <el-header>
      <div class="navbar">
        <p class="breadcrumb-container">
          <img
            src="@/assets/logo.png"
            style="
              width: 45px;
              height: 45px;
              margin-right: 10px;
              margin-top: 2px;
            "
          />汇融云眼贷后监管平台
        </p>
        <!-- <h3 class="breadcrumb-container">汇融供应链贷后监管平台h3> -->
        <div class="right-menu">
          <!--        <p>{{Orgname}} {{departmentName}} 欢迎, {{name}}</p>-->
          <p>欢迎您, &nbsp;系统管理员</p>
          <img src="@/assets/images/info.png" />
          <!-- <img src="@/assets/images/dy.png" @click="logout"> -->
          <span class="backToHome" @click="logout"
            ><i class="el-icon-back"></i>返回首页</span
          >
        </div>
      </div>
    </el-header>
    <el-container>
      <!-- 当打开左侧菜单时 宽度为200, 当不打开时为默认值-->
      <el-aside width="212px" class="sidemenu">
        <!-- 这是左侧菜单-->

        <!--
            1.background-color="#2C3E50"
            2.text-color="#fff" 文本颜色
            3.active-text-color="#4094ff"
            4.unique-opened=true 是否只打开一个菜单
            5.collapse  是否折叠
            6.collapse-transition 折叠时是否展现动画效果
            7.default-active  默认选中的菜单
            8.router 启动以path路径当做请求地址
         -->
         <div class="home-box">
            <a
              href="javascript:window.opener=null;window.open('','_self');window.close();"
              class="text-center"
              >平台首页</a
            >
            <a href="javascript:void(0);" class="text-center">仓库集控</a>
          </div>
        <el-menu
          background-color="#0294d7"
          text-color="#ffffff"
          active-text-color="#fff"
          unique-opened
          router
          :default-active="defaultActive"
          class="home-left"
        >
          <!-- 定义一级菜单 -->
          <div  class="one-title">
            <el-submenu
            :index="menu.id + ''"
            v-for="menu in menuList"
            :key="menu.id"
          >
            <!-- 定义一级菜单模版 -->
            <template slot="title">
              <!-- 定义左侧图标-->
              <!-- <i :class="menuIcon[menu.id]"></i> -->
              <i class="el-icon-menu"></i>
              <!-- 定义菜单名称-->
              <span>{{ menu.name }}</span>
            </template>
            <!-- 定义二级菜单 -->
            <el-menu-item
              :index="childrenMenu.path"
              v-for="childrenMenu in menu.children"
              :key="childrenMenu.id"
              @click="defaultActiveMenu(childrenMenu.path)"
            >
              <template slot="title">
                <i class="el-icon-help "></i>
                <span>{{ childrenMenu.name }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
          </div>

        </el-menu>
      </el-aside>
      <el-container>
        <!-- 定义主页面结构-->
        <el-main style="margin-top: -10px">
          <!-- <el-container class="home-container">

        </el-container> -->
          <!-- 定义路由展现页面-->
          <router-view></router-view>
        </el-main>
        <el-footer class="footer" height="40px"
          >Copyright © 技术支持集团 All Rights Reserved</el-footer
        >
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  // 初始化函数
  created () {
    this.getMenuList()
    // 设定模式选中按钮
    this.defaultActive = window.sessionStorage.getItem('activeMenu')
  },
  data () {
    return {
      menuList: [],
      menuIcon: {
        1: 'iconfont iconuser',
        3: 'iconfont iconshangpin',
        5: 'iconfont iconicon--copy',
        7: 'iconfont iconquanxian',
        8: 'iconfont iconziyuan'
      },
      // 定义默认高亮
      defaultActive: '',
      user: ''
    }
  },
  methods: {
    logout () {
      // 1.删除session中的记录
      window.sessionStorage.clear()
      // 2.要求跳转到用户登录页面
      this.$router.push('/login')
    },
    async getMenuList () {
      // 1.查询左侧菜单
      const { data: result } = await this.$http.get('/rights/getRightsList')
      if (result.status !== 200) return this.$message.error('获取权限列表失败')
      this.menuList = result.data
    },
    // 设定左侧折叠展开效果
    collspseClick () {
      this.isCollapse = !this.isCollapse
    },
    defaultActiveMenu (activeMenu) {
      // 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
      window.sessionStorage.setItem('activeMenu', activeMenu)
      this.defaultActive = activeMenu
    }
  },

  mounted () {
    // this.user = window.sessionStorage.getItem('token').substr(32)
    this.user = '9a3860f0f2af471982e919657099913dddd'
  }
}
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>
 /deep/ [data-v-8dc7cce2] .el-submenu__title {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #303133;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    box-sizing: border-box;
}
 /deep/ .el-submenu .el-menu-item {
    height: 40px;
    line-height: 40px;
    padding: 0 45px;
    min-width: 200px;
}
/deep/ .el-menu-item.is-active {
     color: #fff;
     background-color: #087dba!important;
}
/deep/ .el-submenu__title i {
     color: #fff;
}

/deep/ .el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 15px!important;
}

/deep/ .el-submenu .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

/deep/ .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 15px!important;
}
.el-aside {
  background-color: #55007f;

  .el-menu {
    border-right: none;
  }
}

.el-main {
  background-color: #eeeeee;
}

.home-container {
  height: 100%;
  width: 100%;
}

.iconfont {
  margin-right: 8px;
}
// 导航栏渐变
.navbar {
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
  margin-left: -20px;
  background-color: #0294d7;
  padding: 0 30px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 26px;
    line-height: 58px;
    margin: 0;
    float: left;
  }

  .right-menu {
    float: right;
    height: 100%;
    margin-right: 20px;
    line-height: 55px;
    color: #fff;

    &:focus {
      outline: none;
    }

    p {
      display: inline-block;
      margin: 0;
      padding: 0;
      padding: 0 15px;
    }

    img {
      vertical-align: middle;
      margin: 0 10px;
      cursor: pointer;
    }

    .backToHome {
      display: inline-block;
      vertical-align: middle;
      padding: 0 15px;
      cursor: pointer;
    }

    .backToHome:hover {
      background: #087dba;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
  }
}
// 按钮
.butt {
  background-color: #cecece;
  border-color: #cecece;
}
.sidemenu {
  background-color: #55557f;
}
//定义折叠项
.leftCollapse {
  //设定背景色
  background-color: #708090;
  //定义字体大小
  font-size: 10px;
  //定义行高
  line-height: 30px;
  //定义颜色
  color: #ffffff;
  //设置居中
  text-align: center;
  //设定字符间距
  letter-spacing: 4px;
  //鼠标放上之后设置为小手
  cursor: pointer;
}
.el-icon-star-on {
  color: white;
}
.el-icon-menu {
  color: white;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  background: #e9f1f7;
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-left: -211px;
}
.home-box {
  position: fixed;
  top: 60px;
  left: 0;
  background-color: #0294d7;
  border: 1px solid #087dba;
  line-height: 40px;
  width: 210px;
  z-index: 1000;
  a {
    display: inline-block;
    line-height: 40px;
    box-sizing: border-box;
    width: 50%;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
  }
  a:last-child {
    border: 0;
    background-color: #087dba;
  }
}
.home-left{
  height: 100%;
  .one-title{
    margin-top: 40px;
    .el-menu-item i {
     color: #fff;
}
  }
}
</style>
