<template>
  <div class="left-layout">
    <div 
      class="left-menu"
      v-if="menu.length"
    >
      <div class="menu-list">
        <div
          class="menu-item first"
          :class="url.toLowerCase() === item.url.toLowerCase() ?'cur':''"
          v-for="(item,idx) in menu"
          :key="idx"
          @click="goTo(item.url)"
        >
          <span :class="item.children && item.children.length>0? 'menu-name menu-item-c':'menu-name menu-item-n'">{{item.label}}</span>
          <template v-if="item.children">
            <div
              v-for="(cItem,cIdx)  in item.children"
              :key="cItem.url+cIdx"
              @click="goTo(cItem.url)"
              :class="'menu-item two '+( url.toLowerCase()===cItem.url.toLowerCase() ?'cur':'' )"
            >
              <span class="menu-name">{{cItem.label}}</span>
              <el-icon>
                <caret-right />
              </el-icon>
            </div>
          </template>
          <el-icon v-else>
            <caret-right />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="layout-cxt" :class="{'no-menu-layout-cxt': !menu.length}">
      <router-view />
    </div>

  </div>
</template>

<script>
import { CaretRight } from "@element-plus/icons"
import { mapGetters } from 'vuex'
export default {
  name: "LeftLayout",
  components: {
    CaretRight
  },
  data(){
    return {
      url:''
    }
  },
  computed: {
    ...mapGetters({
      menu: "navMenu/menu",
      localUrl: "navMenu/localUrl"
    })
  },
  watch:{
    '$route':{
      deeper: true,
      immediate: true,
      handler: function(){
        let { pathname, hash } = document.location;
        if (pathname.lastIndexOf('/') === pathname.length - 1) {
            this.url =  pathname + hash
        }else{
          this.url = pathname + '/' + hash
        }
      }
    }
  },
  methods: {
    goTo (url) {
      if (url) {
        window.location = url
      }

    }
  }
}
</script>

<style scoped>
.left-layout {
  display: flex;
  height: 100%;
  flex: 1;
  overflow: hidden;
  padding-top: 75px;
}
.left-menu {
  flex-shrink: 0;
  width: 170px;
  /*padding-top: 26px;*/
  margin: 0;
  left: 0;
  position: fixed;
  height: 100%;
  z-index: 901;
}
.menu-list {
  color: #969ea5;
  background: #2e3e4c;
  width: 180px;
  margin: 0;
  padding: 30px 0 0 0;
  height: 100%;

}
.layout-cxt {
  /* flex: 1; */
  width: calc(100% - 190px);
  padding-right: 20px;
  padding-left: 180px;
}
.no-menu-layout-cxt{
  padding-left: 20px;
  width: calc(100% - 40px)
}
.menu-list .menu-item {
  position: relative;
  /*height: 48px;*/
  /*line-height: 48px;*/
  /*height: 30px;*/
  /*line-height: 30px;*/
}
.menu-list .menu-item.first {
  /*display: flex;*/
  /*align-items: center;*/
}
.menu-list .menu-item.first .menu-name {
  width: 100%;
  padding-left: 39px;

  position: relative;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

.menu-name + .menu-item {
  /*margin-top: 10px;*/
}
.menu-list .menu-item.first > .menu-name {
  cursor: pointer;
  /* color: #ffffff; */
  color: #969ea5;
  font-size: 16px;
  font-weight: bold;
  /*height: 48px;*/
  /*line-height: 48px;*/
  display: inline-block;
}

.menu-list .menu-item.two > .menu-name {
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  color: #969ea5;
  padding-left: 39px;
}

.menu-list .menu-item.two {
  width: 100%;
  height: 33px;
  line-height: 33px;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  margin: 0px auto;
}
.menu-list .menu-item.two:last-child {
  margin-bottom: 17px;
}
.menu-list .menu-name {
  /*height: 48px;*/
  /*line-height: 48px;*/
  /*cursor: pointer;*/
  /*position: relative;*/
  /*display: flex;*/
  /*align-items: center;*/
  /*margin-left: -6px;*/
  /*box-sizing: border-box;*/
  /*!*padding-left: 16px;*!*/
  /*font-weight: bold;*/
}
.menu-list .menu-item .el-icon {
  position: absolute;
  left: 100%;
  color: #000;
  margin-left: -8px;
  display: none;
  font-size: 20px;
  /*top: 8px;*/
}
.menu-list .menu-item.cur .menu-name {
  color: #fff;
}
.menu-list .menu-item.cur {
  background: #1e2a35;
  display: flex;
  align-items: center;
}
.menu-list .menu-item.cur .el-icon {
  display: block;
}
.menu-item-c {
  color: #ffffff !important;
  padding-left: 16px !important;
  margin-bottom: 10px;
}

.menu-item-n {
  padding-top: 14px;
  padding-bottom: 14px;
}
</style>
