<style scoped> 
 .mint-swipe {
  height:8.5rem;
}

.mint-swipe-item img {
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  /* background-size: 100%100%; */
}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{overflow:hidden;_zoom:1;}
.text-gray{color:#717171;}
.text-orange{color:#eb7741;}
.text-danger{color:#c03546;}
.comp-login {background-color:#ECEFF8;height:100%;height:100vh;}
.input-box {background:#FFF;}
.comp-login {padding:0;margin:0;}

.bannerbg{background-image:url('http://image.supercarrier8.com/h5_key/topbanner.png');background-size:100% 100%;background-repeat:no-repeat;height: 6.4rem;}
.maincontainer{margin:0 1rem;}
.container-cate {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-overflow-scrolling: touch;
    margin-bottom:0.5rem;
    padding: 0.5rem 0;
}
 .container-cate .container > div {
    display: inline-block;
}
 .container-cate .container .box {
   margin-right: 2rem;
}
 .container-cate .container div.selected{
   color: #448FFC;border-bottom: 0.2rem solid  #448FFC;
}
#ListOne li{width: 100%;background: #fff; border-radius: 3%; margin-bottom: 0.5rem;text-align: center;} 
#ListOne li img{width: 95%;margin-top: 2%; height:7rem;}
#ListOne li .CourseTitle{text-align: left;padding-left: 0.5rem;padding-top:0.2rem;  padding-bottom: 0.5rem;font-size: 0.8rem;
padding-right: 5%;background: url('http://image.supercarrier8.com/h5_shop/arrow_gray.png');background-repeat: no-repeat;background-position: 96% 44%;background-size: 0.3rem 0.6rem;
}

#ListTwo li{text-align: center; width: 50%;float:left; background: #fff; border-radius: 3%; margin-bottom: 0.5rem;} 
#ListTwo li img{width: 95%;margin-top: 2%; height: 4rem;}
#ListTwo li .CourseTitle{text-align: left;padding-left: 0.3rem; padding-top:0.3rem; padding-bottom: 0.3rem;font-size: 0.8rem;
padding-right: 5%;background: url('http://image.supercarrier8.com/h5_shop/arrow_gray.png');background-repeat: no-repeat;background-position: 96% 44%;background-size: 0.3rem 0.6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul{list-style-type: none;margin: 0;padding: 0;}

</style>
<template> 
  <div class="container comp-login jfBaseSize key_addStore" v-cloak v-bind:style="!vh?'height:100vh':'height: 100%;'"> 
        <div class="swipe-box" v-show="!IsShowListTwo" style="height:8.5rem">
                <mt-swipe :auto="4000">
                    <mt-swipe-item v-for="(item,index) in comp.props.items.val" :key="index">
                        <img class="imgheight" v-bind:src="item.imgUrl">
                    </mt-swipe-item>
                </mt-swipe>
       </div>
       <div class="maincontainer">
        <div class="container-cate">
            <div class="container">
              <div class="box selected" v-on:click="selectCate('',$event)">全部</div>
              <div v-for="item in CateList" :key="item.ID" class="box" v-on:click="selectCate(item.ID,$event)" v-html="item.CategoryName"></div>
            </div>
        </div>
        <!-- <div id="ListOne" v-show="IsShowListTwo">
            <ul>
              <li>
                  <img src="http://image.supercarrier8.com/h5_key/studyCenter/course1.png" class="CourseImg"/>
                  <div class="CourseTitle">如何利用AI技术提效降本</div>
              </li>
              <li>
                  <img src="http://image.supercarrier8.com/h5_key/studyCenter/course2.png" class="CourseImg"/>
                  <div class="CourseTitle">如何通过深度分销帮助快销企业实现销售增长</div>
              </li>
            </ul>
        </div>
        <div id="ListTwo" v-show="!IsShowListTwo">
            <ul>
              <li>
                  <img src="http://image.supercarrier8.com/h5_key/studyCenter/course1.png" class="CourseImg"/>
                  <div class="CourseTitle">如何利用AI技术提效降本</div>
              </li>
              <li>
                  <img src="http://image.supercarrier8.com/h5_key/studyCenter/course2.png" class="CourseImg"/>
                  <div class="CourseTitle">如何通过深度分销帮助快销企业实现销售增长</div>
              </li>
            </ul>
        </div> -->

         <div id="ListOne" v-show="!IsShowListTwo">
            <ul>
              <li v-for="item in CourseList" :key="item.ID" v-on:click="GoToDetail(item.ID,item.StudyType)">
                  <img :src="item.CourseContentFace" class="CourseImg"/>
                  <div class="CourseTitle" v-html="item.CourseName"></div>
              </li>
            </ul>
        </div>
        <div id="ListTwo" v-show="IsShowListTwo">
            <ul>
              <li v-for="item in CourseList" :key="item.ID" v-on:click="GoToDetail(item.ID,item.StudyType)">
                  <img :src="item.CourseContentFace" class="CourseImg"/>
                  <div class="CourseTitle" v-html="item.CourseName"></div>
              </li>
            </ul>
        </div>
      </div>
      <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from "vue";
import ElementUI from "element-ui";
import { Toast,InfiniteScroll } from 'mint-ui';
import {Indicator} from 'mint-ui';
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import { debug } from 'util';
	import ReturnHome from "@/components/channel/temp001/ReturnHome";
import '@/assets/js/libs/js.cookie';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import "element-ui/lib/theme-chalk/index.css";
import MintUI from 'mint-ui';
Vue.use(ElementUI);
export default {
  name: "Key_AddStore",
  props: ["comp", "cfg", "selectedPage"],
  components: {
      BaiduMap,ElementUI,ReturnHome
  },
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  data() { 
    return {
      vh:false,
      CateList:[],
      CourseList:[],
      IsShowListTwo:true
    };
  },
  methods: {
    goPage(pagetype){
        this.$parent.changeSelectedPage(pagetype);
    },
    selectCate(cid,e){
        var that=this;
        that.loadCourseList(cid);
        $(e.target).addClass("selected").siblings().removeClass("selected");
    },
    GoToDetail(id,type){
       var that=this;
       sessionStorage.setItem("studyId",id);
       localStorage.setItem("studyId",id);
       if(type=="1")
       {
          that.goPage("S_CourseD");         
       }else
       {
          that.goPage("S_AnswerD");
       }
    },
    loadCateList()
    {
        var that=this; 
        var url = "/channel/GetCourseCategoryH5";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            UserToken:channelHelper.GetUserToken(),
            LanguageType:channelHelper.GetLanguageType()
        };
        var cbSuccess = function(res){  
            Indicator.close();
            if(res.flag)
             {
                that.CateList=res.data;
             }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,null,null,null)
    },
    loadCourseList(cid)
    {
        var that=this; 
        var url = "/channel/GetCourseListH5";
        var dataParams = {
            EnterpriseNo:that.sup8.context.enterpriseno,
            UserToken:channelHelper.GetUserToken(),
            LanguageType:channelHelper.GetLanguageType(),
            CategoryID:cid,
            OpenObject:that.sup8.context.entranceid
        };
        var cbSuccess = function(res){
            if(res.flag&&res.data)
             {
                if(res.data.Rows.length<3)
                {
                    that.$set(that,'vh',false);
                }
                else
                {
                    that.$set(that,'vh',true);
                }
                that.CourseList=res.data.Rows;
             }
        };
        //请求后端
        channelHelper.CommonCallService(url,dataParams,cbSuccess,null,null,null)
    }
  },
  watch: {
    "comp.props.IsShow.val": function() {
        var that=this; 
        that.IsShowListTwo = (that.comp.props.IsShow.val==1);
    }
  },
  created: function() {
    var that = this;
    try{
      that.IsShowListTwo = (that.comp.props.IsShow.val==1);
    }catch(e){}
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    var eno = that.sup8.context.enterpriseno;
    var isDesign = location.pathname.indexOf('/design');
    if (!channelHelper.CheckLogin(this.$parent,eno,that.sup8.context.entranceid)&&isDesign==-1) {
        this.$parent.changeSelectedPage('Key_Login')
        return false;
    }else if(isDesign!=-1){
        return false;
    }
    Indicator.open();
    that.loadCateList();
    that.loadCourseList();
  },
  mounted: function() {
    var that=this;
    var isDesign = location.pathname.indexOf('design');
    if (!(isDesign>-1)) {
        that.$set(that,'vh',true);
    }else{
        that.$set(that,'vh',false);
    }
    // setTimeout(()=>{
    //     $(".swipe-box").height($(".imgheight").height()+"px");
    // },300);
    setTimeout(()=>{
      let offsetHeight = document.body.offsetHeight;
      let scrollHeight = document.body.scrollHeight;
      this.height = scrollHeight>offsetHeight?scrollHeight+"px":offsetHeight+"px";
    },1000);
      
  }
};
</script>
