<template>
    <div class="header">
        <div class="logo-all">
            <img class="logo" src="../../assets/logo/logo.png">
            <span class="HeaderWord">HelloGithub</span>
        </div>

        <el-menu :default-active="$route.path" class="el-menu" mode="horizontal"
                 active-text-color="#42b983"
                 router>
            <el-menu-item class="menu-item" index="/home"><i class="el-icon-s-home" style="color: #13ce66"></i>首 页</el-menu-item>
            <el-menu-item class="menu-item" index="/monthly"><i class="el-icon-s-claim" style="color: #00b2ff"></i>月 刊</el-menu-item>
            <el-menu-item class="menu-item" index="/ranking"><i class="el-icon-trophy" style="color: #ffca00"></i>榜 单
            </el-menu-item>
            <el-menu-item class="menu-item" index="/paper"><i class="el-icon-s-management" style="color: #5b6bc9"></i>文 章</el-menu-item>
        </el-menu>
        <SearchInput class="HeaderInput"></SearchInput>
        <el-button  @click="openPublishProjects" v-if="this.$route.path!=='/paper'" class="HeaderSubmitBtn" type="success" round icon="el-icon-thumb">提交项目</el-button>
        <el-button @click="openPublishDialog" v-if="this.$route.path ==='/paper'" class="HeaderSubmitBtn" type="primary" round icon="el-icon-edit">发布文章</el-button>

        <el-dialog
            :visible.sync="openPublishArticle"
            width="55vw"
            append-to-body
            :close-on-click-modal="false"
            >
            <div slot="title" class="dialog-title" style="display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center">
                <span class="title-text" style="font-size: 18px;font-weight: bold;">发布文章</span>
            </div>
            <div>
                <PublishArticle></PublishArticle>
            </div>
        </el-dialog>


        <el-dialog
            :visible.sync="openPublishProject"
            width="55vw"
            append-to-body
            :close-on-click-modal="false"
        >
         <div slot="title" class="dialog-title" style="display: flex;flex-direction: column;flex-wrap: nowrap;;align-items: center">
            <span style="font-size: 16px;font-weight: bold">
                欢迎自荐/分享开源项目
            </span>
             <span style="font-size: 12px">
                 通过审核的开源项目，才会在首页展示
             </span>
        </div>
            <el-card style="border: none">
                <el-form v-model="form" :rules="rules" ref="ruleForm">
                    <el-form-item prop="url">
                        <el-input placeholder="请输入项目地址" v-model="form.url" @blur="getNameAndCheck">
                            <template slot="prepend">github:</template>
                        </el-input>
                        <span style="font-size: 12px;color: #9ca3af">👆 仅接受 GitHub 上的开源项目</span>
                    </el-form-item>
                    <el-form-item prop="title">
                        <el-input
                            type="text"
                            v-model="form.title"
                            placeholder="标题: 请用一句话介绍项目"
                            maxlength="25"
                            minlength="5"
                            show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="tag">
                        <el-select style="width: 50vw" size="medium" :multiple="true" placeholder="请选择项目标签"
                                   v-model="form.tag" clearable :multiple-limit="3">
                            <el-option
                                v-for="item in form.tags"
                                :key="item.categoryId"
                                :label="item.categoryName"
                                :value="item.categoryId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="content">
                        <span style="color: #9ca3af">描述: 请从技术栈，功能，适用场景，解决那些痛点等方面介绍项目，突出特点和闪光的亮点。</span>
                        <el-tiptap style="margin-top: 5px" v-model="form.content" :readonly="false" :showMenubar="true"
                                   :extensions="extensions"/>
                    </el-form-item>
                    <el-form-item  style="display: flex;flex-direction: row;justify-content: flex-end">
                        <el-button type="primary" @click="submitProject" round>提交<i class="el-icon-s-promotion"></i></el-button>
                    </el-form-item>
                </el-form>

            </el-card>
        </el-dialog>

        <el-dialog
            :visible.sync="openUploadFile"
            width="15vw"
            append-to-body
            :close-on-click-modal="false"
        >
            <div slot="title" class="dialog-title" style="display: flex;flex-direction: column;flex-wrap: nowrap;;align-items: center">
            <span style="font-size: 16px;font-weight: bold">
                是否要上传项目源码？
            </span>
            </div>
            <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
                <el-button @click="openFileUpload" type="success" icon="el-icon-check" circle></el-button>
                <el-button @click="closeUploadFile" type="danger" icon="el-icon-close" circle></el-button>
            </div>

        </el-dialog>

        <el-dialog
            :visible.sync="openFileUploadDialog"
            width="35vw"
            append-to-body
            :close-on-click-modal="false"
        >
            <div style="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">只能上传zip文件，且不超过50mb</div>
                </el-upload>
            </div>


        </el-dialog>
    </div>
