<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/>

            <!--专题分类-->
            <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,
        }
    },
    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){
            // alert("11111");
            // alert(parm);
           // let params = JSON.parse(parm);
            _this.systemType = parm.systemType;
            _this.appVersion = parm.appVersion;
            _this.userToken = parm.userToken;
           /// alert(parm.userToken);
            if(!!_this.systemType && !!_this.appVersion){
                _this.getSwiper();
            }
        }
        window.__getStatusBarHeight = function(parm){
            _this.statusBarHeight = parm.statusBarHeight
            //alert(_this.statusBarHeight)
            //alert("状态栏高度"+jp);
        }

        
    },
	mounted(){
        this.listSwiper = [{"picturePath":"https://test-file.yunqueyi.com/image/jpeg/2018/04/18/20180418110556320-5fdbc235.jpg","pictureName":"云鹊医典","pictureIntro":"242","link":"https://test1-phome.yunqueyi.com/psa.js","moduleCode":"M015","type":4,"userRoleList":"R001,R002,R003,R004","params":"0","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.com/File/2.jpeg","shareUrl":"","medicalDisplayType":null,"param1":null,"param2":null},{"picturePath":"https://test-file.yunqueyi.com/image/png/2018/09/18/20180918152451538-0e8f6d4e.png","pictureName":"chc大会","pictureIntro":null,"link":"https://test1-phome.yunqueyi.com/chcNew.js","moduleCode":"M025","type":4,"userRoleList":"R001,R002,R003,R004","params":"https://test1-phome.yunqueyi.com/chcNew.js","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":"chc大会阿萨德发","param2":"阿萨德飞机看看哈看电视发射的健康发哈思考多久发货咳嗽的好达克赛德啊"},{"picturePath":"https://test-file.yunqueyi.com/image/png/2018/10/16/20181016105038941-a77a2121.png","pictureName":"老年病竞赛","pictureIntro":null,"link":"https://dev-phome.yunqueyi.com/gdcHG.js","moduleCode":"M025","type":4,"userRoleList":"R001,R002,R003,R004","params":"https://dev-phome.yunqueyi.com/gdcHG.js","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":null,"param2":null},{"picturePath":"https://test-file.yunqueyi.com/image/png/2018/10/15/20181015105400428-b0715da5.png","pictureName":"眼科专场","pictureIntro":null,"link":"https://test1-phome.yunqueyi.com/ykzc.js","moduleCode":"M025","type":4,"userRoleList":"R001,R002,R003,R004","params":"https://test1-phome.yunqueyi.com/ykzc.js","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":null,"param2":null},{"picturePath":"https://test-file.yunqueyi.com/image/jpeg/2018/10/21/20181021141114910-4349f2bb.jfif","pictureName":"大赛","pictureIntro":null,"link":"https://dev-phome.yunqueyi.com/chcNew.js","moduleCode":"M025","type":4,"userRoleList":"R004","params":"https://dev-phome.yunqueyi.com/chcNew.js","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":null,"param2":null},{"picturePath":"https://test-file.yunqueyi.com/image/png/2018/08/29/20180829153915489-623841ff.png","pictureName":"让前沿科技助力智慧管理","pictureIntro":null,"link":"https://test1-phome.yunqueyi.com/psa.js","moduleCode":"M025","type":4,"userRoleList":"R001,R002,R003,R004","params":"https://test1-phome.yunqueyi.com/psa.js","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":null,"param2":null},{"picturePath":"https://test-file.yunqueyi.com/image/jpeg/2018/10/17/2018101713591225-9fd47e86.jpg","pictureName":"CHC测试大赛风采回顾风采","pictureIntro":null,"link":"https://test-file.yunqueyi.comnull","moduleCode":"M027","type":4,"userRoleList":"R004","params":"0","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":"CHC测试大赛风采回顾风采","param2":"2018年8月由中华医学会、国家心血管中心等联合主办的中国心脏大会 (CHC) 在京举行。\n本次大会汇集了国内外心血管领域的顶尖专家，对心血管科各个疾病的最新临床研究进展，做了精彩的学术报告和经验分享。"},{"picturePath":"https://test-file.yunqueyi.com/image/png/2018/10/16/20181016134846454-1b78fd74.png","pictureName":"学霸带你来学习","pictureIntro":null,"link":"https://test-file.yunqueyi.comnull","moduleCode":"M020","type":4,"userRoleList":"R001,R002,R003,R004","params":"https://test1-phome.yunqueyi.com/comp.js","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":null,"param2":null},{"picturePath":"https://test-file.yunqueyi.com/image/png/2018/09/27/20180927140657640-d507fd69.png","pictureName":"奥测未来，精准之测","pictureIntro":null,"link":"https://test1-phome.yunqueyi.com/nde.js","moduleCode":"M025","type":4,"userRoleList":"R001,R002,R003,R004","params":"https://test1-phome.yunqueyi.com/nde.js","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":null,"param2":null},{"picturePath":"https://test-file.yunqueyi.com/image/jpeg/2018/10/15/2018101513463874-239e7499.jpg","pictureName":"链接测试","pictureIntro":null,"link":"http://10.177.10.121:8080/web/index.html#/gpranking","moduleCode":"","type":1,"userRoleList":"R001,R002,R003,R004","params":"0","hasBannerDetail":0,"bannerPicPath":"https://test-file.yunqueyi.comnull","shareUrl":"","medicalDisplayType":null,"param1":null,"param2":null}]
        window.addEventListener('scroll', this.scrollFun);
        this.getUserInfo();
        this.getStatusHight();
        this.getUpdateData();
       
        this.getMiddel();
    },

    beforeDestroyed(){
        window.removeEventListener('scroll', this.scrollFun)
    },
    watch:{
        //监听是否收起
        isShowEvluat:function(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)
            },5000);
           
           
        },

        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(){
            //version=3.7.3&systemType=3&token=364ED1F1C8064CEBABF745CFFFDE18CF
            let _this = this, 
            para = {
                version:_this.appVersion,
                systemType:_this.systemType,
                token:_this.userToken
            }
            //alert("000");

            this.GET('contents/carusels/home', para).then(res => {
                if(res.respCode == '200'){
                    ///alert("res");
                    _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{
                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>
