<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;">
                        个人主页
                    </div>
                </el-page-header>
            </div>
            <div class="PageContent">
                <el-card class="box-card" style="border: none;">
                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start">
                        <div style="display: flex;flex-direction: row;justify-content: space-between">
                            <div @click="changeAvatar" style="cursor: pointer;width: 100px;height: 100px;display: flex;flex-direction: row;align-items: center">
                                <el-avatar  style="display: flex;align-items: center;justify-content: center" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+username" :size="90"></el-avatar>
                            </div>
                            <div style="display: flex;flex-direction: column;margin-left: 15px;">
                                <div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
                                    <span style="font-size: 20px;font-weight: bold;">{{username}}</span>
                                    <span style="font-size: 15px;font-weight: bold;color: #3b82f6;margin-left: 10px">Lv.{{userLevel}}</span>
                                </div>
                                <span style="display: flex;justify-content:flex-start;margin-top: 10px;color: #6b7280;font-size: 15px">你是 HelloGitHub 社区的第<span style="font-size: 16px;color:#2b2e33;font-weight: bold "> {{userId}} </span>位用户，于 {{creatTime}} 加入。</span>
                                <span style="display: flex;justify-content: flex-start;margin-top: 10px;color: #6b7280;font-size: 15px">
                                    分享
                                    <span v-if="projectNum!=null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{projectNum}}</span>
                                    <span v-if="projectNum==null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
                                    个开源项目,
                                    <span v-if="Object.keys(commentList).length!==0" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{Object.keys(commentList).length}}</span>
                                    <span v-if="Object.keys(commentList).length===0" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
                                    份评价,
                                    共获得
                                    <span v-if="contributionValue!=null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{contributionValue}}</span>
                                    <span v-if="contributionValue==null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
                                    点贡献值.
                                    <span style="font-size: 16px;color:#2b2e33;font-weight: bold ">
                                        {{Object.keys(article).length}}
                                    </span>
                                    篇文章。
                                </span>
                            </div>
                            <el-progress type="circle" :percentage="contributionValue" :width="100"  :show-text="true"></el-progress>
                            <div style="margin-left: 8px;display: flex;flex-direction: column;align-content: space-between;justify-content: space-between">
                                <el-progress style="width: 90px" :show-text="false" :percentage="commentList.length"></el-progress>
                                <el-progress style="width: 90px" :show-text="false" :percentage="projectList.length" status="success"></el-progress>
                                <el-progress style="width: 90px" :show-text="false" :percentage="like.length" status="warning"></el-progress>
                                <el-progress style="width: 90px" :show-text="false" :percentage="Object.keys(article).length" status="exception"></el-progress>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card" style="border: none;margin-top: 20px">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="评论" name="first">
                            <el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
                                <span style="font-size: 16px;font-weight: bold">总共评论: {{commentList.length}} 条</span>
                            </el-card>
                            <el-empty v-show="commentList.length===0" description="暂无评论" :image-size="115"></el-empty>
                            <div v-show="commentList.length!==0" v-for="(item,index) in commentList" :key="index">
                                <UserComments :comments="item" :index="index"></UserComments>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="项目" name="second">
                            <el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
                                <span style="font-size: 16px;font-weight: bold">总共提交: {{projectList.length}} 个</span>
                            </el-card>
                            <el-empty v-show="projectList.length===0" description="暂无项目" :image-size="115"></el-empty>
                            <div v-show="projectList.length!==0" v-for="(item,index) in projectList" :key="index">
                                <UserProjects :project="item" :index="index"></UserProjects>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane label="点赞" name="third">
                            <el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
                                <span style="font-size: 16px;font-weight: bold">总共点赞: {{like.length}} 个</span>
                            </el-card>
                            <el-empty v-show="like.length===0" description="暂无点赞" :image-size="115"></el-empty>
                            <div v-show="like.length!==0" v-for="(item,index) in like" :key="index">
                                <UserProjects :project="item" :index="index"></UserProjects>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="文章" name="four">
                            <el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
                                <span style="font-size: 16px;font-weight: bold">总文章: {{Object.keys(article).length}} 篇</span>
                            </el-card>
                            <el-empty v-show="Object.keys(article).length===0" description="暂无点赞" :image-size="115"></el-empty>
                            <div v-show="Object.keys(article).length!==0" v-for="(item,index) in article" :key="index">
                                <UserArticles :article="item"></UserArticles>
                            </div>

                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </div>
        </div>
        <RightTools></RightTools>
        <el-dialog
            title="修改头像"
            :visible.sync="openChangeAvatar"
            width="25vw"
            append-to-body
            :close-on-click-modal="false"
            >
<!--                <span style="font-size: 14px;color: #9ca3af">选择一种方式即可！</span>-->
<!--            <div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: space-between">-->
<!--                <el-input placeholder="请输入头像链接" style="width: 17vw" v-model="AvatarUrl">-->
<!--                    <template slot="prepend">url:</template>-->
<!--                </el-input>-->
<!--                <el-button @click="changeAvatarByUrl" size="small" type="primary">上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
<!--            </div>-->

            <div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: center">
                <el-upload
                    class="upload-demo"
                    drag
                    action=""
                    :http-request="upload"
                    multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件。</div>
                </el-upload>

            </div>
        </el-dialog>

    </div>