</template>

<script>
import SearchInput from "@/components/Home/SearchInput.vue";
import PublishArticle from "@/components/Paper/PublishArticle.vue";
import Vue from "vue";
import {
    Blockquote,
    Bold, BulletList,
    CodeBlock, CodeView,
    Doc, FontSize, FontType, FormatClear, HardBreak,
    Heading, History, HorizontalRule,
    Iframe,
    Image, Indent, Italic, LineHeight,
    Link, ListItem, OrderedList,
    Paragraph, Preview, Print, SelectAll, Strike,
    Text, TextAlign, TextColor, TextHighlight, TodoItem, TodoList, TrailingNode,
    Underline
} from "element-tiptap";
import axios from "axios";

export default {
    name: "HeaderComponent",
    components: {PublishArticle, SearchInput},
    data() {
        return {
            openPublishArticle:false,
            openPublishProject:false,
            openFileUploadDialog:false,
            extensions: [
                new Link,
                new Image,
                new Iframe,
                new CodeBlock,
                new Blockquote,
                new Doc(),
                new Text(),
                new Paragraph(),
                new Heading({level: 5}), // 支持多级标题，设置为5级
                new Bold({bubble: true}), // 在气泡菜单中渲染菜单按钮
                new Underline({bubble: true, menubar: false}), // 在气泡菜单而不在菜单栏中渲染菜单按钮
                new Italic(),
                new Strike(),
                new ListItem(),
                new BulletList(),
                new OrderedList(),
                new TodoItem,
                new TodoList,
                new TextAlign({alignments: ['left', 'center', 'right', 'justify'],}),
                new Indent({
                    minIndent: 0,
                    maxIndent: 7,
                }),
                new LineHeight({lineHeights: ['100%', '200%', '300%']}),
                new HorizontalRule,
                new HardBreak,
                new TrailingNode,
                new History,
                new FormatClear,
                new TextColor({bubble: true}),
                new TextHighlight,
                new Preview,
                new Print,
                new SelectAll,
                new FontType,
                new FontSize,
                new CodeView,
            ],
            form: {
                url: null,
                title: null,
                name: null,
                tags: [],
                tag: [],
                content: null,
            },
            rules: {
                url: [
                    // required：规则，o：失去焦点触发
                    {required: true, message: "请输入项目地址", trigger: "blur"},
                ],
                title: [{required: true, message: "请输入项目标题", trigger: "blur"}],
                content: [{required: true, message: "请输入项目描述", trigger: "blur"}],
                tag: [{required: true, message: "请选择项目标签", trigger: "blur"}],
            },
            openUploadFile:false,
            avatar_url:null,
        }
    },
    mounted() {
        // this.splitUrl();
        this.categoryList();
    },
    methods:{
        upload(params){
            var that=this;
            const formData = new FormData();
            formData.append("file", params.file);
            axios({
                method: 'post',
                // 请求的地址
                url: '/upload/commitProjectFile',
                headers:{"Content-Type": "multipart/form-data"},
                // URL 中的查询参数
                data:formData,
                params: {
                    projectName: this.form.name
                }
            }).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.openFileUploadDialog=false;
                    setTimeout(()=>{
                        window.location.reload();
                    },500)

                }

            })
        },
        openFileUpload(){
          this.openUploadFile=false;
          this.openFileUploadDialog=true;
        },
        openPublishDialog(){
            if(this.$cookie.get('username')){
                this.openPublishArticle=true;
            }else{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: "请先登录!",
                    offset: 50
                });
            }
        },
        openPublishProjects(){
            if(this.$cookie.get('username')){
                this.openPublishProject=true;
            }else{
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: "请先登录!",
                    offset: 50
                });
            }
        },
        splitUrl() {
            let url = this.form.url;
            let parts = url.split("/");
            let projectName = parts[parts.length - 1];
            let userName = parts[parts.length - 2];
            this.form.name = userName + '/' + projectName
            console.log(this.form.name);
        },
        categoryList() {
            var that = this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/retLabel',
                // URL 中的查询参数
                params: {}
            }).then((res) => {
                that.form.tags = res.data;
            });
        },
        getNameAndCheck() {
            if (this.form.url === null) {
                return;
            } else {
                this.splitUrl();
                this.isExist();
                this.getDetailByGitHub();
            }
        },
        closeUploadFile(){
            this.openPublishProject=false;
            this.openUploadFile=false;
            window.location.reload();
        },
        submitProject(){
            if(this.avatar_url===null||this.form.name===null|| this.form.url===null||this.form.title===null||this.form.content===null||this.form.tag.length===0){
                Vue.prototype.$notify.error({
                    title: '错误',
                    message: "请先填写相关信息！",
                    offset: 50
                });
            }else {
                if (this.form.tag) {
                    this.form.tag = this.form.tag.join(",");
                }
                Object.assign({}, this.form);
                var that=this;
                axios({
                    method: 'post',
                    // 请求的地址
                    url: 'http://localhost:8082/helloGithub_war_exploded/commitProject',
                    // URL 中的查询参数
                    params: {
                        projectIco:this.avatar_url,
                        projectName:this.form.name,
                        projectUrl:this.form.url,
                        projectTitle:this.form.title,
                        projectDescription:this.form.content,
                        categoryIdList:this.form.tag
                    }
                }).then( (res)=> {
                    if(res.data.code===200){
                        Vue.prototype.$notify({
                            title: '成功',
                            message: ('i', {style: 'color: teal'}, res.data.msg),
                            type: 'success',
                            offset: 50
                        });
                        this.openPublishProject=false;
                        that.openUploadFile=true
                    }else{
                        Vue.prototype.$notify.error({
                            title: '错误',
                            message: res.data.msg,
                            offset: 50
                        });
                    }
                });
            }

        },
        isExist(){
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectProjectByPname',
                // URL 中的查询参数
                params: {
                    projectName:this.form.name,
                }
            }).then((res) => {
                if(res.data.code===500){
                    Vue.prototype.$notify.error({
                        title: '错误',
                        message: res.data.msg,
                        offset: 50
                    });
                }else {
                    return;
                }
            });
        },
        getDetailByGitHub(){
            var that=this;
            axios({
                method: 'get',
                // 请求的地址
                url: '/github/'+this.form.name,
                // URL 中的查询参数
                params: {

                }
            }).then((res)=>{
                that.avatar_url=res.data.owner.avatar_url;
                // that.saveGithubInfo();
            });

        },
    },

}
</script>

