<template>
  <mt-popup
    v-model="isShowSelection"
    position="top"
    >
    <section >
        <article class="lect-selection">
            <div class="lect-selection-content-mask"></div>
            <section class="lect-selection-title">
                <img @click="closeSelectedPage" src="../../images/lecturer/select-delete.png"/>
                <span>{{selectedTitle}}</span>
                <span class="no-content"></span>
            </section>
            <article class="group-title">
                <section class="group-title-order">
                    <div @click="selectedType(1)" class="group-title-order-item">
                        <span :class="{'active': selectedTypeIndex === 1}">全国</span>
                        <img v-show="selectedTypeIndex === 1" src="../../images/lecturer/select-up.png"/>
                        <img v-show="selectedTypeIndex !== 1" src="../../images/lecturer/select-down.png"/>
                    </div>
                    <div @click="selectedType(2)" class="group-title-order-item">
                        <span :class="{'active': selectedTypeIndex === 2}">全部等级</span>
                        <img v-show="selectedTypeIndex === 2" src="../../images/lecturer/select-up.png"/>
                        <img v-show="selectedTypeIndex !== 2" src="../../images/lecturer/select-down.png"/>
                    </div>
                    <div @click="selectedType(3)" class="group-title-order-item">
                        <span :class="{'active': selectedTypeIndex === 3}">全部科室</span>
                        <img v-show="selectedTypeIndex === 3" src="../../images/lecturer/select-up.png"/>
                        <img v-show="selectedTypeIndex !== 3" src="../../images/lecturer/select-down.png"/>
                    </div>
                </section>
            </article>
        </article>
        <section class="lect-selection-content">
            <article class="lect-selection-content-region" v-show="selectedTypeIndex === 1">
                <table class="lect-selection-content-rp-tb">
                    <tr>
                        <td style="width: 40%" >
                            <table class="lect-selection-content-rp-tb-left">
                                <tr v-for="(item, index) in allAreaList" :class="{'bg-white': selectedAreaIndex === index}" @click="selectAreaAction(item, index)" :key="index">
                                    <td >{{item.name}}</td>
                                </tr>                                 
                            </table>
                        </td>
                        <td style="width: 4%"></td>
                        <td class="lect-selection-content-rp-tb-tb" style="width: 55%" >
                            <table >
                                <tr v-for="(item, index) in allAreaSubList" 
                                    @click="selectAreaSubAction(item, index)" :key="index"
                                    >
                                    <td >{{item.name}}</td>
                                    <td style="text-align: right;"><img v-show="item.name && selectedAreaSubIndex === index" src="../../images/lecturer/select-selected.png"/></td>
                                </tr>                                 
                            </table>
                        </td>                            
                    </tr>
                </table>
            </article>
            <article class="lect-selection-content-level" v-show="selectedTypeIndex === 2">
                <table class="lect-selection-content-rp-tb">
                    <tr>
                        <td class="lect-selection-content-rp-tb-tb-2" >
                            <table>
                                <tr @click="selectLevelAction(item, index)" v-for="(item, index) in allLevelList" :key="index">
                                    <td >{{item.value}}</td>
                                    <td style="text-align: right;"><img v-show="selectedLevelIndex === index" src="../../images/lecturer/select-selected.png"/></td>
                                </tr>                                 
                            </table>
                        </td>                            
                    </tr>
                </table>
            </article>
            <article class="lect-selection-content-region" v-show="selectedTypeIndex === 3">
                <table class="lect-selection-content-rp-tb">
                    <tr>
                        <td class="lect-selection-content-rp-tb-tb-2">
                            <table>
                                <tr @click="selectDepartAction(item, index)" v-for="(item, index) in allDepartList" :key="index">
                                    <td >{{item.name}}</td>
                                    <td style="text-align: right;"><img v-show="selectedDepartIndex === index" src="../../images/lecturer/select-selected.png"/></td>
                                </tr>                                 
                            </table>
                        </td>                            
                    </tr>
                </table>
            </article>
        </section>
    </section>

  </mt-popup>

