<template>
  <div class="left-aside">
    <h3 class="tool-bal">
      <span @click="isCollapse = !isCollapse">
        <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
      </span>
      <span class="setting" @click="handleConfig">
        <i class="el-icon-setting"></i>
      </span>
    </h3>
    <el-menu
      class="left-menu"
      unique-opened
      :default-active="activeIndex"
      :collapse-transition="false"
      :collapse="isCollapse"
    >
      <!--<h3><span @click="isCollapse = !isCollapse"><i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i></span></h3>-->
      <el-submenu
        v-for="(item, index) in curModule.subNodes"
        :key="index"
        :index="item.name"
        :title="item.name"
        :collapse-transition="false"
      >
        <template slot="title">
          <span slot="title">{{item.name}}</span>
        </template>
        <el-menu-item
          v-for="(sub, index1) in item.subNodes"
          :title="sub.name"
          :key="index1"
          :index="sub.name"
          @click="toPath(sub,item)"
        >
          <template slot="title">
            <i class="iconfont" :class="sub.ico"></i>
            <span slot="title">{{sub.name}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <drawer v-model="recordsVisible" />
  </div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
import drawer from '@/components/drawer'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')

export default {
  name: 'LeftMenu',
  components: {
    drawer
  },
  data() {
    return {
      isCollapse: false,
      recordsVisible: false
    }
  },
  computed: {
    ...mapGetters(['tabList', 'navRecords', 'activeIndex']),
    userInfo() {
      return this.$store.state.app.userInfo
    },
    curModule() {
      const arr = this.$route.matched
      return this.tabList.find(item => item.url === arr[0].name)
    }
  },
  watch: {
    $route: {
      handler: val => {
        if (this.$route) {
          this.setActiveIndex(this.$route.meta.title)
        }
      }
    }
  },
  mounted() {
    let url = ''
    let name = ''
    const path = 'projectApproval'
    if (JSON.stringify(this.$route.query) === '{}') {
      url = this.$route.name
    } else {
      url = this.$route.name + '?' + this.convertObj(this.$route.query)
    }
    this.curModule.subNodes.forEach(item => {
      item.subNodes.forEach(val => {
        if (url.indexOf(path) === -1) {
          if (url.indexOf('?') === -1) {
            if (val.url === url) {
              name = val.name
            }
          } else {
            if (val.url === url.substring(0, url.indexOf('?'))) {
              name = val.name
            }
          }
        } else {
          if (val.url === url) {
            name = val.name
          }
        }
      })
    })
    const item = {
      name: name,
      url: url
    }
    this.navRecordsData(item)
    this.configRoute()
  },
  methods: {
    convertObj(data) {
      var _result = []
      for (var key in data) {
        var value = data[key]
        if (value.constructor == Array) {
          value.forEach(function(_value) {
            _result.push(key + '=' + _value)
          })
        } else {
          _result.push(key + '=' + value)
        }
      }
      return _result.join('&')
    },
    configRoute() {
      this.curModule.subNodes.forEach(item => {
        item.subNodes.forEach(val => {
          if (val.name === this.activeIndex) {
            this.setActiveAppHeader(item.pid)
          }
        })
      })
    },
    ...mapMutations(['setNavRecords', 'setActiveIndex', 'setActiveAppHeader']),
    getQueryString(item) {
      const str = item.split('?')[1]
      const arr1 = str.split('&')
      const obj = {}
      for (let i = 0; i < arr1.length; i++) {
        obj[arr1[i].split('=')[0]] = arr1[i].split('=')[1]
      }
      return obj
    },
    toPath(item, val) {
      if (item.url.indexOf('?') === -1) {
        this.$router.push({
          name: item.url
        })
        this.navRecordsData(item)
      } else {
        if (window.location.href.indexOf(item.url) === -1) {
          this.$router.push({
            name: item.url.split('?')[0],
            query: this.getQueryString(item.url)
          })
          this.navRecordsData(item)
        }
      }
    },
    navRecordsData(item) {
      document.title = item.name
      this.setActiveIndex(item.name)
      const navRecords = JSON.parse(JSON.stringify(this.navRecords))
      if (!navRecords.map(el => el.name).includes(item.url)) {
        navRecords.forEach((el, index) => {
          el.active = false
        })
        navRecords.push({
          name: item.url,
          title: item.name,
          active: true
        })
      } else {
        navRecords.forEach((el, index) => {
          el.active = false
          if (el.name === item.url) {
            navRecords[index].active = true
          }
        })
      }
      this.setNavRecords(navRecords)
    },
    handleConfig(type) {
      this.recordsVisible = true
    }
  }
}
</script>

<style type="text/scss" lang="scss">
.downInfo {
  .el-dropdown-menu__item {
    height: 32px;
    line-height: 32px;
    width: 160px;
    font-size: 14px;
    color: $tc1;
  }
}
$border-color: #ebeef5;
.left-aside {
  margin-right: 20px;
  min-width: 40px;
  .tool-bal {
    height: 100%;
    width: 40px;
    float: left;
    .el-dropdown {
      width: 100%;
    }

    span {
      display: inline-block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 26px;
      margin-top: 10px;
      color: #ffffff;
      background-color: $active-color;
      cursor: pointer;
    }
    span.setting {
      background-color: $bc6;
    }
  }
}

.left-menu:not(.el-menu--collapse) {
  min-width: 180px;
  width: 10vw;
}

.left-menu.el-menu--collapse {
  width: 0;
}

.el-submenu {
  &__title {
    height: 48px !important;
    line-height: 48px !important;
    font-size: 14px;
    padding: 0 12px 0 29px !important;
    font-weight: bold;
    i {
      left: 8px;
      right: inherit;
      color: $active-color !important;
      font-weight: 600;
      font-size: 16px;
    }
  }
  .el-menu-item {
    min-width: 150px !important;
  }
}
.el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  transform: rotateZ(-90deg);
}
.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
  transform: rotateZ(0deg) !important;
}

.left-menu {
  height: calc(100% - 12px);
  padding-top: 12px;
  border: none !important;
  overflow-y: auto;
  h3 {
    text-align: right;
    padding: 2px 6px;
    border-bottom: 1px solid $border-color;
    span {
      display: inline-block;
      width: 28px;
      height: 28px;
      line-height: 28px;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
    }
  }
  .el-menu-item {
    height: 39px !important;
    line-height: 39px !important;
    padding: 0 0 0 20px !important;
    position: relative;
    font-size: 16px;
    /*&:before {*/
    /*content: '';*/
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*bottom: 0;*/
    /*width: 2px;*/
    /*background-color: $active-color;*/
    /*display: none;*/
    /*}*/
    /deep/ .el-tooltip {
      padding: 0 16px !important;
    }
    i {
      font-size: 18px;
      margin-right: 6px;
      color: $tc1;
    }
  }
  .el-menu-item.is-active,
  .el-menu-item:hover {
    color: $active-color;
    background-color: transparent;
    i {
      color: $active-color;
    }
    /*&:before {*/
    /*display: block;*/
    /*}*/
  }
}

.left-menu::-webkit-scrollbar {
  width: 3px;
  background-color: transparent;
}

.left-menu::-webkit-scrollbar-track {
  width: 3px;
  background-color: transparent;
}

.left-menu::-webkit-scrollbar-thumb {
  border-radius: 3px;
  width: 0;
  background-color: #aaaaaa;
}
</style>
