<template>
  <div>
    <div class="card_admin center_in" @click="goMenu">
      <div class="title_left">后台管理</div>
      <i class="el-icon-s-fold icon_catalog"></i>
    </div>
    <el-drawer direction="ltr" size="300px" :visible.sync="drawer" :with-header="false">
      <div class="system_head">
        <img class="system_img" src="../../assets/logo.png" alt="" />
        <span class="system_title">宝智达气瓶管理系统</span>
      </div>
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="rgba(2, 69, 115, 1)" :unique-opened="true" text-color="#fff" active-text-color="#409EFF">
        <el-submenu v-for="(item,index) in menus" :index="item.name" :key="index">
          <template slot="title">
            <i :class="item.meta.icon" class="menu_icon"></i>
            <span>{{item.meta.title}}</span>
          </template>
          <el-menu-item-group v-for="(it,k) in item.children" :key="k">
            <router-link :to="it.path" @click.native="backSkip" tag="el-menu-item">
              {{it.meta.title}}
            </router-link>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-drawer>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    name: "topNav",
    data() {
      return {
        drawer: false,
        menus: [],
      }
    },
    computed: {
      ...mapState({
        // 动态主路由
        mainMenu: state => state.permission.menu
      })
    },
    created() {
      this.getLeftMenu()
      // console.log(this.menus, 66)
    },
    methods: {
      goMenu() {
        this.getLeftMenu()
        this.drawer = true
      },
      getLeftMenu() {
        const mRoutes = this.$store.state.permission.menu;
        const arrList = ['index', '404']
        let mRoutesList = mRoutes.filter(item => !arrList.some(ele => ele === item.name));
        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);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      backSkip() {
        this.drawer = false
      }
    }
  }
</script>

<style scoped lang="scss">
  .card_admin {
    cursor: pointer;
    width: 130px;
    height: 40px;
    background-color: red;
    background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat,
      linear-gradient(to bottom, #2CD5FF, #2CD5FF) left top no-repeat,
      // linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,
      // linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,
      // linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,
      // linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat,
      linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat,
      linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat;
    background-size: 2px 15px, 30px 2px, 2px 15px, 30px 2px;
    border: 2px solid rgba(44, 213, 255, .1);
    position: relative;
  }

  ::v-deep .el-drawer {
    background-color: rgba(2, 69, 115, 0.9) !important;
    box-shadow: unset !important;
  }

  ::v-deep .el-menu-item {
    width: 100%;
  }

  ::v-deep .el-menu-item:hover {
    background-color: rgba(64, 158, 255, 0.5) !important;
  }

  ::v-deep .el-submenu__title:hover {
    background-color: rgba(64, 158, 255, 0.5) !important;
  }

  ::v-deep .router-link-exact-active {
    background-color: rgba(64, 158, 255, 0.5) !important;
  }

  .title_left {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 18px;
    font-weight: bold;
    font-family: "Hiragino Sans GB", Arial, sans-serif;
  }

  .icon_catalog {
    font-size: 20px;
    margin-left: 4px;
  }

  .el-menu {
    border-right: unset !important;
  }

  .system_head {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: rgba(2, 69, 115, 1) !important;
  }

  .system_img {
    margin-right: 10px;
    width: 40px;
  }

  .system_title {
    font-size: 20px;
    color: #fff;
  }

  .menu_icon {
    color: #fff;
    font-size: 18px;
    margin-right: 5px;
  }
</style>
