<template>
  <mt-popup
    v-model="isShowSelection"
    position="top"
    >
      <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>

  </mt-popup>

</template>
<script>
// import {mapState, mapMutations, mapActions} from 'vuex'
// import BackTop from '@/homecom/components/common/backTop';
export default {
    data(){
        return {
            isShowSelection: false,
            parmDataDoctList: [],
            selectedTypeIndex: 1,
            allAreaList: [],
            allAreaSubList: [],
            allAreaListHandles: [],
            allLevelList: [],
            allDepartList: [],
            selectedAreaIndex: 0,
            selectedAreaSubIndex: 0,
            selectedLevelIndex: 0,
            selectedDepartIndex: 0,
            selectedAreaName: '全国',
            selectedAreaSubName: '',
            selectedLevelName: '全部等级',
            selectedDepartName: '全部科室',
            cityId: 0,
            provinceId: 0,
            countyId: 0,
            levelGrade : 0,
            departmentId: 0
        }
    },
    props: {
      // selectedTypeIndex: {
      //   type: Number,
      //   default: 1
      // }
    },
    computed: {
      // isShowSelection() {
      //   return this.isShowSelection;
      // },
      selectedTitle() {
          return this.selectedTypeIndex === 1 ? '选择地区' : this.selectedTypeIndex === 2 ? '选择等级' : '选择科室'
      }    
    },  
    components:{
    },
    // computed: {
    //     selectedTitle() {
    //        return this.selectedTypeIndex === 1 ? '选择地区' : this.selectedTypeIndex === 2 ? '选择等级' : '选择科室'
    //     }
    // },
    beforeCreate() {
    },
    created () {
        this.initAll()
    },

    beforeMount() {
        
    },
	  mounted(){

    },

    beforeDestroyed(){

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

        //根据条件获取讲师列表
        getYqDoctorDataByCD(){
            let _this = this,
            para = {
                provinceId: this.provinceId,
                cityId: this.cityId,
                countyId: this.countyId,
                levelGrade: this.levelGrade,
                departmentId: this.departmentId,
                setEntry: 'headers'
            }
            this.GET('contents/courseDoctor/v1/getAllTeacher', para).then(res => {
                if(res.code == '000000'){
                    // _this.parmDataDoctList = res.data && res.data.list || []
                    let selTitle = this.selectedAreaSubName || this.selectedAreaName
                    if (selTitle === '全部'){
                        selTitle = this.selectedAreaName
                    }
                    this.$emit('selectedData', 
                        res.data && res.data.list || [],
                        selTitle,
                        this.selectedLevelName, this.selectedDepartName)
                }
                
            })
        },

        // 获取所有区域数据
        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, index) => {
                if( index === 0 ){
                    handleList.push({id: element.id, name: element.name, 
                        cities: this.decorateCitiesData({id: 0, name: '全部', provinceId: element.id}, element.cities, 42, false)})
                } else {
                    handleList.push({id: element.id, name: element.name, 
                        cities: this.decorateCitiesData({id: 0, name: '全部', provinceId: element.id}, element.cities, 41)})
                }
            });
            handleList.unshift({id:'0',name:'全国',cities: this.decorateCitiesData({id: 0, name: '全国', provinceId: 0}, [], 41)})
            handleList.push({id:'',name:'',cities: []})
            handleList.push({id:'',name:'',cities: []})
            handleList.push({id:'',name:'',cities: []})
            handleList.push({id:'',name:'',cities: []})
            handleList.push({id:'',name:'',cities: []})
            handleList.push({id:'',name:'',cities: []})
            handleList.push({id:'',name:'',cities: []})
            handleList.push({id:'',name:'',cities: []})
            handleList.push({id:'',name:'',cities: []})
            return handleList
        },

        // 装饰城市数据
        decorateCitiesData(appendInitData, cities, dataNum = 31, needAppend = true) {
            let appendCities = [], appendLength = dataNum - cities.length;
            if(needAppend){
                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 || []
                    this.allLevelList.unshift({no: 0, value: "全部等级"})
                }
            })
        },

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

        // 选中省或直辖市
        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
                if(item.isMunicipality){
                    this.cityId = item.cityId
                    this.countyId = item.id
                    this.provinceId = item.provinceId
                } else {
                    this.cityId = item.id
                    this.countyId = 0
                    this.provinceId = item.provinceId
                }
                this.closeSelectedPage()
                this.getYqDoctorDataByCD()
            }
        },

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

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

    },
}

</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);
    }
    @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>

