<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: {"imageUrl": require('../../images/defaults/icon-p3-1.png')},
            rightTop: {"imageUrl": require('../../images/defaults/icon-p3-2.png')},
            rightBottom: {"imageUrl": require('../../images/defaults/icon-p3-2.png')},
            rightBp: {"imageUrl": require('../../images/defaults/icon-p3-3.png')},
            title: '专题分类'
        }
    },
    props: {
        parmData: {
            type: Array,
            defalut: () => []
        }
    },
    mounted(){
        // this.getData();
    },
    watch: {
        parmData(val) {
            this.list = val
            this.leftObj = this.list[0] || {};
            this.rightTop = this.list[1] || {};
            this.rightBottom = this.list[2] || {};
            this.rightBp = this.list[3] || {};
        }
    },

    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'){
                    //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';
// img {
//     @include bis('../../images/evaluatBg.png');
// }
.title{
    font-size: px2rem(18px);
    font-weight: bold;
    margin-bottom: px2rem(15px);
    color: #62647f;
}
.hot-teacher{
    width: 100%;
    margin-top: px2rem(30px);
    padding: 0 px2rem(15px) px2rem(40px);
    .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>
