<template>
    <div class="main-body" ref="wrapper">
        <section class="home-header">
            <div class="home-topMenu">
                <YqyHomeHeader :searchFix="searchFix"/>
            </div>
            <div class="swiper">
                <mt-swipe :auto="3000" :speed="speedSwiper" :stopPropagation="prevent">
                    <mt-swipe-item v-for="(item, index) in listSwiper" :key="index" >
                        <img :src="item.imageUrl" @click="goLinkByswiper(item)"/>
                    </mt-swipe-item>
                </mt-swipe>
            </div>
        </section>

        <!-- 热门讲师 -->
        <YqyHotLecturer />

        <!-- 讲师标题 -->
        <YqyLecturerTitle/>

        <!-- 讲师选择标题 -->
        <YqyLecturerSelect 
            @selectedType="selectedTypeFromTitle" 
            :selectedAreaName="selectedTitleTitle"
            :selectedLevelName="selectedLevelName"
            :selectedDepartName="selectedDepartName"
            />

        <!-- 讲师排序 -->
        <YqyLecturerOrder groupTitle="全部讲师" @order="orderAction"/>

        <!-- 讲师列表 -->
        <YqyTeacherList :parmData="parmDataDoctList"/>

        <!-- 讲师选择组件 - 弹框 -->
        <YqyLecturerSelectContent
        ref="lecturerSelContRef" 
        :isShowSelectionB="showSelectedPage"
        @selectedData="selectedLecturerList"
        />
        
        <!--返回顶部-->
        <BackTop v-if="searchFix"/>
    </div>
  	
</template>

