<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;justify-content: space-between">
                      <div style="display: flex;flex-direction: row;">
                          <el-avatar style="background-color: transparent" shape="square" :size="70" :src="github.avatar_url"></el-avatar>
                          <div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10px">
                          <span v-if="projectName" style="font-size: 30px;color: black;font-weight: bold;display: flex;justify-content: flex-start">
                            {{ projectName }}
                          </span>
                              <span  style="text-align: left;display: flex;flex-direction:row;justify-content: flex-start;font-size: 20px;color: rgb(107 114 128);">
                              {{projectTitle}}
                          </span>
                          </div>
                      </div>
                      <div style="display: flex;flex-direction: row;justify-content: space-between">
                          <el-divider direction="vertical" ></el-divider>
                            <div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: space-between">
                                <span style="font-size: 14px;color: #6b7280;display: flex;justify-content: flex-start">
                                    HelloGitHub 评分
                                </span>
                                <el-rate v-model="average" style="display: flex;justify-content: flex-start"  disabled show-score text-color="#ff9900"
                                         score-template="{value}"></el-rate>
                                <span style="font-size: 12px;color: #59A3A4;display: flex;justify-content: flex-start">
                                    {{ commentNum }} 个评分
                                </span>
                            </div>
                      </div>

                  </div>
                  <div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between">
                      <div style="width: 250px;height: 60px;">
                          <img :src="'https://starchart.cc/'+projectName+'.svg'" style="width: 250px;height: 60px;">
                      </div>
                      <div style="display: flex;flex-direction: row;align-items: center;">
                          <el-dropdown>
                              <el-button type="primary" style="height: 60px">
                                  访问<i class="el-icon-arrow-down el-icon--right"></i>
                              </el-button>
                              <el-dropdown-menu slot="dropdown">
                                  <el-dropdown-item><el-link :underline="false" @click="goTo(projectUrl)">源码</el-link></el-dropdown-item>
                                  <el-dropdown-item> <el-link :underline="false" @click="goTo('https://github.com/'+projectName+'/releases')">官方下载</el-link></el-dropdown-item>
                                  <el-dropdown-item v-show="fileAddress!==undefined"> <el-link @click="Download" :underline="false">快速下载</el-link></el-dropdown-item>
                              </el-dropdown-menu>
                          </el-dropdown>
                          <el-button v-show="isRouterAlive" v-if="Like===0" @click="addStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off" type="success">点 赞 {{startNum}}</el-button>
                          <el-button v-show="isRouterAlive" v-if="Like===1" @click="cancleStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-on" type="danger">取消点赞 {{startNum}}</el-button>
                      </div>
                  </div>

                  <div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top: 10px;justify-content: space-between">
                    <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center" >
                        <span>开源</span><div style="width: 8px;height: 8px;background-color: #9ca3af;border-radius: 50px;margin-left: 5px"></div>
                        <span style="margin-left: 5px;color: #00b2ff">{{github.license}}</span>
                    </div>
                      <div style="display: flex;flex-direction: row;flex-wrap: nowrap;">
                          <el-link :underline="false" @click="toComment('#comment')" icon="el-icon-chat-dot-square">评论</el-link>
                          <el-link :underline="false" @click="copyText" icon="el-icon-share" style="margin-left: 5px">分享 </el-link>
                      </div>
                  </div>

                  <div style="display: flex;margin-top: 20px">
                      <el-collapse v-model="activeNames">
                          <el-collapse-item  name="1">
                              <template slot="title">
                                  <table>
                                      <tr>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">星数</th>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">名称</th>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">主语言</th>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">活跃</th>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">订阅者</th>
                                      </tr>
                                      <tr>
                                          <td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.starNum)}}</td>
                                          <td v-if="github.name!==null" style="font-size: 20px;color: black;font-weight: bold;">{{briefName}}</td>
                                          <td v-if="github.language!==null" style="font-size: 20px;color: black;font-weight: bold">{{brief}}</td>
                                          <td v-if="github.allow_forking" style="font-size: 20px;color: black;font-weight: bold">是</td>
                                          <td v-if="!github.allow_forking" style="font-size: 20px;color: black;font-weight: bold">否</td>
                                          <td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.subscribers_count)}}</td>
                                      </tr>
                                  </table>
                              </template>
                              <div>
                                  <table>
                                      <tr>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Issues</th>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">组织</th>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">默认分支</th>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Forks</th>
                                          <th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">协议</th>
                                      </tr>
                                      <tr>
                                          <td style="font-size: 20px;color: black;font-weight: bold">{{github.open_issues_count}}</td>
                                          <td v-if="github.organization==='Organization'" style="font-size: 20px;color: black;font-weight: bold">是</td>
                                          <td v-else-if="github.organization!=='Organization'" style="font-size: 20px;color: black;font-weight: bold">否</td>
                                          <td style="font-size: 20px;color: black;font-weight: bold">{{github.default_branch}}</td>
                                          <td style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.forks_count)}}</td>
                                          <td style="font-size: 20px;color: black;font-weight: bold">{{github.license}}</td>
                                      </tr>
                                  </table>
                              </div>
                          </el-collapse-item>
                      </el-collapse>
                  </div>

                  <div>
                      <el-tabs v-model="activeName">
                          <el-tab-pane label="介绍" name="first">
                              <el-tiptap style="text-align: left;border: 1px solid rgba(150,152,150,0.87)" v-model="projectDescription" :readonly="true" :showMenubar="false" :extensions="extensions" />
                              <div style="display:flex;align-items: center;flex-direction: row;justify-content: space-between">
                                  <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
                                      <span style="font-size: 14px;margin-top: 10px">收录于: </span><el-tag style="margin-left: 10px;margin-top: 10px" size="medium">第 {{periodicals}} 期</el-tag>
                                      <div style="display: flex;flex-direction: row;margin-left: 10px;margin-top: 10px;align-items: center">
                                          <span>标签: </span>
                                          <div style="margin-left: 10px">
                                              <el-tag v-for="(item,index) in CategoryName" :key="index" size="medium" style="margin-left: 10px">{{item}}</el-tag>
                                          </div>
                                      </div>
                                  </div>

                                  <div @click="toUserPage" style="cursor: pointer;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
                                      <span style="font-size: 14px;margin-top: 10px">由</span>
                                      <el-avatar class="avatar" style="margin-left: 5px;margin-right: 5px;margin-top: 10px" :src="imageUrl" :size="30"></el-avatar>
                                      <span style="font-size: 14px;margin-top: 10px">分享</span>
                                  </div>
                              </div>
                          </el-tab-pane>
                      </el-tabs>
                  </div>

              </el-card>

              <el-card class="box-card" style="margin-top: 10px;border: none">
                  <div slot="header" class="clearfix" style="display: flex;justify-content: flex-start">
                      <span id="comment" style="font-size: 24px;font-weight: bold">评论</span>
                  </div>
                  <div class="text item">
                        <div style="display: flex;flex-direction: row;flex-wrap: nowrap">
                            <div style="width: 50px;height: 50px">
                                <el-avatar v-if="this.$cookie.get('username')!==null" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+this.$cookie.get('username')" :size="50"></el-avatar>
                                <el-avatar v-else-if="this.$cookie.get('username')===null" :size="50" style="background-color: rgb(192,196,204)">未登录</el-avatar>
                            </div>
                            <el-input
                                style="margin-left: 10px"
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="textarea">
                            </el-input>
                        </div>
                      <div style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center;margin-top: 10px;justify-content: space-between">
                          <div style="display: flex;flex-direction: row">
                              <el-radio v-model="radio" label="0" style="margin-left: 60px">没用过</el-radio>
                              <el-radio v-model="radio" label="1" style="margin-left: -10px">用过</el-radio>
                          </div>

                          <el-divider direction="vertical"></el-divider>
                          <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;margin-left: -500px">
                              <span>评 分:</span>
                              <el-rate
                                  style="margin-left: 10px"
                                  v-model="startValue"
                                  show-text>
                              </el-rate>
                          </div>
                          <el-button type="primary" plain @click="publishComment">发布</el-button>

                      </div>
                      <el-divider></el-divider>
                      <div v-if="isRouterAlive" style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
                          <div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start">
                              <span style="display: flex;flex-direction: row;justify-content: flex-start;font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
