<template>
  <div class="menu-container">
    <div class="logo">
      <img
        :src="LogoImage"
        class="logo-img"
      >
    </div>
    <template
      v-for="item in menu"
    >
      <div
        v-if="item.hasPermission"
        :key="item.pathName"
        :class="['menu', currentRouteName === item.pathName ? 'menu-active' : '', isOpened ? '' : 'menu-close']"
        @click="onClick(item)"
      >
        <SvgIcon
          :icon-class="item.icon"
          class="icon"
        />
        <div class="label">
          {{ item.label }}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import LogoImage from '@/assets/logo.png'

export default {
  data() {
    return {
      LogoImage,
      currentRouteName: ''
    }
  },
  computed: {
    ...mapGetters([
      'routes',
      'sidebar'
    ]),
    userType() {
      return this.$store.getters.userType
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    isOpened() {
      return this.sidebar.opened
    },
    menu() {
      return [
        {
          pathName: 'consumer',
          icon: 'consumer',
          label: '客户',
          hasPermission: this.userType === 2
        },
        {
          pathName: 'goods-list',
          icon: 'goods',
          label: '商品',
          hasPermission: this.userType === 2
        },
        {
          pathName: 'order-list',
          icon: 'order',
          label: '订单',
          hasPermission: true
        }
      ]
    }
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(val) {
        console.log('$route', val)
        this.currentRouteName = val.name
      }
    }
  },
  methods: {
    onClick({ pathName }) {
      if (pathName !== this.$route.name) {
        this.$router.push({
          name: pathName
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.menu-container {
  display: flex;
  flex-direction: column;
  color: #ffffff;

  .logo {
    height: 50px;
    text-align: center;
    margin-top: 10px;
  }

  .menu {
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .icon {
      font-size: 38px;
      margin-right: 0 !important;
    }

    .label {
      margin-top: 10px;
      font-size: 14px;
    }

    &:hover {
      background-color: #485c6c;
    }

    &-active {
      background-color: #485c6c;
    }
  }

  .menu-close {
    height: 50px;

    .icon {
      font-size: 20px;
    }

    .label {
      display: none;
    }
  }
}
</style>
