<template>
    <div class="test" 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" class="test" style="font-size:23px;font-weight: 600;">
                        <div> 《HelloGitHub》月刊 <span style="font-size:30px;font-weight:750">{{selectlabelItem}} </span>分区</div>
                    </div>
                </el-page-header>

            </div>
            <div class="PageContent">

                <div style="margin-top:30px;width:50vw;margin-left:20px">
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-card shadow="always" style="font-size: 18px;
                                font-weight:550;color: #a9a9a9;
                                line-height: 35px;
                                text-align:left;background-color: #f4ffed;
                                border-color: rgba(255,243,232,0.89);border-radius:10px">
                                这里是按照<span style="font-size:20px;font-weight:600;color:#7e7e7e">「分类」</span>
                                阅读往期的 HelloGitHub 月刊内容， 您目前在查看往期 HelloGitHub 月刊中的
                                <span style="font-size:20px;font-weight:600;color:#7e7e7e">{{selectlabelItem}} 项目</span>
                                集合。
                            </el-card>
                        </el-col>
                    </el-row>
                    <div class="ItemsContent" >
                        <el-backtop ></el-backtop>
                        <el-scrollbar class="scrollbar-wrapper" style="margin-left:-10px;width:fit-content" >
                            <div class="infinite-list-wrapper" >
                                <ul class="list"
                                    v-infinite-scroll="load"
                                    infinite-scroll-disabled="disabled"
                                >
                                    <div style="text-align: center">
                                        <div v-for="(items,index2) of projectLists.length" :key="index2">
                                            <MonthlyItems :Items='projectLists[index2]'></MonthlyItems>
                                        </div>

                                    </div>
                                </ul>
                                <p style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
                            </div>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
            <button class="backbutton" @click="backTop()">
                <span  style="font-family: 华文琥珀;font-size:25px;color:#acbfe0">UP</span>
            </button>
        </div>
        <RightTools></RightTools>
    </div>
</template>

<script>
import MonthlyItems from "@/components/Monthly/MonthlyItems.vue";
import axios from "axios";
import RightTools from "@/components/Home/RightTools.vue";

export default {
    name: "MonthlyByTags",
    components: {RightTools, MonthlyItems},
    data(){
        return{
            // 项目分类标签数组
            labelItem:[],
            // 项目列表：
            projectLists:[],
            // 选择的分类：
            selectlabelItem:null,
            //种类对应项目数组：
            MonTypePro:[],
            count: 10,
            loading: false,
        }
    },
    //初始化
    mounted() {
      window.addEventListener('scroll', this.scrollToTop);
      this.initPage() ;
    },
    destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
    },
    computed:{
        noMore() {
            return this.count >= 10
        },
    },
    methods:{
        backTop () {
            const that = this
            let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                if (that.scrollTop === 0) {
                    clearInterval(timer)
                }
            }, 16)
        },

        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop () {
            const that = this
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            that.scrollTop = scrollTop
            if (that.scrollTop > 60) {
                that.btnFlag = true
            } else {
                that.btnFlag = false
            }
        },
        test(){
            var that = this;
            console.log(that.selectlabelItem);
        },
        // 初始化方法
        initPage(){
            this.selectlabelItem = this.$route.query.Protype;
            var that = this;
            this.getList(1,that.selectlabelItem);
        },
        goBack() {
            window.history.go(-1);
        },
        // 获取所有标签列表
        getLabel(){
            var that = this;
            axios({
                method: 'post',
                url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
                params: {
                }
            }).then(function (res){
                that.labelItem = [];
                let tmp = res.data;
                for(let i=0;i < tmp.length;i++){
                    let tmp = res.data[i]['categoryName'];
                    that.labelItem.push(tmp);
                }
                console.log(that.labelItem);
            })
        },
         getList(index,name){
            var that=this;
            if(this.selectlabelItem == '综合'){
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
                    // URL 中的查询参数
                    params: {
                        num:0,
                        name:name
                    }
                }).then((res)=>{
                    that.projectLists=res.data;
                });
            }else{
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
                    // URL 中的查询参数
                    params: {
                        num:index,
                        name:name
                    }
                }).then((res)=>{
                    that.projectLists=res.data;
                });
            }

        },
        load() {
            this.loading = true
            setTimeout(() => {
                this.count += 2
                this.loading = false
            }, 2000)
        },
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-page-header__left{
    left:10px;
    //display: none;
}
::v-deep .el-page-header__content{
    flex:1;
}
</style>