<template>
  <div class="menu-box">
    <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>
    <el-button @click="selectProducts" style="height: fit-content;" type="primary" v-if="$route.path.includes('/product-analysis')">产品柜</el-button>
  </div>
</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)
      }
    },
    selectProducts() {
      this.$confirm('切换案例，当前填写的内容不会保存', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({ path: '/product-analysis' })
      })
      // if (this.$route.path === '/product-analysis/report') {
      //   this.$confirm('切换案例，当前填写的内容不会保存', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //     this.$router.push({ path: '/product-analysis' })
      //   })
      // } else {
      //   this.$router.push({ path: '/product-analysis' })
      // }
    }
  }
}
</script>
<style scoped>
.menu-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.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>
