<template>
    <el-container style="display: flex;flex-direction: row;">
        <el-aside width="22vw"
                  style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 7vh;">
            <template>
                <el-card class="box-card"
                         style="position: fixed;width: 10vw;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
                    <div slot="header" class="clearfix">
                        <span><i class="el-icon-menu"></i> 热门标签</span>
                    </div>
                    <div class="bottom clearfix">
                        <el-scrollbar style="height:60vh">
                        <el-tabs v-model="currentTabName" tab-position="left" @tab-click="typeChange" lazy>
                            <el-tab-pane  v-for="(tag,index) in tags" :key="index" :index="tag.categoryId" :name="tag.categoryName" >
                                <span slot="label" style="border-radius: 10px;align-items: center;display: flex;flex-direction: row;justify-content: flex-start" v-html="tag.category"></span>
                            </el-tab-pane>
                        </el-tabs>
                        </el-scrollbar>
<!--                        <div v-for="(tag,index) in tags" :key="index" class="text item">-->
<!--&lt;!&ndash;                            <el-tag style="margin-top: 10px" type="success" v-html="tag"></el-tag>&ndash;&gt;-->
<!--                        </div>-->
                        <div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
                        <div>
                            <i class="el-icon-setting"></i>
                            <el-button type="text" class="button" @click="manageCategoryVisible=true">管理标签</el-button>
                        </div>
                    </div>
                </el-card>
            </template>
        </el-aside>
        <el-main style="display: flex;flex-direction: row;flex-wrap: nowrap;">
            <template>
                <div class="main">
                    <el-tabs v-model="activeName" type="border-card" style=";margin-top:2.5vh;width: 45vw;" @tab-click="tabChange">
                        <el-tab-pane label="最新" name="first">
                            <ul
                                    class="list"
                                    v-infinite-scroll="load"
                                    infinite-scroll-disabled="disabled">
                                <ol v-for="(project,index) in projectLists" :key="index" class="list-item"
                                    style="display: flex;flex-direction: column;margin-left: -80px;" >
                                    <ProjectList :project-lists="project"></ProjectList>
                                    <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 v-model="activeName" label="最热" name="second">
                            <div class="lsm-container">
                                <el-scrollbar class="scrollbar-wrapper" style="position: relative;">
                                    <div class="infinite-list-wrapper">
                                        <ul
                                                class="list"
                                                v-infinite-scroll="load"
                                                infinite-scroll-disabled="disabled">
                                            <ol v-for="(project,index) in projectLists" :key="index" class="list-item"
                                                style="display: flex;flex-direction: column;margin-left: -80px">
                                                <ProjectList :project-lists="project"></ProjectList>
                                                <el-divider></el-divider>
                                            </ol>
                                        </ul>
                                        <p v-if="loading" style="color: #9ca3af">加载中...</p>
                                        <p v-if="noMore" style="color: #9ca3af">-  你不经意间触碰到了底线 -</p>
                                    </div>
                                </el-scrollbar>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="margin-top: 2.5vh;margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
                    <el-card class="box-card" style="width: 15vw">
                        <el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
                        <UserInfo></UserInfo>
                    </el-card>

                    <el-card class="box-card" style="margin-top: 20px;width: 15vw">
                        <div slot="header" class="clearfix">
                            <div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between">
                                <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
                                    <span style="font-size: 16px;color: #9ca3af;font-weight: bold">用户总数</span>
                                    <span style="font-size: 30px">{{userTotal}}</span>
                                </div>
                                <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
                                    <span style="font-size: 16px;color: #9ca3af;font-weight: bold">开源项目</span>
                                    <span style="font-size: 30px">{{projectTotal}}</span>
                                </div>
                            </div>
<!--                            <el-statistic group-separator="," :precision="0" decimal-separator="." :value="userTotal" title="用户总数">-->
<!--                                <template slot="prefix">-->
<!--                                    <i class="el-icon-s-flag" style="color: red"></i>-->
<!--                                </template>-->
<!--                                <template slot="suffix">-->
<!--                                    <i class="el-icon-s-flag" style="color: blue"></i>-->
<!--                                </template>-->
<!--                            </el-statistic>-->

<!--                            <el-statistic group-separator="," :precision="0" decimal-separator="." :value="projectTotal" title="项目总数">-->
<!--                                <template slot="prefix">-->
<!--                                    <i class="el-icon-s-flag" style="color: red"></i>-->
<!--                                </template>-->
<!--                                <template slot="suffix">-->
<!--                                    <i class="el-icon-s-flag" style="color: blue"></i>-->
<!--                                </template>-->
<!--                            </el-statistic>-->
                        </div>
                        <div class="text item">
                            <div style=";font-size: 16px;color: #9ca3af;display: flex;flex-direction: row;justify-content: flex-start"> 关于本站 </div>
                            <span style="margin-top: 10px;font-size: 15px;display: flex;flex-direction: row;justify-content: flex-start;text-align: left; line-height: 1.8;">
                                    HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。
                                    希望大家能够在这里找到编程的快乐、 轻松搞定问题的技术方案、 大呼过瘾的开源神器，
                                    顺其自然地开启开源之旅。
                            </span>
                        </div>
                    </el-card>
                </div>
            </template>
