<template>
  	<section :class="isIntStyle">
        <!--展开收起学习评价-->
        <YqyTopEvaluat :isShowEvluat="isShowEvluat" v-if="isShowEvluat" v-on:evluatFun="getEluatFun"/>

        <section class="home-header">
            <div class="home-topMenu">
                <YqyHomeHeader/>
            </div>
            <div class="swiper">
                <mt-swipe :auto="0">
                    <mt-swipe-item>
                        <img src="../../images/552064153@2x.png"/>
                    </mt-swipe-item>
                    <mt-swipe-item>
                        <img src="../../images/552064153@2x.png"/>
                    </mt-swipe-item>
                </mt-swipe>
            </div>
        </section>
        <section class="home-body">
            <YqyHomeBanner/>

            <div class="pathologic-list">
                <div class="pathologic-item">
                    <span class="pathologic-icon">
                        <img src="../../images/G@2x.png"/>
                    </span>
                    <span class="pathologic-txt fs14">高血压全解析</span>
                </div>
                <div class="pathologic-item" style="margin-right: 0">
                    <span class="pathologic-icon">
                        <img src="../../images/G3x.png"/>
                    </span>
                    <span class="pathologic-txt fs14">高血压全解析</span>
                </div>
                <div class="clear"></div>
            </div>
            
            <!--继续学习-->
            <YqyHomeKeepon/>

            <!--专题分类-->
            <YqyCategoryThree1/>

            <!--健康守门人-->
           <!--  <YqyHomePorter/> -->
            
            <!--云雀名师-->
            <YqyHomeAdv/>

             <!--最新课程-->
            <YqyTeacherList/>
            
            <!--分钟医学院-->
            <YqyFiveMinutes/>
            
            <!--为你推荐-->
            <YqyHomeAdjust :isFixed="isFixed"/>

            <!--返回顶部-->
            <BackTop v-if="isShowBackTop"/>

            <a class="news-update" href="#new-course" v-if="showNewCorse">
                <span class="news-info">
                    10个新内容
                    <i></i>
                </span>
            </a>
        </section>
    </section>
</template>

<script>
import { Swipe, SwipeItem ,Header} from 'mint-ui';
import BackTop from '../../components/common/backTop';
import YqyTeacherList from '../../components/business-new/yqy-teacher-list';
import YqyTopEvaluat from '../../components/business-new/yqy-home-learn-evaluation';
import YqyHomeHeader from '../../components/business-new/yqy-home-header';
import YqyHomeAdv from '../../components/business-new/yqy-home-adv';
import YqyFiveMinutes from '../../components/business-new/yqy-five-minutes';
import YqyCategoryThree1 from '../../components/business-new/yqy-category-three-1';
import YqyHomeBanner from '../../components/business-new/yqy-home-banner';
import YqyHomeKeepon from '../../components/business-new/yqy-home-keepon';
import YqyHomePorter from '../../components/business-new/yqy-home-porter';
import YqyHomeAdjust from '../../components/business-new/yqy-adjust';
export default {
    data(){
        return {
            showNewCorse:true, // 是否显示新内容 默认显示
            isFixed:false,
            isShowBackTop:false,
            isShowEvluat:true,//是否显示下拉
            isBodyPull:false,
            isIntStyle:'',
        }
    },
    components:{
        Header,
        Swipe,
        SwipeItem,
        BackTop,
        YqyTopEvaluat,
        YqyTeacherList,
        YqyHomeHeader,
        YqyHomeAdv,
        YqyFiveMinutes,
        YqyCategoryThree1,
        YqyHomeBanner,
        YqyHomeKeepon,
        YqyHomePorter,
        YqyHomeAdjust
    },
	mounted(){

        window.addEventListener('scroll', this.scrollFun);
        this.init()
    },

    computed:{
    },
    beforeDestroyed(){
      window.removeEventListener('scroll', this.scrollFun)
    },

    methods:{
        scrollFun(){
            var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;

            //document.body.scrollTop + document.documentElement.scrollTop
        
            //滚动条滚动到最新课程
            var newCourseTop = document.querySelector('#famus-teacher').offsetTop;
            var clientHeight = document.querySelector('#famus-teacher').clientHeight;
            var adjustTop = document.querySelector('#adjust-u').offsetTop;
            //console.log(newCourseTop);
            if(scrollTop +clientHeight/2 >= newCourseTop){
                //alert('scrollTop:'+scrollTop+'newCourseTop:'+newCourseTop);
                this.showNewCorse = false;
                this.isShowBackTop = true;
            }else{
                this.isShowBackTop = false;
            }
            if(scrollTop  >= adjustTop){
                this.isFixed = true;
            }else{
                this.isFixed = false;
            }

        },

        getEluatFun(obj){
            console.log(obj);
            if(obj.isPull == '1'){
               this.isIntStyle =  'font-style pull-down'
            }else if(obj.isPull == '2'){
                this.isIntStyle = ''
            }else if(obj.isPull == '0'){
                this.isIntStyle = 'font-style pull-up'
            }
        },

        init() {

            // this.API_GET('contents/homeButton/msg', {}).then( res => {
            //     logger.debug(res)
            //     this.$log.debug(res)
            // })
            // //console.log(this);
            // let para = {
            //     sysCode: 27, 
            //     token: this.token,
            //     setEntry: 'headers'
            // }
            // this.GET('analysis/activityDetail', para).then( res => {
            //     logger.debug(res)
            // })
            // para = {
            //     sysCode: 27, 
            //     rankingType: 27,
            //     flag: 1,
            //     token: this.token,
            //     setEntry: 'headers'
            // }
            // this.GET('exams/rankings', para).then( res => {
            //     logger.debug(res)
            // })
         
        },
        pushView : function(page){
            console.log('pushView');
            rocNative.pushView({
                url : page
            }).then(function(res) {
                console.log('pushView then' + JSON.stringify(res));
            }).catch(function(res){
                console.log('pushView catch' + JSON.stringify(res));
            });
        },
        goBack: function (msg) {
            console.log('goBack');
            rocNative.goBack()
            .then(function(res) {
                console.log('goBack then' + JSON.stringify(res));
            }).catch(function(res){
                console.log('goBack catch' + JSON.stringify(res));
            });
        },
        toast : function(msg){
            console.log('toast');
            rocNative.toast({
                msg: msg
            }).then(function(res) {
                console.log('toast then' + JSON.stringify(res));
            }).catch(function(res){
                console.log('toast catch' + JSON.stringify(res));
            });
        },
    },
}

