<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" :key="index"
                    @click="gotoDetail(item)">
                    <div class="lect-img">
                        <img v-lazy="item.doctorAvatarImg" :key="item.doctorAvatarImg"/>
                        <span class="disp-blc">
                            <span :class="{'andriod-name': isAndroid}">{{item.doctorName}}</span>
                        </span>
                    </div>
                    <span class="disp-blc lect-ks">{{item.department}}</span>
                    <span class="disp-blc study-num">{{item.joinNum | formatNumber}}人已学</span>
                </div>
            </div>
        </div>
    </div>
</template>

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

        // 跳转到详情页面
        gotoDetail(item){
            this.$router.push({
                path: '/teachersDetail',
                query: {
                    id: item.doctorId
                }
            })
            this.appBuryingPointEntrust({
                ...teacher,
                labelId: item.doctorId,
                labelValue: item.doctorName
            })
        },

        //热门讲师
        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 || []
                }
                
            })
        },
        // 埋点
        appBuryingPointEntrust(val) {
            rocNative.appBuryingPointEntrust(val)
        },
    }
}
</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;
    }
    .andriod-name {
        padding-top: px2rem(2px);
    }
</style>
