<template>
  <!-- <div
    class="stms-framework-side-menu"
    v-if="
      (pathdata.hierarchy == 2 &&
        pathdata.children.length > 0 &&
        pathdata.children[0].url.indexOf(':') < 0) ||
      pathActive.indexOf(':') != -1 ||
      pathdata.hierarchy == 4
    "
  > -->
  <div
    class="stms-framework-side-menu"
    v-if="pathdata.children && pathdata.children.length > 0"
  >
    <div class="head">
      <span
        :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
        @click="isCollapse = !isCollapse"
      ></span>
    </div>
    <div class="menuBox">
      <el-menu
        :default-active="pathActive"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @select="menuSwitch"
        background-color="#324157"
        text-color="#D0DEEA"
        active-text-color="#409EFF"
      >
        <template v-for="item in pathdata.children">
          <el-menu-item
            v-if="item.children.length == 0"
            :index="item.url"
            :key="item.id"
          >
            <img :src="item.image" class="navIcon" />
            <span>{{ item.name }}</span>
          </el-menu-item>
          <el-submenu v-else :index="item.url" :key="item.id">
            <template slot="title">
              <img v-if="item.image" :src="item.image" class="navIcon" />
              <span>{{ item.name }}</span>
            </template>
            <template v-for="w in item.children">
              <el-menu-item :index="w.url" :key="w.id">
                <img v-if="w.image" :src="w.image" class="navIcon" />
                <span>{{ w.name }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      //   pathActive:localStorage.getItem("pathActive") || "",
      //   pathdata:JSON.parse(localStorage.getItem("pathdata")) || {},
      //   pathList:JSON.parse(localStorage.getItem("pathList")) || [],
    };
  },
  computed: {
    pathdata() {
      return this.$store.state.menudata.pathdata;
    },
    pathActive() {
      return this.$store.state.menudata.pathActive;
    },
    pathList() {
      return this.$store.state.menudata.pathList;
    },
  },
  mounted() {},
  methods: {
    menuSwitch(url, keyPath) {
      if (this.$route.path != url) {
        let data = this.acquirePathData(this.pathList, url);
        //这里反显左侧列表得高亮
        this.pathActive = data.url;
        //这里判断当前路由是否被重定向
        this.$router.options.routes.forEach((item) => {
          if (item.path == url) {
            if (item.redirect) {
              this.pathActive = item.redirect;
            }
          }
        });
        this.$store.commit("setPathActive", this.pathActive);
        this.$router.push({ path: url, query: {} });
      }
    },
    acquirePathData(datas, url) {
      for (var i = 0; i < datas.length; i++) {
        let item = datas[i];
        if (item.url == url) {
          return item;
        }
        if (item.children && item.children.length > 0) {
          let res = this.acquirePathData(item.children, url);
          if (res) return res;
        }
      }
    },
  },
};
</script>
<style lang="less">
.stms-framework-side-menu {
  transition: all .2s linear;
  background: #324157;
  // z-index: 1001;
  overflow-y: auto;
  overflow-x: hidden;
  >.head {
    height: 50px;
    width: 100%;
    text-align: right;
    padding: 15px 25px 15px 0;
    float: left;
    background-color: #030916;
    border-bottom: 1px solid #1f2229;
  }
}
</style>