<template>
    <section>
        <TopNav :bgColor="bgColor" :title="navTitle" :isNavFix="isNavFix"></TopNav>
        <section class="activity-box">
            <div class="activity-count">共{{list.length}}个活动</div>
            <div class="activity-list">
                <div class="activity-item" v-for="(item,index) in list" :key="index" @click="goToPage(item)">
                    <img :src="item.imageUrl" class="img"/>
                   <!--  <div class="time">活动时间：9月3日-9月9日</div> -->
                </div>
            </div>
            <BackTop v-if="isShowBackTop"></BackTop>
        </section>
    </section>
    
</template>

<script>
// import { setEventByModuleCode } from '@/utils/index'
import TopNav from '../../components/common/topNav';
import BackTop from '../../components/common/backTop';
export default {
    data(){
        return {
            tittle:'',
            list:[],
            bgColor:'#fff',
            navTitle:'',
            isBorder:true,
            isNavFix:true,
            id:'1',
            tabName:'测试',
            tabList:[],
            isShowBackTop:false,
        }
    },
    components:{
        TopNav,
       BackTop
    },
	mounted(){
        ///console.log(this.$route.query);
        this.id = this.$route.query.categoryId
        this.getTabData();
        window.addEventListener('scroll', this.scrollFun);
    },
    beforeDestroyed(){
        window.removeEventListener('scroll', this.scrollFun)
    },

    methods:{
        scrollFun(){
            let scrollTop = document.documentElement.scrollTop;
            this.isShowBackTop = scrollTop > 0 ? true : false;
            // if(scrollTop > 0){
            //     this.isShowBackTop = true;
            // }
        },
        goToPage(itemData){
            let paramList = this.setEventByModuleCode(itemData);
            rocNative.dispatchEventByModuleCode({
                modeCode: itemData.appModuleInfo.code,
                jsonString: paramList
            })
        },



        //查询tab 
        getTabData(){
            let _this = this,
            parm = {
                id:_this.id,
                setEntry: 'headers'
            }
            _this.GET('contents/contentList/tabById',parm).then(function(res){

                if(res.code === '000000'){
                  _this.navTitle =  res.data.name || '';
                  _this.tabName = _this.tabList[0] || '';
                  // if(_this.tabList.length>0){
                  //   _this.tabName = _this.tabList[0] || '';
                  // }
                  _this.getData();
                }else{
                  //alert(res.message)
                }
            })
        },

        //查询内容
        getData(){
            let _this = this,
            parm = {
                id:_this.id,
                tabName : _this.tabName,
                setEntry: 'headers'
            }
            // if(_this.tabName != ''){
            //     parm.tabName = _this.tabName
            // }
            _this.GET('contents/contentList/contentById',parm).then(function(res){

                if(res.code === '000000'){
                    _this.list =  res.data.contentList &&  res.data.contentList.contentList || [];
                    
                }
            })
        }
    },
}

</script>

<style lang="scss" scoped>
    @import '../../style/mixin';
    .activity-box{
        padding: px2rem(15px);
        background: #fff;
    }
    .activity-count{
        color: #999;
        font-size: px2rem(15px);
    }
    .activity-item{
        position: relative;
        width: px2rem(345px);
       /* height: px2rem(170px);*/
        margin-top:px2rem(15px);
        box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
        .img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .time{
            position: absolute;
            color:#fff;
            height: px2rem(25px);
            line-height: px2rem(25px);
            background: RGBA(0, 0, 0, 0.1);
            border-radius: 0 0 px2rem(5px) px2rem(5px);
            width: 100%;
            bottom: 0;
            left: 0;
            z-index: 10;
            font-size: px2rem(14px);
            padding-left: px2rem(5px);
        }
    }

</style>
