<template>
  <div>
    <div class="system-title" v-if="!isCollapse">
      <img v-if="logo" src="@/assets/logo.png" class="sidebar-logo">
      <span>{{ settingsTitle }}</span>
    </div>
    <div class="system-title" v-else>Cost</div>
    <div></div>
    <el-scrollbar>
      <el-menu :unique-opened="true" :default-openeds="defaultOpeneds" :default-active="defaultActive"
        :collapse="isCollapse" class="left-aside" @select="handleSelect" @open="handleOpen" @close="handleClose"
        background-color="rgb(48, 65, 86)" text-color="#fff">
        <aside-item v-for="(menu, idx) in menus" :key="idx" :item="menu" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<style lang="scss" scoped>
.system-title {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  line-height: 50px;
  background-color: #4178D5;
}

.left-aside {
  border-right: 0;
}

.left-aside:not(.el-menu--collapse) {
  width: 200px;
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 12px;
}
</style>
<script>
import { mapState } from 'vuex'
import AsideItem from './item'
import { title } from '@/settings'
export default {
  components: {
    'aside-item': AsideItem
  },
  data () {
    return {
      settingsTitle: title,
      defaultOpeneds: [],
      defaultActive: this.$route.name,
      logo: true
    }
  },
  computed: {
    ...mapState({
      menus: (state) => state.routes.routes,
      isCollapse: (state) => state.leftAside.isCollapse
    })
  },
  watch: {
    '$route' (to, from) {
      const indexPath = this.$route.matched.map(v => v.name)
      this.defaultActive = indexPath.pop()
      this.defaultOpeneds = indexPath
    }
  },
  mounted () { },
  methods: {
    handleSelect (index, indexPath) {
      if (index == 'projectMange') {
        window.sessionStorage.removeItem('projectSearchdata')
      }
      if (index == 'taskMange') {
        window.sessionStorage.removeItem('taskSearchdata')
      }
      if (index == 'prlog') {
        window.sessionStorage.removeItem('projectLogSearchdata')
      }
    },
    handleOpen (index, indexPath) {
      console.log(index, indexPath)
    },
    handleClose (index, indexPath) { }
  }
}
</script>
