<template>
  <section class="app-main xuc-content">
    <div style="display: flex;">
      <div style="height: 100%;width: 210px;">
        <uc-menu></uc-menu>
        <!-- <div style="height: 20px;"></div> -->
      </div>
      <!-- width: 990px; -->
      <div class="main-body" :style="{
             backgroundColor: bgColor,
             padding
            }" style="flex:1; margin-left: 20px;">
        <!-- <div style="margin-bottom: 10px;padding:10px; border-bottom: 1px solid #dbdbdb;"> -->
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/uc/index' }"><i class="el-icon-arrow-right"></i>个人中心</el-breadcrumb-item>
            <el-breadcrumb-item>{{breadcrumbName}}</el-breadcrumb-item>
          </el-breadcrumb> -->
        <!-- </div> -->
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="cachedViews">
            <div :style="{
             backgroundColor: bgColor
            }" style="min-height: 600px;padding-bottom: 50px;">
            <router-view :key="key" />
            </div>
          </keep-alive> 
        </transition>
      </div>
    </div>

  </section>
</template>

<script>
  import ucMenu from '@/components/UserCenter/menu.vue'
export default {
  name: 'AppMain',
  components:{ucMenu},
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    breadcrumbName(){
      return this.$route.meta.title;
    },
    key() {
      console.log(this.$route)
      return this.$route.path
    },
    bgColor() {
     return this.$route.path === "/growth/growthPage" ? "rgba(0,0,0,0)" : "#fff";
    },
    padding(){
      return this.$route.path === "/growth/growthPage" ? "0" : "30px 20px";
    }
  }
}
</script>

<style lang="scss" scoped>
.upicon{
  text-align: center;
  margin-top: 10px;
  i{font-size: 30px;color: #ffaa00;}
  div{color: #565656;padding: 5px 0px 10px 0px;}
}
.app-main {
  /* 50= navbar  50  */
  //min-height: calc(100vh - 50px);
  // min-width: 1366px;
  // max-width: 1500px;
  //width: 1500px;
  // width: 1000px;
  // margin: 0 auto;
  padding-top: 20px;
  position: relative;
  overflow: hidden;
}
.main-body{
  width: calc(100% - 210px);
}
.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
.uc-menu{
  padding: 5px;
  margin: 5px 10px;
  .uc-menu-header{
    font-size: 16px;
    color:#757575;
    padding: 10px;
    border-bottom: 1px solid #ececec;
  }

}
.uc-menu-item{
  padding: 5px;
  text-align: center;
  display: block;
  margin: 5px 10px;
}
.xuc-content{
  margin: 0px auto;
}
@media screen and (max-width: 1366px){
  .xuc-content {
    width: 1100px;
  }
}
@media screen and (max-width: 1680px) and (min-width:1367px){
  .xuc-content {
    width: 1300px;
  }
}
@media screen and (max-width: 1920px) and (min-width: 1681px){
  .xuc-content {
    width: 1600px;
  }
}

@media screen and (min-width: 1921px){
  .xuc-content {
    width: 1800px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
