<template>
    <div class="hot-lect">
        <span class="hot-lect-wrapper-title">热门讲师</span>
        <div class="hot-lect-wrapper">
            <div class="hot-lect-wrapper-list" >
                <div class="hot-lect-wrapper-list-item" v-for="(item,index) in parmData" @click="goToPage(item)" :key="index">
                    <div class="lect-img">
                        <img v-lazy="item.doctorAvatarImg"/>
                        <span class="disp-blc">
                            <span>{{item.doctorName}}</span>
                        </span>
                    </div>
                    <span class="disp-blc lect-ks">{{item.department}}</span>
                    <span class="disp-blc study-num">{{item.joinNum}}人已学</span>
                </div>
            </div>
        </div>
    </div>
</template>

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

        //跳转
        goToPage(item){
            let _this = this,
                url = jumpWebPageUrl+'appl/#/teachersDetail?id='+item.doctorId+"&from=appHome&userToken="+ _this.userToken

            let itemData = {
                "title":"",
                "imageUrl":"",
                "appModuleInfo":{
                    "code":"M300",
                    "type":4,
                    "name":"wwww",
                    "paramFlag":1,
                    "paramList":[
                        {
                            "key":"pageUrl",
                            "value": url,
                            "type":4,
                            "seqNo":1
                        },{
                            "key":"showTitle",
                            "value": false,
                            "type":1,
                            "seqNo":2
                        },{
                            "key":"title",
                            "value": '',
                            "type":1,
                            "seqNo":3
                        }
                    ]
                }
            };

            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: itemData.appModuleInfo.paramList
            })
        },

        //热门讲师
        getData(){
            let _this = this,
            para = {
                pageNo: 1,
                pageSize: 6,
                setEntry: 'headers'
            }
            this.GET('contents/courseDoctor/v1/getHotTeacher', para).then(res => {
                if(res.code == '000000'){
                    _this.parmData = res.data && res.data.list || []
                }
                
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
    .hot-lect {
        &-wrapper {
            width: 100%;
            overflow: hidden;
            height:  px2rem(115px);
            // margin: 0 px2rem(15px);
            overflow-x: scroll;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            outline: 0;
            -webkit-overflow-scrolling : touch;
            &-list {
                display: flex;
                flex-direction: columns;
                margin-left: px2rem(12px);
                width: px2rem(666px);
                height: px2rem(133px);
                // margin: 0 px2rem(15px);
                // padding: px2rem(4px) px2rem(4px);
                &-item {
                    display: inline-block;
                    width: px2rem(105px);
                    height: px2rem(107px);
                    margin: px2rem(3px);
                    text-align: center;
                    background:rgba(255,255,255,1);
                    box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.07);
                    border-radius: px2rem(3px);
                    span {
                        width: 100%;
                        font-size: px2rem(12px);
                    }
                }
            }
        }
        .lect-img {
            position: relative;
            top: 0;
            left: 0;
            img {
                width: px2rem(60px);
                height: px2rem(60px);
                margin-top: px2rem(5px);
                border-radius: 50%;
            }
            span {
                display: inline-block;
                position: absolute;
                left: px2rem(14px);
                top: px2rem(25px);
                font-size: px2rem(12px);
                span {
                    width: px2rem(50px);
                    height: px2rem(15px);
                    line-height: px2rem(15px);
                    border-radius: px2rem(8px);
                    font-size: px2rem(13px);
                    color: #fff;
                    background: #CEAE67;
                }
            }
        }

    }
    .disp-blc {
        display: block;
    }
    .hot-lect-wrapper-title {
        display: block;
        width: 100%;
        padding: px2rem(15px);
        font-size: px2rem(18px);
        font-weight: 500;
        color: #333;
    }
    .disp-blc.lect-ks {
        position: relative;
        left: 0;
        top: px2rem(-8px);
        font-size: px2rem(12px);
        color: #666;
    }
    .disp-blc.study-num {
        position: relative;
        left: 0;
        top: px2rem(-10px);
        font-size: px2rem(11px);
        color: #999;
    }
</style>