<script>
import { Swipe, SwipeItem} from 'mint-ui';
import {mapState, mapMutations, mapActions} from 'vuex'
import BackTop from '@/componentsn/business/backTop';
import YqyHomeHeader from '@/componentsn/business/yqy-home-header';
import YqyLecturerTitle from '@/componentsn/business/yqy-lecturer-title';
import YqyLecturerSelect from '@/componentsn/business/yqy-lecturer-select';
import YqyLecturerOrder from '@/componentsn/business/yqy-lecturer-order';
import YqyLecturerSelectContent from '@/componentsn/business/yqy-lecturer-select-content';
import YqyHotLecturer from '@/componentsn/business/yqy-hot-lecturer';
import YqyTeacherList from '@/componentsn/business/yqy-teacher-list'
export default {
    data(){
        return {
            showSelectedPage: false,
            parmDataDoctList: [],
            selectedTypeIndex: 1,
            prevent: true,
            isShowBackTop: false,
            speedSwiper: 300,
            //轮播图默认数据
            listSwiper: [{
                "imageUrl": require('../../images/lecturer/750420-1.png')
            },{
                "imageUrl": require('../../images/lecturer/750420-1.png')
            },{
                "imageUrl": require('../../images/lecturer/750420-1.png')
            },{
                "imageUrl": require('../../images/lecturer/750420-1.png')
            },{
                "imageUrl": require('../../images/lecturer/750420-1.png')
            }],
            scrollTimer: null,
            scrollTop: 0,
            userToken: '',
            searchFix: false,
            statusBarHeight: 0,
            userMobile: '',
            isFailSwiper: 1,
            selectedTitleTitle: '全国',
            selectedAreaName: '全国',
            selectedAreaSubName: '',
            selectedLevelName: '全部等级',
            selectedDepartName: '全部科室',
        }
    },
    components:{
        Swipe,
        SwipeItem,
        BackTop,
        YqyHomeHeader,
        YqyLecturerTitle,
        YqyLecturerSelect,
        YqyLecturerOrder,
        YqyLecturerSelectContent,
        YqyHotLecturer,
        YqyTeacherList,
    },
    computed: {
        selectedTitle() {
           return this.selectedTypeIndex === 1 ? '选择地区' : this.selectedTypeIndex === 2 ? '选择等级' : '选择科室'
        }
    },
    beforeCreate() {
    },
    created () {
        let _this = this;
        _this.initAll()
        _this.getUserInfo();

        // window.__refresh = function(params){
            
        // }

        window.__getStatusBarHeight = function(parm){
        //    alert(JSON.stringify(parm))
            _this.statusBarHeight = parm.statusBarHeight;
        }

       // alert("token之前");
        window.__getUserInfo = function(parm){
            // _this.systemType = parm.systemType;
            // _this.appVersion = parm.appVersion;
            // _this.token = parm.userToken;
            // _this.userToken = parm.userToken;
            // _this.userMobile = parm.userMobile;

            // _this.initByToken(parm.userToken);
        }
        // _this.getStatusHight()

        //   _this.initByToken('593F679F62964076AF1C7489DA3343ED');
        
    },

    beforeMount() {
        
    },
	mounted(){
        window.addEventListener('scroll', this.scrollFun);
    },

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

    methods: {
        // 排序
        orderAction(orderName, isSortUp) {
            let orderType = isSortUp ? -1 : 1
            let orderData = this.parmDataDoctList.slice()
            orderData.sort((a, b)=> {
                if (orderName === 'doctorFirstNameChar') {
                    return (a[orderName].charCodeAt(0) - b[orderName].charCodeAt(0)) * orderType
                } else if(orderName === 'newTime') {
                    if(isSortUp) {
                        return ((new Date(a[orderName]).getTime())/1000 > (new Date(b[orderName]).getTime())/1000) ? 1 : -1
                    } else {
                        return ((new Date(a[orderName]).getTime())/1000 < (new Date(b[orderName]).getTime())/1000) ? 1 : -1
                    }
                } else {
                    return (a[orderName] - b[orderName]) * orderType
                }
            })
            this.parmDataDoctList = orderData
        },

        // 选择器组件回调
        selectedLecturerList(paramList, selectedTitle, selectedLevelName, selectedDepartName) {
            this.parmDataDoctList = paramList
            this.selectedTitleTitle = selectedTitle
            this.selectedLevelName = selectedLevelName
            this.selectedDepartName = selectedDepartName
        },
        // 选择标题组件
        selectedTypeFromTitle(index) {
            this.selectedTypeIndex = index
            this.$refs.lecturerSelContRef.selectedType(index)
            this.$refs.lecturerSelContRef.show()
        },
        // 请求数据
        initAll(){
            this.getSwiper()
            this.getYqDoctorDataByCD()
        },

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

        //获取用户信息及版本号等（）
        getUserInfo(){
            rocNative.getUserInfo({
                __funcName: '__getUserInfo'
            })
        },

        //轮播图跳转
        goLinkByswiper(itemData){
            this.pageBurialPoin({
                menuLevel:1,
                menuCode:'m_home',
                functionCode:'f_banner',
                actionCode:'c_banner',
                labelId:itemData.id,
                labelValue:itemData.name
                
            })
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
        },

        //根据条件获取讲师列表
        getYqDoctorDataByCD(){
            let _this = this,
            para = {
                provinceId: 0,
                cityId: 0,
                countyId: 0,
                levelGrade: 0,
                departmentId: 0,
                setEntry: 'headers'
            }
            this.GET('contents/courseDoctor/v1/getAllTeacher', para).then(res => {
                if(res.code == '000000'){
                    _this.parmDataDoctList = res.data && res.data.list || []
                    _this.orderAction('doctorFirstNameChar', true)
                }
            })
        },

        scrollEndFun(){
            let scrollTop =  document.body.scrollTop  || document.documentElement.scrollTop;
            // let newCourseTop = document.querySelector('#famus-teacher').offsetTop;
            // let fivesTop = document.querySelector('#fiveBoxMenu').offsetTop;
        },

        scrollFun(){
            let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop
            // var clientHeight = document.querySelector('#famus-teacher').clientHeight;
            // this.scrollTimer = setTimeout(this.scrollEndFun, 200);
            // if(scrollTop  > searchBox && scrollTop < adjustTop){
            if(scrollTop  > 20){
                console.log(scrollTop);
                this.searchFix = true;
            }else{
                this.searchFix = false;
            }
        },

        // 获取轮播图数据
        getSwiper(){
           let _this = this, 
            para = {
                setEntry: 'headers',  
            }          
            this.GET('contents/courseDoctorBanner/queryList', para).then(res => {
                if(res.code == '000000'){
                    _this.listSwiper = res.data.bannerList || [];
                }
                if( _this.listSwiper.length == 0){
                    _this.isFailSwiper += 1;
                }
                _this.isFailSwiper = _this.listSwiper.length == 0 ? 2 : 1 ;
            })          
        },

    }
}