</template>
<script>
import { Swipe, SwipeItem} from 'mint-ui';
import {mapState, mapMutations, mapActions} from 'vuex'
import BackTop from '@/homecom/components/common/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 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 {
            isShowSelection: true,
            parmDataDoctList: [],
            selectedTypeIndex: 1,
            prevent: true,
            isShowBackTop: false,
            speedSwiper: 300,
            // stopPropagation: true,
            listSwiper: [{
                "imageUrl": require('../../homecom/images/defaults/750420-1.png')
            },{
                "imageUrl": require('../../homecom/images/defaults/750420-1.png')
            },{
                "imageUrl": require('../../homecom/images/defaults/750420-1.png')
            },{
                "imageUrl": require('../../homecom/images/defaults/750420-1.png')
            },{
                "imageUrl": require('../../homecom/images/defaults/750420-1.png')
            }],//轮播图数据
            scrollTimer: null,
            scrollTop: 0,
            userToken: '',
            searchFix: false,
            statusBarHeight: 0,
            userMobile: '',
            isFailSwiper: 1,
            allAreaList: [],
            allAreaSubList: [],
            allAreaListHandles: [],
            allLevelList: [],
            allDepartList: [],
            selectedAreaIndex: -1,
            selectedAreaSubIndex: -1,
            selectedLevelIndex: -1,
            selectedDepartIndex: -1,
            selectedAreaName: '全国',
            selectedAreaSubName: '',
            selectedLevelName: '全部等级',
            selectedDepartName: '全部科室',

        }
    },
    props: {
      // isShowSelection: {
      //   type: Boolean,
      //   default: true
      // }
    },
    computed: {
      // isShowSelection() {
      //   return this.isShowSelection;
      // },
      selectedTitle() {
          return this.selectedTypeIndex === 1 ? '选择地区' : this.selectedTypeIndex === 2 ? '选择等级' : '选择科室'
      }    
    },  
    components:{
      Swipe,
      SwipeItem,
      BackTop,
      YqyHomeHeader,
      YqyLecturerTitle,
      YqyLecturerSelect,
      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:{
        // ...mapActions({
        //     'setAdjustList': 'setAdjustList'
        // }),
        show() {
          this.isShowSelection = true
        },
        selectedTypeFromTitle(index) {
            this.selectedTypeIndex = index
            this.isShowSelection = true
        },
        closeSelectedPage() {
            this.isShowSelection = false
        },
        selectedType(index) {
            this.selectedTypeIndex = index
            // this.$emit('selectedType', index)
        },

        initAll(){
            this.getSwiper()
            this.getYqDoctorDataByCD()
            this.getAreas()
            this.getLevels()
            this.getDeparts()
        },

        //获取状态栏高度
        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 || []
                }
                
            })
        },

        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 ;
            })          
        },

        // 获取所有区域数据
        getAreas() {
            let param = {
                setEntry: 'headers'
            }
            this.GET('contents/courseDoctor/listAreas', param).then(res => {
                if(res.code == '000000'){
                    this.allAreaList = this.handleAreaData(res.data && res.data.list || [])
                    this.allAreaSubList = this.allAreaList[0].cities
                }
            })
        },

        // 处理区域数据
        handleAreaData (orginAreaList) {
            let handleList = []
            orginAreaList.forEach(element => {
                handleList.push({id: element.id, name: element.name, 
                    cities: this.decorateCitiesData({id: 0, name: '全部', provinceId: ''}, element.cities)})
            });
            console.log(handleList)
            return handleList
        },

        // 装饰城市数据
        decorateCitiesData(appendInitData, cities, dataNum = 31) {
            let appendCities = [], appendLength = dataNum - cities.length;
            appendCities.unshift(appendInitData)
            appendCities = appendCities.concat(cities)
            for(let i = 0; i < appendLength; i ++){
                appendCities.push({id: '', name: '', provinceId: ''})
            }
            return appendCities
        },

        // 获取医院等级
        getLevels() {
            let param = {
                setEntry: 'headers'
            }
            this.GET('contents/courseDoctor/listLevels', param).then(res => {
                if(res.code == '000000'){
                    this.allLevelList = res.data && res.data.list || []
                }
            })
        },

        // 获取医院科室
        getDeparts() {
            let param = {
                setEntry: 'headers'
            }
            this.GET('contents/courseDoctor/listDeparts', param).then(res => {
                if(res.code == '000000'){
                    this.allDepartList = res.data && res.data.list || []
                }
            })
        },

        // 选中省或直辖市
        selectAreaAction(item, index) {
            this.selectedAreaIndex = index
            this.allAreaSubList = item.cities
            this.selectedAreaName = item.name
        },

        // 选中市或区
        selectAreaSubAction(item, index) {
            // this.selectedAreaIndex = index
            // this.allAreaSubList = item.cities
            if(item.name){
                this.selectedAreaSubIndex = index
                this.selectedAreaSubName = item.name
                // this.closeSelectedPage()
            }
        },

        // 选中医院等级
        selectLevelAction(item, index) {
            this.selectedLevelIndex = index
            this.selectedLevelName = item.value
            // this.closeSelectedPage()
        },

        // 选中医院科室
        selectDepartAction(item, index) {
            this.selectedDepartIndex = index
            this.selectedDepartName = item.name
            // this.closeSelectedPage()
        }

    },
}

</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';
.lect-selection-content {
    position: absolute;
    top: px2rem(122px);
    z-index: 201;
    width: px2rem(375px);
    height: 80%;
    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>