<style scoped>
/*适用于小屏幕，手持设备*/
/*@media(orientation: portrait){*/
/*    .logo-all {*/
/*        height: 20px;*/
/*        width: 10vw;*/
/*        display: flex;*/
/*        align-items: center;*/
/*        background-color: #ff4949;*/
/*        margin-left:1vw;*/
/*    }*/
/*    .logo {*/
/*        width: 20px;*/
/*        height: 20px;*/
/*        border-radius: 6px;*/
/*    }*/
/*    .HeaderWord{*/
/*        cursor: pointer;*/
/*        margin-left: 5px;*/
/*        font-size: 80%;*/
/*        font-weight: bold;*/
/*        font-family:'楷体';*/
/*    }*/
/*    .header {*/
/*        display: flex;*/
/*        flex-direction: row;*/
/*        align-items: center;*/
/*        !*justify-content: space-evenly;*!*/
/*    }*/
/*    .el-menu {*/
/*        font-weight: bold;*/
/*        font-size: 5px;*/
/*        display: flex;*/
/*        justify-content: space-evenly;*/
/*        width: 10vw;*/
/*    }*/
/*    .menu-item {*/
/*        width: 2vw;*/
/*        font-size:2px;*/
/*    }*/
/*    .HeaderInput{*/
/*        width:15vw;*/
/*        font-size:1px;*/
/*    }*/
/*    .HeaderSubmitBtn{*/

/*    }*/
/*}*/

@media(orientation: landscape){
    .logo-all {
        height: 60px;
        width: 12vw;
        display: flex;
        align-items: center;
    }
    .logo {
        width: 30px;
        height: 30px;
        border-radius: 50px;
    }
    .HeaderWord{
        cursor: pointer;
        margin-left: 5px;
        font-size: 150%;
        font-weight: bold;
        font-family:'楷体';
    }
    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
    }
    .el-menu {
        font-weight: bold;
        font-size: 18px;
        display: flex;
        justify-content: space-evenly;
        width: 30vw;
    }
    .menu-item {
        width: 6vw;
    }
}

</style>