<template>
  <ul class="menu">
    <template v-for="(item, index) in menuList">
      {{index === 0 ? '' : '|'}}<li :class="{ active: path.includes(item.path), disabled: item.disabled.includes(role)}" :key="index" @click="menuSelect(item)">{{item.label}}</li>
    </template>
  </ul>
</template>
<script>
export default {
  name: 'AppMenu',
  data() {
    return {
      menuList: [
        { label: '首页', path: '/home', disabled: [] },
        { label: '产品分析', path: '/product-analysis', disabled: [0, 2, 3]  },
        { label: '用户研究', path: '/user-study', disabled: [0, 1, 3] },
        { label: '营销工具使用', path: '/market-tools', disabled: [0, 1, 2] },
        { label: '作品展示', path: '/works-show', disabled: [] }
      ]
    }
  },
  computed: {
    path() {
      return this.$route.path
    },
    role() {
      return this.$store.state.role
    }
  },
  methods: {
    menuSelect(item) {
      if (item.disabled.includes(this.role)) {
        this.$message.error('您当前的角色禁止访问该页面')
      } else {
        this.$router.push(item.path)
      }
    }
  }
}
</script>
<style scoped>
.menu{
  width: 780px;
  height:56px;
  background:#68B8A4;
  border-radius:28px;
  display:flex;
  font-size:18px;
  line-height:56px;
  color:#fff;
}
.menu li{
  padding:0 40px;
  cursor: pointer;
}
.menu li.active{
  font-weight: bold;
}
.menu li.disabled{
  color:#c7d4d5;
  cursor:not-allowed;
}
</style>