<template>
  <el-row>
    <el-col class="menu-list">
      <el-menu router>
        <template v-for="server in serverList">
          <el-submenu :index="server.id.toString()" background-color="#545c64">
            <template slot="title">
              <i class="icon-server"></i>
              <span>{{ server.ipAddress }}</span>
            </template>
            <template v-for="child in server.children">
              <el-submenu :index="server.id.toString() + '_' + child.id.toString()"
                          @click.native="handleByMenu(server.id, child.id)">
                <template slot="title">
                  <i class="fa fa-circle mark"></i>
                  <span>{{ child.name }}</span>
                </template>
                <div class="custom-tree">
                  <el-tree class="filter-tree" :data="labelList" :indent="0" node-key="id"
                           :props="defaultProps"
                           @node-click="handleNodeClick"></el-tree>
                </div>
              </el-submenu>
            </template>
            <!--          <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>
        </template>
        <!--        <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'
import {getConnInfo} from "@/api/opc";

export default {
  name: "LeftMenu",
  components: {
    SidebarItem
  },
  data() {
    return {
      serverList: [],
      secondMenuList: [
        {
          id: 's01',
          name: '通道'
        },
        {
          id: 's02',
          name: '配置'
        },
        {
          id: 's03',
          name: '运行'
        },
        {
          id: 's04',
          name: '数据源配置'
        },
        {
          id: 's05', name: '报表'
        }
      ],
      labelList: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.getConnInfo()
  },
  methods: {
    /**
     * 获取当前用户的连接信息
     */
    getConnInfo() {
      getConnInfo().then(res => {
        this.serverList = res.data;
        for (let i in this.serverList) {
          this.serverList[i].children = this.secondMenuList;
        }
      });
    },
    handleByMenu(serverId, menuId) {
      console.log("serverId ==> " + serverId)
      console.log("menuId ==> " + menuId)
    },
    handleNodeClick(data) {
      console.log(data);
    }
  }
}
</script>

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

.menu-list {
  height: 100%;
}

.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-menu .el-menu--inline {
  overflow: hidden;
}

.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;
}

.custom-tree {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__expand-icon.expanded {
    transform: rotate(0deg);
  }

  .el-tree-node__children {
    padding-left: 25px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #b8b9bb;
    bottom: 0px;
    height: 100%;
    top: -23px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #b8b9bb;
    height: 20px;
    top: 15px;
    width: 18px;
  }

  .el-tree .el-icon-caret-right:before {
    content: "\e723";
  }

  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\e722";
  }

  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
    margin-right: 5px;
  }

  .el-tree-node__content {
    padding: 15px;
  }
}

.el-menu::-webkit-scrollbar {
  width: 8px;
  height: 6px;
  opacity: 0.4;
}

.el-menu::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 8px;
  opacity: 0.4;
}

.el-menu::-webkit-scrollbar-track-piece {
  width: 4px;
}

.el-menu::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: gray;
  opacity: 0.4;
}
</style>