/*userLayout*/
<template>
  <div class="user">
    <div class="container">
      <div class="user-slider">
        <el-menu :default-active="activeIndex" @select="Select" router>
          <el-menu-item index="/userLayout/user-info">用户信息</el-menu-item>
          <el-menu-item index="/userLayout/modify">修改密码</el-menu-item>
          <el-menu-item v-if="userType != 2" index="/userLayout/real"
            >实名认证</el-menu-item
          >
          <el-menu-item index="/userLayout/project">我的项目</el-menu-item>
          <el-menu-item  v-if="userType != 2" index="/userLayout/resource"
            >我的资源</el-menu-item
          >
           <!-- <el-menu-item v-if="userRole != 2 " index="/userLayout/palan"
            >大赛的进度</el-menu-item
          > -->
          <el-menu-item v-if="userRole == 2 ||userRole ==3"  index="/userLayout/menu"
            >参赛情况</el-menu-item
          >
          <!-- <el-menu-item v-if="userType != 2" index="/userLayout/invoice"
            >发票管理</el-menu-item
          > -->
          <el-menu-item v-if="userType != 2" index="/userLayout/integral"
            >我的积分</el-menu-item
          >
          <el-menu-item
            v-if="userType == 1 && realStatus == 2"
            index="/userLayout/account"
            >账户管理</el-menu-item
          >
          <!-- <el-menu-item v-if="userType != 1" index="/userLayout/customize"
            >定制工作台</el-menu-item
          > -->
          <!-- //userLayout/megagame -->
             <el-menu-item v-if="userRole == 2 ||userRole ==3" index="/userLayout/owerdas"
            >我的大赛</el-menu-item
          >
        </el-menu>
        
      </div>
      <section class="user-main">
        <transition name="fade-transform" mode="out-in">
          <router-view :key="dateKey" />
        </transition>
      </section>
    </div>
  </div>
</template>

<script>
import { request } from '@/utils/request'
export default {
  name: 'UserLayout',
  data() {
    return {
      defaultPage: '/project',
      userType: this.$store.getters.userType || 0, // 用户类型（0-个人 1-企业 2-子账户）
      realStatus: this.$store.getters.realStatus || 0, // 实名状态（0-未认证 1-认证中 2-认证通过 3-认证失败）
     userRole:sessionStorage.getItem("userRole"),// 用户角色(0-游客 1-设计师 2-owner 3-评委)
      showView: true,
      dateKey: new Date().getTime(),
    }
  },
  computed: {
    activeIndex() {
      const path = this.$route.path
      if (path === '/userLayout') {
        this.$router.replace({ path: path + this.defaultPage })
      }
      return path
    },
  },
  created() {
  
  },
 mounted(){
 
 },
  methods: {
     
    Select(path) {
      this.dateKey = new Date().getTime()
      // this.$router.replace({ path })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
// @import '@/styles/transition.scss';
.el-menu{
 background-color: rgba($color: #0158a8, $alpha: 0);
}
.user {
 // padding: 10px 0;
  @include w_h(100%, 100%);
  //background: $color_f2;

  .container {
    @include flex(space-between, normal);
    @include w_h(100%, 830px);
   // padding: 0 $pad;
   padding: 0;
    .user-slider {
      @include w_h(180px);
    background-color: rgba($color: #0158a8, $alpha: 0.2);
    }
    .user-main {
      @include w_h(calc(100% - 190px), 100%);
      // max-width: 90%;
      // min-width: 85%;
    }
  }
}
</style>
<style <style lang="scss">
@import '@/styles/variables.scss';
.user-slider {
  .el-menu {
    border: none;
    // background-color: rgba($color: #0158a8, $alpha: 1.0);
 
    &-item {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      text-align: center;
      color: $color_9;
     // color: $color_f;
      &:hover{
      color: $color_9;
      }
      &.is-active {
        color: $color_f;
       // background:#3d70b2;
       // background: $color_on;
        background-color: rgba($color:  $color_on, $alpha: 1);
      }
    }
  }
}
</style>
