<template>
  <el-row>
    <el-col>
      <el-menu router>
        <!--        <el-submenu index="1" background-color="#545c64">-->
        <!--          <template slot="title" >-->
        <!--            <i class="icon-server"></i>-->
        <!--            <span>192.168.223.166</span>-->
        <!--          </template>-->
        <!--          <el-submenu index="1-1">-->
        <!--            <template slot="title"><i class="fa fa-circle mark"></i>通道</template>-->
        <!--            <el-menu-item index="1-1-1">选项4-1</el-menu-item>-->
        <!--          </el-submenu>-->
        <!--          <el-submenu index="1-2">-->
        <!--            <template slot="title"><i class="fa fa-circle mark"></i>配置</template>-->
        <!--            <el-menu-item index="1-2-1">选项4-1</el-menu-item>-->
        <!--            <el-menu-item index="1-2-2">选项4-2</el-menu-item>-->
        <!--            <el-menu-item index="404">选项4-3</el-menu-item>-->
        <!--            <el-menu-item index="401">选项4-4</el-menu-item>-->
        <!--          </el-submenu>-->
        <!--          <el-submenu index="1-3">-->
        <!--            <template slot="title"><i class="fa fa-circle mark"></i>运行</template>-->
        <!--            <el-menu-item index="1-3-1">选项4-1</el-menu-item>-->
        <!--          </el-submenu>-->
        <!--          <el-submenu index="1-4">-->
        <!--            <template slot="title"><i class="fa fa-circle mark"></i>数据源配置</template>-->
        <!--            <el-menu-item index="1-4-1">选项4-1</el-menu-item>-->
        <!--          </el-submenu>-->
        <!--          <el-submenu index="1-5">-->
        <!--            <template slot="title"><i class="fa fa-circle mark"></i>报表</template>-->
        <!--            <el-menu-item index="1-5-1">选项4-1</el-menu-item>-->
        <!--          </el-submenu>-->
        <!--        </el-submenu>-->
        <SidebarItem v-for="route in menuList" :key="route.id" :item="route"></SidebarItem>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import SidebarItem from '@/components/SidebarItem'

export default {
  name: "LeftMenu",
  components: {
    SidebarItem
  },
  data() {
    return {
      menuList: [
        {
          name: '192.168.223.166',
          id: '1',
          children: [
            {id: '1-1', name: '通道'},
            {id: '1-2', name: '配置'},
            {id: '1-3', name: '运行'},
            {id: '1-4', name: '数据源配置'},
            {id: '1-5', name: '报表'}
          ]
        },
        {
          name: '182.68.1.90',
          id: '2',
          children: [
            {id: '2-1', name: '通道'},
            {
              id: '2-2',
              name: '配置',
              children: [
                {id: '2-2-1', name: '2-2-1'},
                {id: '2-2-2', name: '2-2-2'},
                {
                  id: '2-2-3',
                  name: '2-2-3',
                  children: [
                    {id: '2-2-3-1', name: '2-2-3-1'},
                    {id: '2-2-3-2', name: '2-2-3-2'}
                  ]
                }
              ]
            },
            {id: '2-3', name: '运行'},
            {id: '2-4', name: '数据源配置'},
            {id: '2-5', name: '报表'}
          ]
        }
      ]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.el-menu {
  background-color: transparent;
  height: 100%;
  overflow: auto;
}

.el-submenu__title {
  color: white;
}

.el-submenu__title:hover {
  background-color: #1682e6;
}

.el-menu--inline li .el-submenu__title:hover {
  background-color: #6197c9;
}

.el-menu-item:hover {
  background-color: #b6d2eb;
}

.el-menu-item.is-active {
  background-color: #b6d2eb;
}

.el-menu-item {
  color: black;
  min-width: auto !important;
}

.el-submenu__title {
  background-color: #275da2;
  height: 50px;
  line-height: 50px;
}

.el-menu--inline li .el-submenu__title {
  background-color: #4f77b2;
}

.el-submenu__title i {
  color: white;
}

.icon-server {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: url("~@/assets/images/server.png") no-repeat;
}

.mark {
  font-size: 12px;
  color: white;
  transform: scale(0.5);
  padding-right: 10px;
}

.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotateZ(-90deg);
  margin-top: -4px;
}

.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  -webkit-transform: rotateZ(0deg);
  -ms-transform: rotate(0deg);
  transform: rotateZ(0deg);
  margin-top: -4px;
}


/*webkit内核*/
.scroll_content::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/*o内核*/
.scroll_content .-o-scrollbar {
  -moz-appearance: none !important;
  background: rgba(0, 255, 0, 0) !important;
}

/*IE10,IE11,IE12*/
.scroll_content {
  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  overflow: auto;
}
</style>