</script>
<style>
    .swiper .mint-swipe-indicators{
        right: 6px;
        top:50%;
        bottom: inherit;
        left:inherit;
        width:10px;
        text-align: center;
        transform: translateX(0%);
        transform: translateY(-50%);
    }
   .swiper .mint-swipe-indicator{
        width:2px;
        height: 8px;
        background: #fff;
        opacity: 0.4;
    }
    .swiper .is-active{
        opacity: 1;
    }
</style>
<style lang="scss" scoped>
    @import '../../style/mixin';
    .mint-header {
        background-color: rgba($color: #000000, $alpha: 0)
    }
    .font-style {
        @include sc(0.6rem, #666);
    }
    .top-evaluat{
       
    }
    @keyframes myPullDown{
        from {padding-top: 0;}
        to {padding-top:px2rem(225px)}
    }
    @keyframes myPullUp{
        from {padding-top: px2rem(225px);}
        to {padding-top:0}
    }
    .pull-down{
        animation: myPullDown 1.2s;
        padding-top:px2rem(225px)
    }
    .pull-up{
        animation: myPullUp 1.2s;
        padding-top:0
    }
    .news-update{
        display: block;
        position: fixed;
        background: #F9F6EF;
        right: 0;
        bottom: px2rem(100px);
        height: px2rem(27px);
        padding:0 px2rem(12px);;
        line-height: px2rem(27px);
        border:1px solid RGBA(162, 129, 60, 0.2);
        font-size:  px2rem(13px);
        box-shadow: 0 px2rem(2px) px2rem(3px) RGBA(202, 168, 97, 0.4);
        border-radius: px2rem(14px) 0 0 px2rem(14px);
        z-index: 101;
        .news-info{
            color: #A2813C;
            position: relative;
            display: inline-block;
            i{
                position: absolute;
                right: -(px2rem(6px));
                top:px2rem(4px);
                display: inline-block;
                width: px2rem(4px);
                height: px2rem(4px);
                border-radius: 100%;
                background: #F47A48
            }
        }
        
    }
    .home-topMenu{
        width: 100%;
        text-align:center;
        top:0.84375rem;
        position: absolute;
        z-index: 10;
    }

    .home-header {
        height: px2rem(202px);
        .swiper{
            height: 100%;
           /* @include bis('../../images/552064153@2x.png');*/
        }
        

        .logo_img{
            height: px2rem(85px);
            width: px2rem(345px);
            text-align: center;
        }
    }
    .home-body{
        background: #fff
    }
    .pathologic-list{
        width: 100%;
        
        padding: 0 px2rem(15px);
        margin-top:  px2rem(15px);
        .pathologic-item{
            float: left;
            width:48%;
            box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
            border-radius: px2rem(3px);
            background: #fff;
            padding: px2rem(12px) 0 px2rem(12px) 0;
            margin-right: 4%;
            text-align: center;
            .pathologic-icon{
                vertical-align: middle;
                img{
                    width:  px2rem(20px);
                    height:  px2rem(20px);
                }
            }
            .pathologic-txt{
                font-size: px2rem(14px);
                line-height:  px2rem(20px);
                font-weight: 700;
                display: inline-block;
                vertical-align: middle;
            }
        }
        .clear{
            clear: both;
        }
    }

</style>