<!--            登录注册-->
            <LoginDialog :login-dialog-visible.sync="loginDialogVisible"></LoginDialog>
            <!--管理标签弹框-->
            <el-dialog
                :visible.sync="manageCategoryVisible"
                width="50vw">
                    <el-card class="box-card">
                        <el-checkbox-group v-model="checkboxGroup" size="medium" :max="10">
                            <el-checkbox  style="margin-top: 20px" v-for="(tag,index) in tags" :key="index" v-html="tag.category" border size="medium"></el-checkbox>
                        </el-checkbox-group>
                    </el-card>
                <el-card class="box-card">
                    总共:
                </el-card>
            </el-dialog>
            <el-backtop target=".main" :visibility-height="20" :right="10" :bottom="10"></el-backtop>
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios'
import ProjectList from "@/components/Project/ProjectList.vue";
import UserInfo from "@/components/User/UserInfo.vue";
import LoginDialog from "@/components/Home/LoginDialog.vue";

export default {
    name: "HomeComponent",
    components: {LoginDialog, UserInfo, ProjectList},

    data() {
        return {
            userTotal:null,
            projectTotal:null,
            checkboxGroup: [],
            activeName: 'first',
            currentTabName:"综合",
            currentTabIndex:null,
            projectLists:[],
            tabindex:0,
            count: 10,
            loading: false,
            loginDialogVisible: false,
            manageCategoryVisible:false,
            tags:null,
        };
    },
    mounted() {
        // this.account(); //获取cookie的方法
        this.ProjectLists();
        this.categoryList();
        this.getUserTotal();
        this.getProjectTotal();
    },
    created() {
    },
    computed: {
        noMore() {
            return this.count >= 10
        },
        disabled() {
            return this.loading || this.noMore
        }
    },

    methods: {

        openLogin() {
            this.loginDialogVisible = true;
            // this.$cookie.delete('username')
            // this.$cookie.delete('password')
        },

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

        //-------首页列表-------
        ProjectLists() {
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
                // URL 中的查询参数
                params: {
                    num: "0",
                }
            }).then((res)=>{
                that.projectLists=res.data;
            });
        },
        projectListsByCount(index,name){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectMostStar',
                // URL 中的查询参数
                params: {
                    num: index,
                    name:name
                }
            }).then((res)=>{
                that.projectLists=res.data;
            });
        },
        tabChange(tab) {
            if(tab.name=="first"){
                if(this.currentTabIndex!=null){
                    this.typeChangeFun(this.currentTabIndex,this.currentTabName);
                }else {
                    this.ProjectLists();
                }
            }
            if (tab.name == "second") {
                if(this.currentTabIndex!=null){
                    this.projectListsByCount(this.currentTabIndex,this.currentTabName);
                }else {
                    this.projectListsByCount(this.tabindex);
                }
            }
        },

        typeChangeFun(index,name){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectLastByCate',
                // URL 中的查询参数
                params: {
                    num: index,
                    name:name
                }
            }).then((res)=>{
                that.projectLists=res.data;
            });
        },

        typeChange(tab){
            this.currentTabIndex=tab.index;
            if(this.activeName==="first"){
                this.typeChangeFun(tab.index,this.currentTabName);
            }
            if(this.activeName==="second"){
                this.projectListsByCount(tab.index,this.currentTabName);
            }
        },
        // 标签列表
        categoryList(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                // console.log(res);
                that.tags=res.data;
            });
        },

        getUserTotal(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/userNum',
                // URL 中的查询参数
                params: {
                }
            }).then((res)=>{
                that.userTotal=res.data;
            });
        },
        getProjectTotal(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
                // URL 中的查询参数
                params: {

                }
            }).then((res)=>{
                that.projectTotal=res.data;
            });
        },


    }
}
</script>

<style scoped>
::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
}
/*去掉切换时el-tab-pane底部的蓝色下划线*/
::v-deep .el-tabs__active-bar {
    background-color: transparent !important;
}

/*去掉tabs底部的下划线*/
::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
}
::v-deep .el-tabs__item:hover{
    background-color: #eeeeee;
}
::v-deep .el-tabs__item{
    text-align: center;
}
::v-deep .el-tabs__nav{
    /*margin-left: 7px;*/
}
::v-deep .el-tabs__item.is-active {
    background-color: #eeeeee;
}

::v-deep .el-scrollbar__wrap {
    /*overflow-y: hidden;*/
    overflow-x: hidden;
}
.el-card{
    border: none;
    border-radius: 10px;
}
.el-tabs{
    border: none;
    border-radius: 10px;
}
.el-tabs__nav-scroll {
    border-radius: 10px;
}
</style>