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

        <section class="home-header">
            <div class="home-topMenu">
                <YqyHomeHeader :msgCount="msgCount" :searchFix="searchFix" :statusBarHeight="statusBarHeight"/>
            </div>
            <div class="swiper">
                <mt-swipe :auto="0" :speed="speedSwiper">
                    <mt-swipe-item v-for="(item,index) in listSwiper" :key="index" >
                        <img :src="item.picturePath" @click="goLinkByswiper(item)"/>
                    </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" v-for="(item,index) in listMiddle" :style="index%2==1?'margin-right: 0':''" @click="goToPatholo(item)">
                    <span class="pathologic-icon">
                        <img :src="item.imageUrl"/>
                    </span>
                    <span class="pathologic-txt fs14">{{item.name}}</span>
                </div>
               
                <div class="clear"></div>
            </div>
            
            <!--继续学习-->
            <YqyHomeKeepon :userMobile="userMobile"/>

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

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

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

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

            <a class="news-update" @click="goAnchors" v-show="showNewCorse">
                <span class="news-info">
                    {{updateTotal}}个新内容
                    <i></i>
                </span>
            </a>
        </section>
    </section>
</template>

<script>
import { Swipe, SwipeItem ,Header} from 'mint-ui';
// import { setEventByModuleCode } from '@/utils/index'
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:false, // 是否显示新内容 默认不显示
            isFixed:false,
            isShowBackTop:false,
            isShowEvluat:true,//是否显示下拉
            isBodyPull:false,
            speedSwiper:20,
            stopPropagation:true,
            isIntStyle:'',
            listSwiper:[],//轮播图数据
            listMiddle:[],//中间栏数据
            scrollTimer:null,
            scrollTop:0,
            hideNewCourse:true,
            updateTotal:0,
            msgCount:'',
            systemType:'',
            appVersion:'',
            userToken:'',
            searchFix:false,
            statusBarHeight:20,
            userMobile:''
        }
    },
    components:{
        Header,
        Swipe,
        SwipeItem,
        BackTop,
        YqyTopEvaluat,
        YqyTeacherList,
        YqyHomeHeader,
        YqyHomeAdv,
        YqyFiveMinutes,
        YqyCategoryThree1,
        YqyHomeBanner,
        YqyHomeKeepon,
        YqyHomePorter,
        YqyHomeAdjust
    },
    created () {
        let _this = this;
        window.__nativeCallMsg = function(params){
             _this.msgCount = params.msgNum || '';
        }

        window.__getUserInfo = function(parm){
           ///userMobile userName userToken systemType(Andriod: 1, iOS: 2) appVersion doctorId
            _this.systemType = parm.systemType;
            _this.appVersion = parm.appVersion;
            _this.userToken = parm.userToken;
            _this.userMobile = parm.userMobile;
          
            if(!!_this.systemType && !!_this.appVersion){
                _this.getSwiper();
            }
        }
        window.__getStatusBarHeight = function(parm){
            _this.statusBarHeight = parm.statusBarHeight
        }

        
    },
	mounted(){
      
        window.addEventListener('scroll', this.scrollFun);
        this.getUserInfo();
        this.getStatusHight();
        this.getUpdateData();
       
        this.getMiddel();
       // this.getSwiper();
    },

    beforeDestroyed(){
        window.removeEventListener('scroll', this.scrollFun)
    },
    watch:{
        //监听是否收起
        isShowEvluat:function(n){
            ///alert(n);
            if(!n && this.isIntStyle == 'font-style pull-up'){
                ///alert("000");
                rocNative.setTabMiniIcon({
                    tabIndex:3,
                    iconTitle:'学习评价',
                    iconColor:'#6c6c6c',
                    isSet:true

                })
            }
        }
    },

    methods:{
        //获取状态栏高度
        getStatusHight(){
            rocNative.getStatusBarHeight({
                __funcName: '__getStatusBarHeight'
            })
            
        },

        //获取版本号
        getUserInfo(){
            rocNative.getUserInfo({
                __funcName: '__getUserInfo'
            })
        },

        //轮播图跳转
        goLinkByswiper(item){
            ///alert("0000");
           // console.log(item);
            this.pageBurialPoin({
                menuLevel:1,
                menuCode:'m_home',
                functionCode:'f_banner',
                actionCode:'c_banner',
               // labelId:item.id,
                
            })

            let itemData = {
              "title":item.name,
              "imageUrl":"",
              "appModuleInfo":{
                  "code":"M100",
                  "type":4,
                  "name":"名师风采个人展示",
                  "paramFlag":1,
                  "paramList":[
                      {
                          "key":"jsName",
                          "value":item.link,
                          "type":4,
                          "seqNo":1
                      },
                      // {
                      //     "key":keyName,
                      //     "value":`${item.link}`,
                      //     "type":1,
                      //     "seqNo":2
                      // }
                  ]
              }
            };
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
            
        },

        //有更新数据
        getUpdateData(){
            let _this = this, 
            para = {
  
                token:_this.token,
                setEntry: 'headers'
            }
            //alert("000");
            this.GET('contents/courses/queryCourseCount', para).then(res => {
                if(res.code == '000000'){
                    if(res.data != null){
                        _this.updateTotal = res.data.courseCount + res.data.fiveHospCount;
                        _this.showNewCorse = _this.updateTotal > 0 ? true : false
                    }
                    
                }
            })
        },

        goAnchors(){
            
            document.documentElement.scrollTop = document.querySelector('#new-course').offsetTop;
            document.body.scrollTop = document.querySelector('#new-course').offsetTop;
            ///alert("000");
            this.hideNewCourse = false;
            this.showNewCorse = false;


        },

        scrollEndFun(){
            let scrollTop =  document.body.scrollTop  || document.documentElement.scrollTop;
      
            if(this.scrollTop != scrollTop){
                this.showNewCorse = false;
            }else{
                //alert("000");
                if(this.updateTotal.length>0){
                    this.showNewCorse = true;
                }
                
            }
        },

        scrollFun(){
            let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            this.showNewCorse = false;
            
            if(this.hideNewCourse){
                this.scrollTop = scrollTop;
                clearTimeout(this.scrollTimer);
                this.scrollTimer = setTimeout(this.scrollEndFun, 200);
            }
           

            if( this.isIntStyle == 'font-style pull-down'){
                this.isIntStyle = 'font-style pull-up';
                this.isShowEvluat = false;
            }
            //滚动条滚动到最新课程
            var newCourseTop = document.querySelector('#famus-teacher').offsetTop;
            var clientHeight = document.querySelector('#famus-teacher').clientHeight;
            var adjustTop = document.querySelector('#adjust-u').offsetTop;
            var searchBox = document.querySelector('#search-top').offsetParent.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  > searchBox){
             ///console.log(scrollTop,searchBox);
                this.searchFix = true;
            }else{
                this.searchFix = false;
            }
            if(scrollTop+30 >= adjustTop){
                this.isFixed = true;
            }else{
                this.isFixed = false;
            }

        },

        //五秒之后收起
        fiveTimePull(){
            let _this = this;
           let setTimer = setInterval(function(){
                _this.isIntStyle = 'font-style pull-up';
                _this.isShowEvluat = false;
                clearInterval(setTimer)
            },20000);
           
           
        },

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

        //获取轮播图数据
        getSwiper(){
            // let version =  '3.7.3',
            // systemType = 3,
            // token = '364ED1F1C8064CEBABF745CFFFDE18CF'
            let _this = this, 
            para = {
                version:_this.appVersion,
                systemType:_this.systemType,
                token:_this.userToken,
                data:{
                    setEntry: 'headers'
                }   
            }
            //  para = {
            //     version:version,
            //     systemType:systemType,
            //     token:token,
            //     //setEntry: 'headers',
            //     data:{
            //         setEntry: 'headers'
            //     }
                
            // }
            this.API_GET('contents/carusels/home', para).then(res => {
                if(res.respCode == '200'){
                    _this.listSwiper = res.pcfList || []
                }
            })
        },

        //中间栏数据
        getMiddel(){
            let _this = this, 
            para = {
                category: 1, 
                position:2,
                setEntry: 'headers'
            }
            this.GET('contents/HomeColumn/Information', para).then(res => {
                if(res.code == '000000'){
                   // console.log(res);
                    _this.listMiddle = res.data && res.data.iconColumnInformationModels || []
                }
            })
        },

        //中间栏跳转
        goToPatholo(itemData){
            this.pageBurialPoin({
                menuLevel:1,
                menuCode:'m_home',
                functionCode:'f_middle',
                actionCode:'c_field',
                labelId:itemData.id,
                labelvalue:itemData.name,
            })
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
        },
     
    },
}

</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-item img{
        width: 100%;
        height: 100%;
    }
   .swiper .mint-swipe-indicator{
        width:2px;
        height: 8px;
        background: #fff;
        opacity: 0.4;
        float: left;
        margin-top:3px;
    }
    .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(140px);
        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;
        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{
                
                height:  px2rem(20px);
                img{
                    width:  px2rem(20px);
                    height:  px2rem(20px);
                    vertical-align: middle;
                    display: inline-block;
                }
            }
            .pathologic-txt{
                font-size: px2rem(14px);
                line-height:  px2rem(20px);
                font-weight: 700;
                display: inline-block;
                vertical-align: middle;
            }
        }
        .clear{
            clear: both;
        }
    }

</style>
