<template>
 <div class="category">
   <header class="g-header-container">
     <category-header/>
   </header>
   <div class="g-content-container">
     <div class="sidebar">
       <category-tab @switch-tab="getCurrentId"></category-tab>
     </div>
     <div class="main">
       <category-content :curId="curId"></category-content>
     </div>
   </div>
 </div>
</template>

<script>
 import CategoryHeader from './header';
 import CategoryTab from './tab';
 import CategoryContent from './content';

 export default {
   name: 'Category',
   components: {
     CategoryHeader,
     CategoryTab,
     CategoryContent
   },
   data() {
     return {
       curId: ''
};
   },
   methods: {
     getCurrentId(id) {
       console.log('id = ', id);
       this.curId = id;
     }
   }
 };
</script>

<style lang="scss" scoped>
 @import "~assets/scss/mixins";

 .category {
   overflow:hidden;
   width:100%;
   height:100%;
   background-color: $bgc-theme;
 }

 .g-content-container {
   display: flex;
 }
 .sidebar {
   width: 80px;
   height: 100%;
 }
 .main {
   flex: 1;
   height: 100%;
 }
</style>

<template>
 <me-scroll :scrollbar="false">
   <ul class="tab">
     <li :class="{'tab-item-active':curId===item.id}" class="tab-item" v-for="(item,index) in items" :key="index" @click="swichTab(item.id)">
       {{item.name}}
</li>
   </ul>
 </me-scroll>
</template>

<script>
 import MeScroll from 'base/scroll';
 import {categoryNames} from './config';
 export default {
   name: 'CategoryTab',
   components: {
     MeScroll
   },
   data() {
     return {
       curId: ''
};
   },
   methods: {
     init() {
       this.items = categoryNames;
       this.swichTab(this.items[0].id);
     },
     swichTab(id) {
       if (this.curId === id) {
         return;
       }
       this.curId = id;
       this.$emit('switch-tab', id);
     }
   },
   created() {
     this.init();
   }

 };
</script>

<style lang="scss" scoped>
 @import "~assets/scss/mixins";

 $tab-item-height: 46px;

 .tab {
   width: 100%;

   &-item {
     height: $tab-item-height;
     background-color: #fff;
     border-right: 1px solid $border-color;
     border-bottom: 1px solid $border-color;
     color: #080808;
     font-size: $font-size-l;
     font-weight: bold;
     text-align: center;
     line-height: $tab-item-height;
     @include ellipsis();

     &:last-child {
       border-bottom: none;
     }
   }

   &-item-active {
     background: none;
     border-right: none;
     color: #f23030;
   }
 }
</style>

<template>
 <div class="content-wrapper">
   <div class="loading-container">
     <!--<me-loading/>-->
<div class="loading-wrapper" v-if="isLoading">
       <me-loading/>
     </div>
   </div>
   <me-scroll ref="scroll" :scrollbar="true">
     <div class="content">
       <div class="pic" v-if="content.banner">
         <a :href="content.banner.linkUrl" class="pic-link">
           <img @load="updateScroll" :src="content.banner.picUrl" alt="" class="pic-img">
         </a>
       </div>
       <div class="section" v-for="(section,index) in content.data" :key="index">
         <h4 class="section-title">{{section.name}}</h4>
         <ul class="section-list">
           <li v-for="(item,i) in section.itemList" :key="i"
class="section-item">
             <a :href="item.linkUrl" class="section-link">
               <p class="section-pic" v-if="item.picUrl">
                 <img v-lazy="item.picUrl" alt="" class="section-img" />
               </p>
               <p class="section-name"></p>
             </a>
           </li>
         </ul>
       </div>
     </div>
   </me-scroll>
   <div class="g-backtop-container">
     <me-backtop @backtop="backToTop" :visible="isBacktopVisible"/>
   </div>
 </div>
</template>

<script>
 import MeLoading from 'base/loading';
 import MeScroll from 'base/scroll';
 import MeBacktop from 'base/backtop';
 import {getCategoryContent} from 'api/category';
 // import storage from 'assets/js/storage';
 // import {CATEGORY_CONTENT_KEY, CATEGORY_CONTENT_UPDATE_TIME_INTERVAL} from './config';

export default {
   name: 'CategoryContent',
   components: {
     MeLoading,
     MeScroll,
     MeBacktop
   },
   props: {
     curId: {
       type: String,
       default: ''
}
   },
   data() {
     return {
       content: {},
       isBacktopVisible: false,
       isLoading: false
};
   },
   watch: {
     curId(id) {
       this.isLoading = true;
       this.getContent(id).then(() => {
         this.isLoading = false;
         this.backToTop(0);
       });
     }
   },
   methods: {
     backToTop(speed) {
       this.$refs.scroll && this.$refs.scroll.scrollToTop(speed);
     },
     updateScroll() {
       this.$refs.scroll && this.$refs.scroll.update();
     },
     getContent(id) {
       return getCategoryContent(id).then((data) => {
         this.content = data;
       });
     }
   }
 };
</script>

<style lang="scss" scoped>
 @import "~assets/scss/mixins";

 .content-wrapper {
   position: relative;
   height: 100%;
 }

 .loading-container {
   position: absolute;
   top: 0;
   left: 0;
   z-index: $category-popup-z-index;
   @include flex-center();
   width: 100%;
   height: 100%;
   /*background-color: $modal-bgc;*/

.mine-loading {
     color: #fff;
     font-size: 14px;
   }
 }
 .loading-wrapper {
   width: 50%;
   padding: 30px 0;
   background-color: $modal-bgc;
   border-radius: 4px;
 }

 .content {
   padding: 10px;
 }

 .pic {
   margin-bottom: 12px;

   &-link {
     display: block;
   }

   &-img {
     width: 100%;
   }
 }

 .section {
   margin-bottom: 12px;

   &:last-child {
     margin-bottom: 0;
   }

   &-title {
     height: 28px;
     line-height: 28px;
     color: #080808;
     font-weight: bold;
   }

   &-list {
     display: flex;
     flex-wrap: wrap;
     background-color: #fff;
     padding: 10px 10px 0;
   }

   &-item {
     width: (100% / 3);
   }

   &-link {
     display: block;
   }

   &-pic {
     position: relative;
     width: 80%;
     padding-bottom: 80%;
     margin: 0 auto;
   }

   &-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }

   &-name {
     height: 36px;
     line-height: 36px;
     text-align: center;
     @include ellipsis();
   }
 }
 .g-backtop-container {
   bottom: 10px;
 }

</style>

我傻了，懵逼中