<template>
    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
            <div class="PageHeader">
                <br/>
                <el-page-header  @back="goBack" style="justify-content:left;display: flex;">
                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
                    <div slot="content" style="font-size:23px;font-weight: 600;display: flex;flex-direction: row;justify-content: center;">
                        HelloGitHub 文章
                    </div>
                </el-page-header>
            </div>
            <div class="PageContent">
                <el-tabs type="border-card"  style="border: none" v-model="avtiveName" @tab-click="getArticleList">
                    <el-tab-pane name="last">
                        <span slot="label"><i class="el-icon-star-on"></i> 最新</span>
                        <ul
                            class="list"
                            v-infinite-scroll="load"
                            infinite-scroll-disabled="disabled">
                            <ol v-for="(article,index) in articleList" :key="index" class="list-item"
                                style="display: flex;flex-direction: column;margin-left: -80px;" >
                                <ArticleList :article-list="article"></ArticleList>
                                <el-divider></el-divider>
                            </ol>
                        </ul>
                        <p v-if="loading" style="color: #9ca3af">加载中...</p>
                        <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>

                    </el-tab-pane>
                    <el-tab-pane name="hot">
                        <span slot="label"><i class="el-icon-s-opportunity"></i> 最热</span>
                        <ul
                            class="list"
                            v-infinite-scroll="load"
                            infinite-scroll-disabled="disabled">
                            <ol v-for="(article,index) in articleList" :key="index" class="list-item"
                                style="display: flex;flex-direction: column;margin-left: -80px;" >
                                <ArticleList :article-list="article"></ArticleList>
                                <el-divider></el-divider>
                            </ol>
                        </ul>
                        <p v-if="loading" style="color: #9ca3af">加载中...</p>
                        <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </div>
        <RightTools></RightTools>
    </div>
</template>

<script>
import axios from "axios";
import ArticleList from "@/components/Paper/ArticleList.vue";
import RightTools from "@/components/Home/RightTools.vue";


export default {
    name: "PaperComponent",
    components: {RightTools, ArticleList},
    data(){
        return{
            avtiveName:'last',
            articleList:null,
            count: 10,
            loading: false,
            loginDialogVisible:false,
        }
    },
    mounted() {
        this.getArticleListBylast();
    },
    computed: {
        noMore() {
            return this.count >= 10
        },
        disabled() {
            return this.loading || this.noMore
        }
    },

    methods: {

        goBack() {
            window.history.go(-1);
        },
        load() {
            this.loading = true
            setTimeout(() => {
                this.count += 2
                this.loading = false
            }, 2000)
        },
        getArticleList(tab,event){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/articleSort',
                // URL 中的查询参数
                params: {
                    sort_by:tab.name
                }
            }).then(function (res) {
                that.articleList=res.data;
            });
        },
        getArticleListBylast(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/articleSort',
                // URL 中的查询参数
                params: {
                    sort_by:"last"
                }
            }).then(function (res) {
                // console.log(res)
                that.articleList=res.data;
            });
        },
    }
}

</script>

<style scoped lang="scss">
::v-deep .el-page-header__left{
  left:-250px;
}

::v-deep .el-page-header__left{
    left:10px;
}
::v-deep .el-page-header__content{
    flex:1;
}
</style>