<!--                              <el-button-group>-->
<!--                                  <el-button :disabled="isDisabled" @click.once="getLastComment" type="primary" icon="el-icon-star-on" size="small">最新</el-button>-->
<!--                                  <el-button :disabled="isDisabled2" @click.once="getHotComment" type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>-->
<!--                              </el-button-group>-->
                              <el-empty v-show="commentContent.length ===0" description="暂无评论"></el-empty>
                              <el-tabs v-show="commentContent.length!==0" type="card" style="margin-top: 10px" v-model="activeCommentName" @tab-click="getComment">
                                  <el-tab-pane name="last">
                                      <span slot="label"><i class="el-icon-star-on"></i>最新</span>
                                      <div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
                                          <div style="display: flex;flex-direction: row">
                                              <div style="cursor: pointer;width: 50px;height: 50px;" @click="toUserPage2(item.username)" >
                                                  <el-avatar  :size="50" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+item.username">{{item.username}}</el-avatar>
                                              </div>
                                              <div style="display: flex;flex-direction: column;justify-content: space-between">
                                                  <div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
                                                      <span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
                                                      <span style="margin-left: 10px">评分: </span>
                                                      <el-rate
                                                          style="margin-left: 10px"
                                                          v-model="item.star" disabled>
                                                      </el-rate>
                                                      <span style="margin-left: 10px">

                                              <el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
                                              <el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
                                          </span>
                                                  </div>
                                                  <div style="margin-left: 10px;margin-top: 5px">
                                                      <el-card style="border: none;text-align:left;">
                                                          <span>{{item.content}}</span>
                                                      </el-card>

                                                  </div>
                                                  <div style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 10px;margin-top: 5px">
                                                      <span style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
                                                      <div style="display: flex;align-items: center">
                                                          <span style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
                                                          <el-link @click="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
                                                      </div>

                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </el-tab-pane>
                                  <el-tab-pane name="hot">
                                      <span slot="label"><i class="el-icon-s-opportunity"></i>最热</span>
                                      <div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
                                          <div style="display: flex;flex-direction: row">
                                              <div style="cursor: pointer;width: 50px;height: 50px;" @click="toUserPage2(item.username)">
                                                  <el-avatar :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+item.username"  :size="50">{{item.username}}</el-avatar>
                                              </div>
                                              <div style="display: flex;flex-direction: column;justify-content: space-between">
                                                  <div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
                                                      <span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
                                                      <span style="margin-left: 10px">评分: </span>
                                                      <el-rate
                                                          style="margin-left: 10px"
                                                          v-model="item.star" disabled>
                                                      </el-rate>
                                                      <span style="margin-left: 10px">

                                              <el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
                                              <el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
                                          </span>
                                                  </div>
                                                  <div style="margin-left: 10px;margin-top: 5px">
                                                      <el-card style="border: none;text-align:left;">
                                                          <span>{{item.content}}</span>
                                                      </el-card>

                                                  </div>
                                                  <div style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 10px;margin-top: 5px">
                                                      <span style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
                                                      <div style="display: flex;align-items: center">
                                                          <span style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
                                                          <el-link @click.once="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
                                                      </div>

                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </el-tab-pane>
                              </el-tabs>
                          </div>



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

