<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>
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()
          if (flag) {
            this.$router.push(item.path)
          } else {
            this.$message.error('请先完成产品分析报告，再进行' + item.label)
          }
        } else {
          this.$router.push(item.path)
        }
      }
    },
    selectProducts() {
      console.log(2222)
      this.$confirm('切换案例，当前填写的内容不会保存', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(1111)
        this.$router.push({ path: '/product-analysis' })
      }).catch(() => {})
    },
    fetchWorkStatus() {
      return new Promise((resolve) => {
        getWorkStatus().then(res => {
          if (res.code === 0 && res.data && res.data.case_status) {
            resolve(true)
          } else {
            resolve(false)
          }
        }).catch(() => resolve(false))
      })
    }
  }
}
</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>
