<template>
    <section class="wxlist">
        <Header></Header>
        <div class="wxlist-content">
            <div class="menu-title">{{wechatArticle.menu}}</div>
            <div class="wxlist-banner" v-if="wechatArticle.top">
                <div class="banner-box">
                    <div class="banner-header clr">
                        <div class="banner-img fl"><img src="../../assets/images/wxlist/logo2.png"/></div>
                        <div class="banner-title fl">猎芯网</div>
                    </div>
                    <div class="banner-body">
                        <a :href="wechatArticle.top.url | urlPatg('wechatlist')"><img :alt="wechatArticle.top.title"
                                                                                      :src="wechatArticle.top.img"/></a>
                    </div>
                    <div class="banner-footer">
                        <a :href="wechatArticle.top.url | urlPatg('wechatlist')"><span>活动&nbsp;|&nbsp;</span>{{wechatArticle.top.title}}</a>
                    </div>
                </div>
            </div>
            <div class="wxlist-data">
                <div class="wxlist-data-box">
                    <van-list v-model="loading" :loading="loadStatus" :finished="finished" :offset="10"
                              finished-text="没有更多了" @load="onLoad">
                        <div class="data-group clr" v-for="(item,index) in wechatArticleList" :key="index">
                            <a :href="item.url | urlPatg('wechatlist')">
                                <div class="group-left fl">
                                    <div class="group-left-box">
                                        {{item.title}}
                                    </div>
                                </div>
                                <img :src="item.img" class="group-right fr"/>
                            </a>
                        </div>
                    </van-list>
                </div>
            </div>
        </div>
    </section>
</template>

<script>

    import Vue from 'vue';
    import {mapState} from 'vuex'
    import {List} from 'vant';
    import Header from '@/views/common/Header.vue';

    Vue.use(List);

    export default {
        name: 'wxlist',
        data() {
            return {
                page: 0,
                limit: 6,
                loading: false
            }
        },
        computed: {
            ...mapState({
                wechatArticle: state => state.wxlist.wechatArticle,
                wechatArticleList: state => state.wxlist.wechatArticleList,
                limits: state => state.wxlist.limits,
                loadStatus: state => state.wxlist.loadStatus,
                finished: state => state.wxlist.finished
            })
        },
        watch: {
            loadStatus(val) {
                this.loading=val;
            }
        },
        created() {

        },
        methods: {
            getData(type_id) {
                this.$store.dispatch({
                    type: 'wechatArticle',
                    type_id: type_id,
                    page: this.page,
                    limit: this.limit
                })
            },
            onLoad() {
                if (this.page < this.limits) {
                    this.page++;
                    this.getData(this.$route.query.type_id);
                }
            }
        },
        components: {
            Header
        }
    }
</script>


<style scoped>
    @import "../../assets/css/wxlist/wxlist.min.css";
</style>