<script>
import axios from "axios";
import Vue from "vue";
import {
    // 罗列出需要的功能按钮
    Doc,
    Text,
    Paragraph,
    Heading,
    Bold,
    Underline,
    Italic,
    Strike,
    ListItem,
    BulletList,
    OrderedList,
} from 'element-tiptap';
import RightTools from "@/components/Home/RightTools.vue";

export default {
    name: "ProjectDetail",
    components: {RightTools},
    data(){
        return{
            starValue:null,
            activeNames: [],
            activeName:'first',
            activeCommentName:'last',
            loginDialogVisible:false,
            editorOption: {
                theme: 'bubble',
                modules: {
                    toolbar: null,
                },
            },
            textarea:'',
            radio:'0',
            startValue: 0,
            CategoryName:null,
            projectName:null,
            projectTitle:null,
            projectUrl:null,
            startNum:null,
            num:null,
            projectDescription:null,
            projectIco:null,
            periodicals:null,
            userId:null,
            projectId:null,
            commentContent:[],
            commentNum:0,
            extensions: [
                new Doc(),
                new Text(),
                new Paragraph(),
                new Heading({ level: 5 }), // 支持多级标题，设置为5级
                new Bold({ bubble: false }), // 在气泡菜单中渲染菜单按钮
                new Underline({ bubble: false, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
                new Italic(),
                new Strike(),
                new ListItem(),
                new BulletList(),
                new OrderedList(),
            ],
            isRouterAlive:true,
            isDisabled:false,
            isDisabled2:false,
            Like:null,
            checked:false,
            tabCheckedLast:true,
            tabCheckedHot:false,
            username:'',
            userUri:'',
            average:0,
            github:{
                starNum:null,
                language:'',
                watchers_count:null,
                subscribers_count:null,
                allow_forking:null,
                open_issues_count:null,
                forks_count:null,
                organization:null,
                license:null,
                name:'',
                default_branch:null,
                avatar_url:null,
            },
            totalStar:3.7,
            Content:'',
            imageUrl:'',
            fileAddress:'',
        }
    },
    mounted() {
        this.getProjectDetail();
        this.getLastComment();
        this.isStart();
        // this.getUserInfo();
        this.getGithub();
    },
    watch: {
        $route () {
            if(this.$route.query.refresh){
                this.getProjectDetail() //重新调用http请求实现页面的重新渲染
            }
        }
    },
    methods:{
        toUserPage() {
            this.$router.push({
                path: '/UserInfoPage',
                query: {
                    name: this.username,
                    refresh: true
                }
            })
        },
        toUserPage2(username) {
            this.$router.push({
                path: '/UserInfoPage',
                query: {
                    name: username,
                    refresh: true
                }
            })
        },
        toComment(id){
            document.querySelector(id).scrollIntoView(true)
            var auchor=this.$el.querySelector(id)
            document.body.scrollTop=auchor.offsetTop
        },

        goTo(url){
            window.open(url);
        },
        goBack() {
            window.history.go(-1);
        },
        getProjectDetail(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectProById',
                // URL 中的查询参数
                params: {
                    id:this.$route.query.id
                }
            }).then(function (res) {
                that.CategoryName=res.data.CategoryName;
                that.projectName=res.data.project.projectName;
                that.projectTitle=res.data.project.projectTitle;
                that.projectUrl=res.data.project.projectUrl;
                that.startNum=res.data.project.startNum;
                that.projectDescription=res.data.project.projectDescription;
                that.projectIco=res.data.project.projectIco;
                that.periodicals=res.data.project.periodicals;
                that.userId=res.data.project.userId;
                that.projectId=res.data.project.projectId;
                that.num=res.data.project.num;
                that.average=res.data.project.average;
                that.username=res.data.project.username;
                that.fileAddress=res.data.project.fileAddress;
                // that.userUri=res.data.project.userUri;
                that.getDetailByGitHub();
                // that.getGithub();
                that.changeAvatarByLocal();
            });
        },
        reload() {
            this.isRouterAlive = false;
            this.$nextTick( ()=> {
                this.isRouterAlive = true;
            });
        },

        getComment(tab){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
                // URL 中的查询参数
                params: {
                    id:this.$route.query.id,
                    trait:tab.name
                }
            }).then(function (res) {
                that.commentContent=res.data;
                that.commentNum=Object.keys(that.commentContent).length;
                if(tab.name==='last'){
                    that.tabCheckedLast=true;
                    that.tabCheckedHot=false;
                }else if(tab.name==='hot'){
                    that.tabCheckedHot=true;
                    that.tabCheckedLast=false;
                }
            });
        },
        publishComment(){
            var that=this;
            if(this.$cookie.get('username')!=null){
                if(this.textarea !==''){
                    axios({
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8082/helloGithub_war_exploded/comment',
                        // URL 中的查询参数
                        params: {
                            id:that.$route.query.id,
                            star:that.startValue,
                            content:that.textarea,
                            isUsed: that.radio,
                        }
                    }).then(function (res) {
                        if (res.data.code === 200) {
                            Vue.prototype.$notify({
                                title: '成功',
                                message: ('i', {style: 'color: teal'}, res.data.msg),
                                type: 'success',
                                offset: 50
                            });
                            that.getLastComment();
                            that.getProjectDetail();
                            that.reload();
                        } else {
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: res.data.msg,
                                offset: 50
                            });
                        }
                    });
                }else{
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: "请填写评论内容！",
                        offset: 50
                    });
                }

            }else{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: "请先登录！",
                    offset: 50
                });
            }


        },
        formatNumber(num) {
            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
        },
        // getUserInfo() {
        //     var that = this;
        //     if(this.$cookie.get("username")!=null){
        //         axios({
        //             method: 'post',
        //             // 请求的地址
        //             url: 'http://localhost:8082/helloGithub_war_exploded/retUser',
        //             // URL 中的查询参数
        //             params: {
        //                 username: this.$cookie.get("username")
        //             }
        //         }).then(function (res) {
        //             that.imageUrl = res.data.userAvatar;
        //             // console.log(res);
        //         });
        //     }else{
        //         return;
        //     }
        // },

        addLike(id){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/addLike',
                // URL 中的查询参数
                params: {
                    id:id
                }
            }).then((res)=>{
                if(res.data.code===500){
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: res.data.msg,
                        offset: 50
                    });
                    return;
                }else{
                    if(!that.tabCheckedLast){
                        that.getHotComment();
                    }else{
                        that.getLastComment();
                    }
                }
            })
        },
        getHotComment(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
                // URL 中的查询参数
                params: {
                    id:this.$route.query.id,
                    trait:'hot'
                }
            }).then(function (res) {
                that.commentContent=res.data;
            });
        },
        getLastComment(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
                // URL 中的查询参数
                params: {
                    id:this.$route.query.id,
                    trait:'last'
                }
            }).then(function (res) {
                // console.log(res);
                that.commentContent=res.data;
                that.commentNum=Object.keys(that.commentContent).length;

            });
        },
        isStart(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/whetherLike',
                // URL 中的查询参数
                params: {
                    proId:this.$route.query.id,

                }
            }).then(function (res) {
                that.Like=res.data;
            });
        },
        addStar(){
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/whetherAddLike',
                // URL 中的查询参数
                params: {
                    proId:this.$route.query.id,
                }
            }).then((res)=>{
                if (res.data.code === 500) {
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: res.data.msg,
                        offset: 50
                    });
                } else {
                    this.getProjectDetail();
                    this.isStart();
                    this.$router.push({
                        path:'/ProjectDetail',
                        query: {
                            id: this.projectId, refresh: true
                        }
                    })
                }
            })
        },
        cancleStar(){
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/whetherCancelLike',
                // URL 中的查询参数
                params: {
                    proId:this.$route.query.id,
                }
            }).then((res)=>{
                if (res.data.code === 500) {
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: res.data.msg,
                        offset: 50
                    });
                } else {
                    this.getProjectDetail();
                    this.isStart();
                    // window.location.reload()
                    this.$router.push({
                        path:'/ProjectDetail',
                        query: {
                            id: this.projectId, refresh: true
                        }
                    })
                }
            })
        },


        getDetailByGitHub(){
            var that=this;
            axios({
                method: 'get',
                // 请求的地址
                url: '/github/'+this.projectName,
                // URL 中的查询参数
                params: {

                }
            }).then((res)=>{
                if(res.data){
                    that.github.starNum=res.data.stargazers_count;
                    that.github.language=res.data.language;
                    that.github.watchers_count=res.data.watchers_count;
                    that.github.subscribers_count=res.data.subscribers_count;
                    that.github.allow_forking=res.data.allow_forking;
                    that.github.open_issues_count=res.data.open_issues_count;
                    that.github.forks_count=res.data.forks_count;
                    that.github.organization=res.data.owner.type;
                    that.github.license=res.data.license.spdx_id;
                    that.github.name=res.data.name;
                    that.github.default_branch=res.data.default_branch;
                    that.github.avatar_url=res.data.owner.avatar_url;
                    that.saveGithubInfo();
                    return true;
                }else{
                    return false;
                }

            });

        },
        copyText(){
            this.Content=this.projectName+' : ' +this.projectTitle+', 更多详情尽在 : '+this.projectUrl;
            var input = document.createElement("input");   // js创建一个input输入框
            input.value = this.Content;  // 将需要复制的文本赋值到创建的input输入框中
            document.body.appendChild(input);    // 将输入框暂时创建到实例里面
            input.select();   // 选中输入框中的内容
            document.execCommand("Copy");   // 执行复制操作
            document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
            Vue.prototype.$notify({
                title: '成功',
                message: ('i', {style: 'color: teal'}, "项目信息已复制，快去分享吧~"),
                type: 'success',
                offset: 50
            });
        },

        saveGithubInfo(){
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/insertGithubInfo',
                // URL 中的查询参数
                params: {
                    projectId:this.$route.query.id,
                    avatar:this.github.avatar_url,
                    name:this.github.name,
                    starImgUrl:'https://starchart.cc/'+this.projectName+'.svg',
                    starCount:this.github.starNum,
                    mainLanguage:this.github.language,
                    isActive:this.github.allow_forking,
                    subscriber:this.github.subscribers_count,
                    issues:this.github.open_issues_count,
                    isOrganization:this.github.organization,
                    defaultBranch:this.github.default_branch,
                    forks:this.github.forks_count,
                    protocol:this.github.license,
                    version:'0',
                }
            })
        },

        changeAvatarByLocal(){
            if(this.username!==null){
                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方法
                })
            }else{
                return;
            }


        },
        Download(){
            window.open('http://localhost:8082/helloGithub_war_exploded/DownLoad?id='+this.$route.query.id);
            // axios({
            //     method: 'post',
            //     // 请求的地址
            //     url: '/api/DownLoad',
            //     // URL 中的查询参数
            //     params:{
            //         id:this.$route.query.id,
            //     },
            //     responseType: 'blob'
            // }).then(()=>{
            //     Vue.prototype.$notify({
            //         title: '提示',
            //         message: "请等待下载执行",
            //         offset: 50,
            //         type:"success"
            //     });
            // })
        },

        getGithub(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/returnGithubInfo',
                // URL 中的查询参数
                params: {
                    projectId:this.$route.query.id
                }
            }).then(function (res) {
                if(!res.data){
                    return false;
                }else{
                    that.github.starNum=res.data.starCount;
                    that.github.language=res.data.mainLanguage;
                    that.github.subscribers_count=res.data.subscriber;
                    that.github.open_issues_count=res.data.issues;
                    that.github.forks_count=res.data.forks;
                    that.github.allow_forking=res.data.isActive;
                    that.github.license=res.data.protocol;
                    that.github.name=res.data.name;
                    that.github.default_branch=res.data.defaultBranch;
                    that.github.avatar_url=res.data.avatar;
                }

            });
        },


    },
    computed: {
        // 对时间进行格式化
        formatTime: function() {
            if (this.projectLists) {
                const dt = new Date(this.projectLists.submitTime)
                const year=dt.getFullYear()
                const month = dt.getMonth()
                const date = dt.getDate()
                return `${year}-${month}-${date}`
            }
            return '';
        },
        // 截取文章内容的前 35 个字，并加上省略号
        brief: function() {
            return this.github.language.substr(0, 7)+'...';
        },
        briefName: function() {
            return this.github.name.substr(0, 7)+'...';
        },

    }


}
</script>

<style scoped>
::v-deep .el-page-header__left{
    left:-300px;
}
::v-deep .el-divider--vertical {
    display: inline-block;
    width: 1px;
    height: auto;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
}
::v-deep .el-collapse-item__header {
    display: flex;
    align-items: center;
    height: 100px;
    line-height: 48px;
    background-color: #FFFFFF;
    color: #303133;
    cursor: pointer;
    border-bottom: 1px solid #D0E0DB;
    font-size: 13px;
    font-weight: 500;
    transition: border-bottom-color .3s;
    outline: none;
}
::v-deep .ql-toolbar.ql-snow {
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    padding: 8px;
    display: none;
}
::v-deep .el-card__header{
    border-bottom: none;
}

::v-deep .avatar :hover{
    transform: rotate(360deg);
}

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