<template>
  <div class="global">
    <Header :key="this.$route.path" />
    <div class="app-container">
      <div class="app-cont">
        <el-menu :default-active="$route.path" :router="true">
          <template v-for="(item, index) in menuList">
            <template v-if="item.index === '/manage'">
              <el-menu-item
                v-if="
                  forums &&
                    forums.other &&
                    (forums.other.can_edit_user_group ||
                      forums.other.can_edit_user_status ||
                      forums.other.can_create_invite)
                "
                :key="item.index"
                :index="item.index"
                :class="item.classname"
                @click="currentInfo(index)"
              >
                <span slot="title" class="menu-title">{{
                  $t(item.content)
                }}</span>
                <span class="arrow"><i class="el-icon-arrow-right icon" /></span>
              </el-menu-item>
            </template>
            <template v-else-if="item.index === '/invite'">
              <el-menu-item
                v-if="
                  forums && forums.other && forums.other.can_invite_user_scale
                "
                :key="item.index"
                :index="item.index"
                :class="item.classname"
                @click="currentInfo(index)"
              >
                <span slot="title" class="menu-title">{{
                  $t(item.content)
                }}</span>
                <span class="arrow"><i class="el-icon-arrow-right icon" /></span>
              </el-menu-item>
            </template>
            <template v-else>
              <el-menu-item
                v-if="!item.hidden"
                :key="item.index"
                :index="item.index"
                :class="item.classname"
                @click="currentInfo(index)"
              >
                <span
                  slot="title"
                  class="menu-title"
                >{{ $t(item.content) }}
                  <span
                    v-if="
                      item.index === '/my/notice' &&
                        userInfo.unreadNotifications > 0
                    "
                    class="unread-notice"
                  >
                    {{
                      userInfo.unreadNotifications > 99
                        ? "99+"
                        : userInfo.unreadNotifications
                    }}
                  </span>
                </span>
                <span class="arrow"><i class="el-icon-arrow-right icon" /></span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
        <Nuxt class="my-main" />
      </div>
    </div>
    <Footer />
    <BackTop />
  </div>
</template>

<script>
export default {
  name: 'CenterLayout',
  data() {
    return {
      currentNumber: 0,
      menuList: [
        {
          index: '/my/profile',
          classname: 'padd',
          content: 'profile.myprofile',
          hidden: false
        },
        {
          index: '/my/wallet',
          classname: 'padd',
          content: 'profile.mywallet',
          hidden: false
        },
        {
          index: '/my/favorite',
          classname: 'padd',
          content: 'profile.myfavorite',
          hidden: false
        },
        {
          index: '/my/shield',
          classname: 'padd',
          content: 'profile.myshield',
          hidden: false
        },
        {
          index: '/my/notice',
          classname: 'padd',
          content: 'profile.notice',
          hidden: false
        },
        {
          index: '/site',
          classname: 'padd divided',
          content: 'manage.circleinfo',
          hidden: false
        },
        {
          index: '/manage',
          classname: 'padd',
          content: 'manage.siteManagement',
          hidden: false
        },
        {
          index: '/invite',
          classname: 'padd',
          content: 'invite.invite',
          hidden: false
        }
      ]
    };
  },
  computed: {
    forums() {
      const _forums = this.$store.state.site.info.attributes;
      return _forums;
    },
    userId() {
      return localStorage.getItem('user_id') || '';
    },
    userInfo() {
      return this.$store.state.user.info.attributes || {};
    }
  },
  mounted() {
    this.initMenu();
  },
  methods: {
    initMenu() {
      // 判断是否登录
      if (!this.userId) {
        this.$message.error(this.$t('core.not_authenticated'));
        const _this = this;
        window.setTimeout(() => {
          _this.$router.push('/');
        }, 1000);
      }
    },
    currentInfo(index) {
      this.currentNumber = index;
      if (this.$route.path === this.menuList[index].index) {
        window.location.href = this.$route.path;
      }
    }
  },
  head() {
    return {
      link: [
        {
          rel: 'icon',
          type: 'image/x-icon',
          href:
            this.forums
            && this.forums.set_site
            && this.forums.set_site.site_favicon
        }
      ]
    };
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";
.app-container {
  width: 1005px;
  // background: #f4f5f6;
  margin: 15px auto 0;
  @media screen and (max-width: 1005px) {
    width: 100%;
    min-width: 768px;
    padding: 0 14px;
  }
  .app-cont {
    width: 100%;
    min-height: calc(100vh - 65px - 80px - 15px);
    display: flex;
    // background: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.03);
    border-radius: 5px;
    .el-menu {
      padding-top: 20px;
      border-radius: 5px 0;
      width: 150px;
      border-right: 1px solid $line-color-base;
    }
    .padd {
      padding-left: 30px !important;
      padding: 0 65px;
      color: #6d6d6d;
      position: relative;
      @media screen and (max-width: 1005px) {
        padding: 0 40px;
      }
      &:hover {
        color: #00479b;
      }
    }
    .divided {
      border-top: 1px solid $line-color-base;
      margin-top: 15px;
      padding-top: 32px !important;
    }
    .arrow {
      position: absolute;
      // top:50%;
      right: 20px;
      // transform: translateY(-50%);
      color: #6d6d6d;
      display: none;
      @media screen and (max-width: 1005px) {
        right: 10px;
      }
      .icon {
        font-size: 12px;
      }
    }
    .is-active .arrow {
      display: block;
    }
    ::v-deep.el-menu-item {
      height: auto;
      line-height: 1;
      padding-top: 17px;
      padding-bottom: 17px;
    }
    ::v-deep.el-menu-item.is-active {
      color: black;
      font-weight: bold;
      background: white;
    }
    ::v-deep.el-menu-item:focus,
    .el-menu-item:hover {
      background: white;
    }
    .menu-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      .unread-notice {
        font-size: 12px;
        color: #fff;
        background: #ff0000;
        padding: 1px 6px;
        margin-left: 2px;
        border-radius: 6px;
        font-weight: normal;
      }
    }
    .my-main {
      margin-top: 25px;
      width: 100%;
      min-height: 800px;
      flex: 1;
      overflow-x: auto;
      @media screen and (max-width: 1005px) {
        margin-top: 20px;
      }
    }
  }
}
</style>
