<template>
  <div class="left-menu">
    <img class="logo" :src="iconUrl"/>
    <div class="menu-block">
      <div class="menu-content" v-for="data in menuList" @click="toPath(data)">
          <i :class="'iconfont '+data.icon"></i>
          {{data.value}}
      </div>
    </div>
  </div>
</template>

<script>
  import iconUrl from '../../assets/logos.png'
  export default {
    name: "leftMenu",
    data(){
      return {
        iconUrl:iconUrl,
        menuList:this.$store.state.menuList
      }
    },
    methods:{
      changeMenuType:function(){
        this.$store.state.menuType = !this.$store.state.menuType
      },
      toPath:function (data) {
        this.$router.push({name:data.routerName})
        if(this.$store.state.openedTab.indexOf(data) < 0){
          this.$store.state.openedTab.push(data);
        }
      }
    },
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .left-menu{
    height: 100%;
    user-select:none;
    transition: all .5s;
    position: relative;
    background: @bg-b;
    font-size: 12px;
    text-align: center;
    color: @main-font-color;
    .logo{
      margin-top: 20px;
      width: 80%;
    }
    .menu-block {
      padding-top: 20px;
      .menu-content {
        padding: 15px 0;
        cursor: pointer;
        transition: all .3s;
        &:hover {
          background-color: @gold-color-light;
          color: @black-line;
        }
        i {
          font-size: 24px;
          margin-bottom: 10px;
          display: block;
        }
      }
    }
  }
</style>