</template>

<script>
import axios from "axios";
import RightTools from "@/components/Home/RightTools.vue";
import UserProjects from "@/components/User/UserProjects.vue";
import UserComments from "@/components/User/UserComments.vue";
import UserArticles from "@/components/User/UserArticles.vue";
import Vue from "vue";

export default {

    name: "UserInfoPage",
    components: {UserArticles, UserComments, UserProjects, RightTools},
    data(){
        return{
            activeName:'first',
            username: null,
            contributionValue:0,
            creatTime:null,
            projectNum:0,
            userId:null,
            projectList:[],
            commentList:[],
            like:[],
            article:[],
            openChangeAvatar:false,
            // AvatarUrl:'',
            // imageUrl:'',
            userLevel:null,
        }
    },
    mounted() {
        this.getUserInfo()
        this.getUserDetail();
        setTimeout(()=>{
            this.updateUserLevel();
            this.getUserInfo();
        },1000)
        // this.changeAvatarByLocal();

    },
    created() {
         this.updateUserLevel();
        this.getUserInfo();


    },
    watch: {
        $route () {
            if(this.$route.query.refresh){
                this.getUserInfo() //重新调用http请求实现页面的重新渲染
                this.getUserDetail();
            }
        },
    },
    computed: {
        headers() {
            return {
                "Content-Type": "multipart/form-data"
            };
        },
    },
    methods: {
        goBack() {
            window.history.go(-1);
        },
        getUserInfo(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/retUser',
                // URL 中的查询参数
                params: {
                    username:this.$route.query.name
                }
            }).then(function (res) {
                that.username=res.data.userName;
                that.contributionValue=res.data.contributionValue;
                that.creatTime=res.data.creatTime;
                that.projectNum=res.data.projectNum;
                that.userId=res.data.userId;
                // that.imageUrl=res.data.userAvatar;
                that.userLevel=res.data.userLevel;
            });
        },
        getUserDetail(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/userDetail',
                // URL 中的查询参数
                params: {
                    username:this.$route.query.name
                }
            }).then(function (res) {
                // console.log(res);
                that.projectList=JSON.parse(res.data.project);
                that.commentList=JSON.parse(res.data.comment);
                that.like=JSON.parse(res.data.like)
                that.article=JSON.parse(res.data.article);
                // console.log(that.commentList);
            });
        },
        updateUserLevel(){
            if(this.$cookie.get("username")!=null){
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/levelup',
                    // URL 中的查询参数
                    params: {

                    }
                });
            }else{
                return;
            }
        },
        changeAvatar(){
            if(this.$route.query.name!==this.$cookie.get('username')||this.$cookie.get('username')===null){
                return;
            }else{
                this.openChangeAvatar=true;
            }

        },
        // changeAvatarByUrl(){
        //     if(this.AvatarUrl!==''){
        //         axios({
        //             method: 'post',
        //             // 请求的地址
        //             url: 'http://localhost:8082/helloGithub_war_exploded/userAvatar',
        //             // URL 中的查询参数
        //             params: {
        //                 url: this.AvatarUrl
        //             }
        //         }).then(function (res) {
        //             if(res.data.code===200){
        //                 Vue.prototype.$notify({
        //                     title: '上传成功',
        //                     message: ('i', {style: 'color: teal'}, res.data.msg),
        //                     type: 'success',
        //                     offset: 50
        //                 });
        //             }else{
        //                 Vue.prototype.$notify.error({
        //                     title: '错误',
        //                     message: "上传失败",
        //                     offset: 50
        //                 });
        //             }
        //
        //         });
        //     }else{
        //         Vue.prototype.$notify.error({
        //             title: '错误',
        //             message: "请先填写图片链接",
        //             offset: 50
        //         });
        //     }
        //
        // },

          upload(params){
            var that=this;
            const formData = new FormData();
            formData.append("file", params.file);
            axios({
                method: 'post',
                // 请求的地址
                url: '/upload/UploadHandle',
                headers:{"Content-Type": "multipart/form-data"},
                // URL 中的查询参数
                data:formData,
                params: {
                    username: this.$cookie.get('username')
                }
            }).then((res)=>{
                if(res.data.code===500){
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: res.data.msg,
                        offset: 50
                    });
                }else{
                    Vue.prototype.$notify({
                        title: '成功',
                        message: ('i', {style: 'color: teal'}, "上传成功"),
                        type: 'success',
                        offset: 50
                    });
                    that.openChangeAvatar=false;
                    setTimeout(()=>{
                        window.location.reload();
                    },500)

                }

            })
        },
        // changeAvatarByLocal(){
        //     var that=this;
        //     axios({
        //         method: 'post',
        //         // 请求的地址
        //         url: '/api/retUserAv',
        //         // URL 中的查询参数
        //         params:{
        //             username:this.username,
        //         },
        //         responseType:'blob'
        //     }).then((res)=>{
        //        that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
        //     })
        //
        // },


    }
}
</script>

<style>
.el-page-header__left{
    position: relative;
    left:-20vw;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
::v-deep .el-page-header__left{
    left:10px;
}
::v-deep .el-page-header__content{
    flex:1;
}
</style>