<template>
    <div class="hot-teacher">
        <div  class="title">{{title}}</div>

        <!--展示形式 左一 右二-->
        <div class="teacher-item space-between">
            <div class="category-left" @click="goToPage(parmData[0])">
                <img class="category-img" v-lazy="parmData[0].imageUrl"/>
            </div>
            <div class="category-right">
                <div class="right-img" @click="goToPage(parmData[1])">
                    <img class="category-img" v-lazy="parmData[1].imageUrl"/>
                </div>
                <div class="right-img mt5" @click="goToPage(parmData[2])">
                    <img class="category-img" v-lazy="parmData[2].imageUrl"/>
                </div>
            </div>
        </div>
        <div class="holder-img" @click="goToPage(parmData[3])">
            <img v-lazy="parmData[3].imageUrl" class="category-img"/>
        </div>
    </div>
</template>

<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
    data(){
        return{
            list:[],
            leftObj:{},
            rightTop:{},
            rightBottom:{},
            rightBp:{},
            title:'专题分类',
            parmData:[
                {imageUrl:''},
                {imageUrl:''},
                {imageUrl:''},
                {imageUrl:''}
            ]
        }
    },
    mounted(){
        this.getData();
    },
    props:{
    },
    methods: {
        goToPage(itemData){
            this.pageBurialPoin({
                menuLevel:1,
                menuCode:'m_home',
                functionCode:'f_module',
                actionCode:'c_module',
                labelId:itemData.id,
                labelValue :itemData.name,
            })
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
        },
        getData(){
            let _this = this, 
            para = {
                category: 1, 
                position:3,
                token: this.userToken,
                setEntry: 'headers'
            }
            this.GET('contents/HomeColumn/Information', para).then(res => {
                if(res.code == '000000'){
                    _this.parmData = res.data && res.data.iconColumnInformationModels || [];
                }
            })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.title{
    font-size: px2rem(18px);
    font-weight: bold;
    margin-bottom: px2rem(15px);
}
.hot-teacher{
    width: 100%;
    margin-top: px2rem(30px);
    padding: 0 px2rem(15px) px2rem(26px);
    .category-img{
        width: 100%;
        height: 100%;
    }
    .teacher-item{
        width: 100%;
       /* height: px2rem(190px);*/
        .category-left{
            width: px2rem(170px);
            height: px2rem(195px); 
            border-radius: px2rem(3px);
        }
        .category-img{
            width: 100%;
            height: 100%;
            display: block;
            border-radius: px2rem(3px);
        }
        .mt5{
            margin-top:  px2rem(5px);
        }
        .category-right{
            width: px2rem(170px);
            height: px2rem(190px);
            
            .right-img{
                width: px2rem(170px);
                height: px2rem(95px);
                border-radius: px2rem(3px);
            }
            
        }
        
    }
    .holder-img{
        margin-top:px2rem(5px);
        width: 100%;
        height: px2rem(126px);
        border-radius: px2rem(3px);
        img{
             border-radius: px2rem(3px);
        }
    }
}
</style>
