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

        <!--展示形式 左一 右二-->
        <div class="teacher-item space-between">
            <div class="category-left" @click="goToPage(leftObj)">
                <img class="category-img" :src="leftObj.imageUrl"/>
            </div>
            <div class="category-right">
                <div class="right-img" @click="goToPage(rightTop)">
                    <img class="category-img" :src="rightTop.imageUrl"/>
                </div>
                <div class="right-img mt5" @click="goToPage(rightBottom)">
                    <img class="category-img" :src="rightBottom.imageUrl"/>
                </div>
            </div>
        </div>
        <div class="holder-img" @click="goToPage(rightBp)">
            <img :src="rightBp.imageUrl" class="category-img"/>
        </div>
    </div>
</template>

<script>
// import { setEventByModuleCode } from '@/utils/index'
export default {
    data(){
        return{
            list:[],
            leftObj:{},
            rightTop:{},
            rightBottom:{},
            rightBp:{},
            title:'专题分类'
        }
    },

    mounted(){
        this.getData();
    },
    methods: {
        goToPage(itemData){
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })

        },
        getData(){
            let _this = this, 
            para = {
                category: 1, 
                position:3
            }
            this.GET('contents/HomeColumn/Information', para).then(res => {
                if(res.code == '000000'){
                    //console.log(res);
                    _this.list = res.data && res.data.iconColumnInformationModels || [];
                   /// console.log(_this.list);
                    _this.leftObj = _this.list[0] || {};
                    _this.rightTop = _this.list[1] || {};
                    _this.rightBottom = _this.list[2] || {};
                    _this.rightBp = _this.list[3] || {};
                }
            })
        },

    },
 
}
</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(15px);
    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); 
        }
        .category-img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .mt5{
            margin-top:  px2rem(5px);
        }
        .category-right{
            width: px2rem(170px);
            height: px2rem(190px);
            
            .right-img{
                width: px2rem(170px);
                height: px2rem(95px);
            }
            
        }
        
    }
    .holder-img{
        margin-top:px2rem(15px);
        width: 100%;
        height: px2rem(65px);

    }
}
</style>
