<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>
import { getWorkStatus } from '@/api/base.js'
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: [0] }
      ]
    }
  },
  computed: {
    path() {
      return this.$route.path
    },
    role() {
      return this.$store.state.role
    }
  },
  methods: {
    async menuSelect(item) {
      if (this.role === 0) {
        this.$message.error('请选择角色')
      } else if (item.disabled.includes(this.role)) {
        this.$message.error('您当前的角色禁止访问该页面')
      } else {
        if (['/user-study', '/market-tools'].includes(item.path)) {
          const flag = await this.fetchWorkStatus()
          console.log(flag)
          if (flag) {
            this.$router.push(item.path)
          } else {
            this.$message.error('您先完成产品分析报告，再进行' + item.label)
          }
        } else {
          this.$router.push(item.path)
        }
      }
    },
    fetchWorkStatus() {
      return new Promise((resolve) => {
        getWorkStatus().then(res => {
          if (res.code === 0 && res.data) {
            resolve(true)
          } else {
            resolve(false)
          }
        }).catch(err => resolve(false))
      })
    }
  }
}
</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>
