<template>
<div class="home-b">
    <h3>Page Home Tab {{ tab.toUpperCase() }}</h3>
    <component :is="list[0] ? 'empty' : 'div'"></component>
    <div class="list-a-item" v-for="item in list" :key="item.leadsId">
        <router-link tag="h4" to="/detail">
            {{ item.projectName }}
        </router-link>
        <p>{{ item.abstract }}</p>
    </div>
</div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
    name: 'home_b',
    props: {
        tab: { default: '' }
    },
    data(){
        return {
            list: []
        };
    },
    api(){
        window.homeb = this;
        let list;
        this.$api({
            url: '/data/list-tab-b.json',
            params: {
                tab: "feeds",
                page: 0,
                limit: 20
            }
        }).then(res => {
            list = res.data.data.ups.filter(item => item.type !== "count");
        });
        return new Promise((res ,rej) => {
            setTimeout(function(){ this.list = list; res(); }.bind(this), 1000);
        });
    },
    components: {
        empty: () => {
            // import('echarts').then(echarts => console.log(echarts));
            return import(/* webpackChunkName: 'components/empty' */'../components/empty.js');
        }
    }
}
</script>

<style scoped>
.list-a-item {
    text-align: left;
    margin: 10px 0;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 14px;
}
.list-a-item h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
}
.list-a-item p {
    margin: 0
}
</style>