</script>
<style>
    .mint-popup.mint-popup-top {
        height: 100%;
        z-index: 2001;
        /* overflow: auto; */
    }
    .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;
        border-radius: 0;
    }
    .swiper .is-active{
        opacity: 1;
    }
    .mint-loadmore-top .mint-loadmore-text{font-size: 12px;}
    .banner-container.swiper-container-horizontal>.swiper-pagination-bullets{
        width: 2px;
        left: inherit;
        transform: translateY(-50%);
        position: absolute;
        right: 6px;
        top:50%;
    }
    .banner-container.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
        width: 2px;
        height: 7px;
        background: #fff;
        margin:6px 0 0 0;
        float: left;
        opacity: 0.4;
        
    }
    .banner-container.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active{
        opacity: 1
    }

    .banner-pagination{
        width: 2px;
        z-index: 100;
        right: 10px;
        top:10px;
        position: absolute;
    }
    /* .swiper-pagination-bullet{

    } */
    .swiper-slide img{
        width: 100%;
        height: 100%;
    }
</style>
<style lang="scss" scoped>
    @import '../../style/mixin';
    @import '../../style/swiper.min.css';
    .banner-container{
        height: px2rem(210px)
    }
    .main-body{
        position: relative;
    }
    .box-BG{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        z-index: 10000
    }
    .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{
        -webkit-animation: myPullDown 1.2s;
        animation: myPullDown 1.2s;
        padding-top:px2rem(225px)
    }
    .pull-up{
        -webkit-animation: myPullUp 1.2s;
        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(234px);  // banner图片变高了
        // height: px2rem(210px);
        .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%;
        height: px2rem(52px);
        padding: 0 px2rem(15px);
        margin-top:  px2rem(15px);
        .pathologic-item{
            float: left;
            width: 48%;
            box-shadow: 0 px2rem(2px) px2rem(8px) rgba(49, 127, 119, 0.2);
            border-radius: px2rem(3px);
            background: #fff;
           /* padding: px2rem(12px) 0 px2rem(12px) 0;*/
            margin-right: 4%;
            text-align: center;
            .pathologic-icon{
                height: px2rem(52px);
               /* height:  px2rem(20px);*/
                img{
                    width:  100%;
                    height: px2rem(52px);
                    padding-bottom: px2rem(8px);
                    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>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.lect-selection-content {
    position: absolute;
    top: px2rem(122px);
    z-index: 201;
    width: px2rem(375px);
    height: 100%;
    overflow: auto;
    font-size: px2rem(14px);
    color: #666666;
    margin-right: px2rem(15px);
    width: px2rem(360px);
    table {
        width: 100%;
        border-collapse: collapse;
    }
    &-rp-tb {
        padding: px2rem(4px) px2rem(15px);
        &-left {
            td {
                padding-left: px2rem(15px);
                border-bottom: 1px solid #F5F6F6;
            }
            background: #F5F6F6;
        }
        tr {
            height: px2rem(40px);
            line-height: px2rem(40px);
        }
        td {
            height: px2rem(40px);
            img {
                position: relative;
                top: px2rem(6px);
                left: 0;
                width: 20px;
                height: 20px;
            }
        }
        &-tb {
            td {
                padding-left: px2rem(8px);
                border-bottom: 1px solid #f0f0f0;
            }
        }
        &-tb-2 {
            td {
                padding-left: 0;
                border-bottom: 1px solid #f0f0f0;
            }
            table {
                width: 96%;
                margin: 0 px2rem(15px);
            }
        }
    }
}

.lect-selection {
  display: flex;
  background: #fff;
  flex-direction: row;
  &-title {
    display: flex;
    flex-direction: row;
    padding: px2rem(33px) px2rem(15px) px2rem(13px);
    width: px2rem(375px);
    justify-content: space-between;
    font-size: px2rem(13px);
    height: px2rem(68px);
    // line-height: px2rem(64px);
    border-bottom: 1px solid #e7e7e7;
    img {
      position: relative;
      top: px2rem(1px);
      left: px2rem(1px);
      height: px2rem(25px);
      width: px2rem(25px);
    }
    span {
      height: px2rem(18px);
      font-size: px2rem(18px);
      color: #333;
    }
  }
}


.group-title {
  position: absolute;
  top: px2rem(80px);
  z-index: 202;
  display: flex;
  flex-direction: row;
  padding: px2rem(4px) px2rem(25px) px2rem(16px);
  border-bottom: 1px solid #f0f0f0;
  &-order {
    display: flex;
    flex-direction: row;
    width: px2rem(325px);
    justify-content: space-between;
    font-size: px2rem(13px);
    &-item {
      span {
        font-size: px2rem(15px);
        color: #333;
      }
      img {
        position: relative;
        top: 0;
        left: px2rem(-1px);
        height: px2rem(11px);
        width: px2rem(11px);
      }
    }
  }
}
.active {
  color: #449284 !important;
}
.bg-white {
    background: #fff;
}
</style>
