<template>
  <div class="main-menu-box">
    <div class="main-menu">
      <img class="main-menu-logo" src="@/assets/logo-layout.png" alt="" @click="toIndex" />
      <div v-for="el in getMenuList" :key="el.menuCode" :class="['main-menu-item', { actived: activedCode == el.menuCode }]" @click="toPage(el)">
        {{ el.menuName }}
      </div>
    </div>
    <div class="main-info">
      <change-store @showLoading="loading => $emit('showLoading', loading)"></change-store>
      <div class="apply-info" @click="$router.push('/unreview')">
        待审核 <span v-if="applyCount > 0">({{ applyCount > 99 ? '99+' : applyCount }})</span>
      </div>
      <user-info @showLoading="loading => $emit('showLoading', loading)"></user-info>
    </div>
  </div>
</template>

<script>
import ChangeStore from './components/change-store.vue';
import UserInfo from './components/user-info.vue';
import { getRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';
export default {
  name: 'main-menu',
  components: { ChangeStore, UserInfo },
  provide: {
    projectName: 'haoban-manage-web'
  },
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    activedCode: String
  },
  computed: {
    getMenuList() {
      return this.menuList.filter(el => el.hasRight && el.isShow);
    }
  },
  data() {
    return {
      applyCount: 0
    };
  },
  created() {
    this.updateAplyCount();
  },
  methods: {
    toIndex() {
      this.$router.push('/index');
    },
    toPage(menu) {
      // 找到第一个有权限的路径
      let path = '';
      menu.childList.some(el => {
        if (el.hasRight && Array.isArray(el.childList)) {
          el.childList.some(item => {
            if (item.hasRight) {
              path = item.menuUrl;
            }
            return item.hasRight;
          });
        }
        return path;
      });
      if (path) {
        this.$router.push('/' + path);
      }
    },
    updateAplyCount() {
      getRequest('/haoban-manage3-web/audit/get-audit-count', {}).then(resp => {
        const { errorCode, result } = resp.data || {};
        if (errorCode != 1) {
          errorMsg.errorMsg(resp.data);
          return;
        }
        this.applyCount = result || 0;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main-menu-box {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-shrink: 0;
  padding: 0 22px;
  width: 100%;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  .main-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .main-menu-logo {
      margin-right: 70px;
      width: 65px;
      height: 28px;
      cursor: pointer;
    }
    .main-menu-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-size: 16px;
      font-weight: 400;
      color: #303133;
      cursor: pointer;
      + .main-menu-item {
        margin-left: 40px;
      }
      &.actived {
        font-weight: 600;
        color: #2f54eb;
        &::after {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 1;
          width: 100%;
          height: 2px;
          background: #2f54eb;
          height: 2px;
          border-radius: 1px 1px 0px 0px;
        }
      }
      &:hover {
        color: #2f54eb;
      }
    }
  }
  .main-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .apply-info {
      padding: 9px;
      font-size: 16px;
      font-weight: 400;
      color: #303133;
      border-radius: 4px;
      cursor: pointer;
      box-sizing: border-box;
      &:hover {
        background: #f2f3f5;
      }
    }
  }
}
</style>
