<template>
    <div class="hot-teacher" id="famus-teacher">
        <div class="titleTop">
           <span class="title">{{title}}</span> 
            <div class="get-more gray fs11" @click="goToPage('','list')">
                更多<img src="../../images/right-throw.png" class="thorw-icon"/>
            </div>
        </div>
        <div class="tea-list">
            <div class="tea-listbox">
                <div class="tea-item" :key="index" v-for="(item,index) in list" @click="goToPage(item)">
                    <div class="head-pic">
                        <img class="tea-itemimg" :src="item.avatarImageUrl"/>
                    </div>
                    <span class="tea-itemname">{{item.name}}</span>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
    data(){
        return {
            title:'云鹊名师',
            list:[],
            pageNo:1,
            pageSize:10
        }
    },
 
    mounted(){
        this.list = this.parmData
        //this.getData();
    },
    props:{
        parmData:{
            type:Array,
            default:[]
        },
        //  userToken:{
        //     type:String,
        //     default:''
        // }
    },
    methods: {

        //跳转
        goToPage(item,parm){
            console.log(item);
            let _this = this;
            if(parm == 'list'){
                this.$router.push({
                    path: '/teachers',
                    query:{
                        userToken:_this.userToken
                    }
                })
            }else{
                this.$router.push({
                    path: '/teachersDetail',
                    query:{
                        id:item.id,
                        userToken:_this.userToken
                    }
                })
            }
            
            // let obj = {}
            // let keyName = '',
            //     val = '',
            //     classNameVal = '';

            // if(parm == 'list'){
            //     obj = {
            //         menuLevel:1,
            //         menuCode:'m_home',
            //         functionCode:'f_teacher',
            //         actionCode: 'c_more',
            //     }
            //     keyName = '';
            //     val = '';
            //     classNameVal = 'com.picahealth.yunque.activitys.experienceshare.ExperienceShareDetailActivity###SharedExperienceViewController'
            // }else{
            //     obj = {
            //         menuLevel:1,
            //         menuCode:'m_home',
            //         functionCode:'f_teacher',
            //         actionCode:'c_teacher',
            //         labelId:item.id,
            //         labelvalue:item.name,
            //     }
            //     keyName = 'id';
            //     val = item.id;
            //     classNameVal = 'com.picahealth.yunque.activitys.playvideo.PlayVideoFullScrenActivity###VideoPlayerViewController'
            // }
            // this.pageBurialPoin(obj)

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


        getData(){

            let _this = this,
            para = {
                pageNo:this.pageNo,
                pageSize:this.pageSize,
                token:this.userToken,
                setEntry: 'headers'
            }
            this.GET('contents/HomeLecturer/LecturerInformation', para).then(res => {
                if(res.code == '000000'){
                    _this.list = res.data && res.data.pCourseDoctorModels || []
                }
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hot-teacher{
    width: 100%;
    background-color: #fff;
    padding: 0 0  px2rem(26px) px2rem(15px);
    .titleTop{
        padding: 0 px2rem(15px) px2rem(15px) 0;
        overflow: hidden;
        height: px2rem(40px);
    }
    .title{
        font-size: px2rem(18px);
        float: left;
        font-weight: bold;
    }
    .get-more{
        border: 1px solid RGBA(169, 174, 183, 0.5);
        border-radius: px2rem(16px);
        padding: 0 px2rem(5px) 0 px2rem(6px);
        vertical-align: middle;
        display: inline-block;
        float: right;
        margin-top:px2rem(3px);
        height: px2rem(16px);
        line-height: px2rem(16px);
    }
    .thorw-icon{
        width: px2rem(8px);
        height: px2rem(8px);

    }
    .tea-list{
        width: 100%;
        overflow: hidden;
        height:  px2rem(75px);
        overflow-x: scroll;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        outline: 0;
        -webkit-overflow-scrolling : touch;
    }
    .tea-listbox{
        width: 1100px;
        clear: both;
    }
    .tea-item{
        font-size: px2rem(13px);
        margin: 0 px2rem(19px) 0 0;
        display: inline-block;
       
        position: relative;
        float: left;
        text-align: center;
        .head-pic{
            background: #ECECEC;
            width: px2rem(50px);
            height: px2rem(50px);
            border-radius: 50%;
            text-align: center;
        }
        .tea-itemimg{
            width: px2rem(50px);
            height: px2rem(50px);
            
            border-radius: 50%;
        }
        .tea-itemname{
            color: RGBA(102, 102, 102, 1);
            padding-top: px2rem(5px);
            font-size: px2rem(13px);
            line-height: px2rem(19px);
        }
    }
}
</style>
