<template>
    <div>
        <!-- 引用导航 -->
        <Header></Header>
        <div style="text-align: left;padding-left: 40px; width: 96%;" class="mblog">
            <br>
            <h2>{{ blog.title }}</h2>
            <br>
            <div>
                <el-link icon="el-icon-edit">
                    <!--携带博客ID跳转到编辑页面，对博客进行修改-->
                    <router-link :to="{ name: 'BlogEdit', params: { blogId: blog.id } }">
                        编辑
                    </router-link>
                </el-link>

                <el-divider direction="vertical"></el-divider>

                <el-link type="danger" @click="messageHandel" icon="el-icon-delete">
                    删除
                </el-link>
                <el-divider direction="vertical"></el-divider>

                <el-button type="text" @click="commentGet()" icon="el-icon-chat-line-round">评论区</el-button>

                <el-drawer title="评论区" :visible.sync="commentVisible" width="30%">
                    <!-- 评论功能 -->
                    <div>
                        <el-form :model="commentForm" status-icon :rules="rules" label-width="80px" ref="commentForm">
                            <el-tag style="font-size: 15px;" v-if="showReply">回复@{{ replyComent.replyName }}
                                <el-button type="text" @click="replyCancel()" icon="el-icon-close"
                                    size="medium"></el-button>
                            </el-tag>

                            <el-form-item label="评论" prop="content">
                                <el-input type="text" v-model="commentForm.content"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitCommentForm()">评论</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!-- 评论区展示功能 -->
                    <div v-for="comment in comments" :key="comment.comment_id">
                        <div v-if="!comment.parent_id">
                            <div class="comment-container">
                                <div class="comment-top">
                                    <el-avatar class="comment-avatar" shape="circle" size="medium"
                                        :src="comment.avatar" />
                                    <el-tag class="comment-username" style="font-size: 17px;">{{ comment.username
                                        }}</el-tag>
                                    <span class="comment-time"> {{ comment.created }}</span>
                                    <!-- 回复评论 -->
                                    <el-button class="reply-button" type="text" icon="el-icon-chat-line-round"
                                        @click="replyVisible(comment)">回复</el-button>
                                </div>
                                <span class="comment-content">" {{ comment.content }} "</span>
                            </div>
                            <el-divider content-position="center">
                                <el-button v-if="isClickId !== comment.comment_id" type="text"
                                    @click="viewReplys(comment)">查看回复</el-button>
                                <el-button v-else type="text" @click="viewReplysCollapse(comment)">收起回复</el-button>
                            </el-divider>
                            <!-- 评论回复展示功能 -->
                            <div v-for="commentReply in commentReplys" :key="commentReply.comment_id">
                                <div
                                    v-if="(commentReply.parent_id == comment.comment_id) && isClickId === comment.comment_id">
                                    <div class="comment-reply">
                                        <div class="comment-top">
                                            <el-tag class="comment-username" style="font-size: 17px;">{{
                                                commentReply.username }} 回复 @{{
                                                    commentReply.parent_name }}</el-tag>
                                            <span class="comment-time"> {{ commentReply.created }}</span>
                                            <el-button class="reply-button" type="text" icon="el-icon-chat-line-round"
                                                @click="replyCommentVisible(commentReply, comment, comments)">回复</el-button>
                                        </div>
                                        <span class="comment-content">" {{ commentReply.content }} "</span>
                                        <br>
                                        <!-- 回复评论 -->
                                        <!-- <el-input v-if="showReplyInput()"></el-input> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-drawer>
            </div>

            <el-divider></el-divider>

            <div class="markdown-body" v-html="blog.content"></div>
            <br>
        </div>
        <br>
        <Footer></Footer>
        <br>

    </div>
</template>

<script>
import axios from 'axios';
//为了让markdown转换的文本更好看，使用这个文件进行渲染
import "github-markdown-css/github-markdown.css"
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";

export default {
    components: { Header, Footer },
    beforeRouteEnter(to, from, next) {
        // 在组件进入之前，将页面滚动到顶部
        window.scrollTo(0, 0);
        next();
    },

    data() {
        return {
            viewReply: false,   //查看回复显示
            showReply: false,   //回复评论按钮显示
            blog: {},   //博客对象
            username: '',   //用户名
            comments: {},   //评论区
            commentForm: {  //评论表单
                id: '',
                username: '',
                content: '',
                created: ''
            },
            commentVisible: false,  //评论区显示
            replyComent: {
                comment_id: '',
                replyName: '',
            },
            commentReplys: [],
            isClickId: '',
        }
    },
    methods: {
        viewReplys(comment) {
            this.isClickId = comment.comment_id
            const commentReplyAdd = []
            this.comments.forEach((commentReply) => {
                if ((commentReply.parent_id === comment.comment_id)) {
                    commentReplyAdd.push(commentReply);
                }
            });
            this.commentReplys = commentReplyAdd

        },
        viewReplysCollapse() {
            this.isClickId = ''
        },
        replyCancel() {
            //取消回复
            this.showReply = false
            this.replyComent.replyName = ''
            this.replyComent.comment_id = ''

        },
        replyVisible(comment) {
            this.replyComent.replyName = comment.username
            this.replyComent.comment_id = comment.comment_id
            console.log("replyComent.comment_id" + this.replyComent.comment_id + "replyComent.replyName" + this.replyComent.replyName)
            this.showReply = true
        },
        replyCommentVisible(commentReply, comment) {
            console.log("comment:" + comment + "commentReply:" + commentReply)
            this.replyComent.replyName = commentReply.username
            this.replyComent.comment_id = comment.comment_id
            this.showReply = true
            const commentReplyAdd = []
            this.comments.forEach((commentReply) => {
                if ((commentReply.parent_id === comment.comment_id)) {
                    commentReplyAdd.push(commentReply);
                }
            });
            this.commentReplys = commentReplyAdd
            //刷新展
        },
        showReplyInput() {
            if (this.showReply) {
                return true
            } else {
                return false
            }
        },
        messageHandel() {
            this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //删除博客
                // axios.get('/deleteBlog', {
                //     params: {
                //         blogId: this.blog.id
                //     }
                // }).then((res) => {
                //     console.log(res.data)
                //     this.$message({
                //         type: 'success',
                //         message: '删除成功!'
                //     });
                //     //跳转到主页
                //     this.$router.push('/')

                // })
                this.$message({
                    type: 'success',
                    message: '该功能暂时不对外开发哦！'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        commentGet() {
            this.commentVisible = true
            //获取评论区
            axios.get('/getComment', {
                params: {
                    blogId: this.blog.id
                }
            }).then((res) => {
                console.log(res.data)
                this.comments = res.data
                for (let i = 0; i < this.comments.length; i++) {
                    if (this.comments[i].avatar == null) {
                        //如果头像为空，设置默认头像
                        this.comments[i].avatar = 'http://124.71.135.249:8081' + '/images/avatar/default.jpg'
                    } else {
                        this.comments[i].avatar = 'http://124.71.135.249:8081' + this.comments[i].avatar
                    }
                    console.log("this.comments[i].parent_id" + this.comments[i].parent_id + "this.comments[i].username" + this.comments[i].username)
                }
            })
        },
        submitCommentForm() {
            //获取当前时间
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var created = year + "-" + month + "-" + day;

            this.commentForm.id = this.blog.id
            this.commentForm.username = this.username
            this.commentForm.created = created
            console.log(this.commentForm)
            //提交评论
            axios.post('/addComment', {
                article_id: this.commentForm.id,
                parent_id: this.replyComent.comment_id,
                parent_name: this.replyComent.replyName,
                content: this.commentForm.content,
                created: this.commentForm.created
            }).then((res) => {
                console.log(res.data)
                this.$message({
                    type: 'success',
                    message: '评论成功!'
                });
                //刷新评论区
                this.commentGet()
                //清空评论框
                this.commentForm.content = ''
            }).catch((err) => {
                console.log(err);
            });
        },

    },
    created() {
        const blogId = this.$route.params.blogId
        const that = this
        axios.get('/getBlogDetail', {
            params: {
                blogId: blogId
            }
        }).then((res) => {
            that.blog = res.data
            console.log(res.data)

            /**
                 * 将markdown的文本转为正常文本
                 * */
            //拿到markdown渲染资源对象
            var markDownIT = require("markdown-it")
            var md = new markDownIT()   //获取到markdown-it的对象
            var result = md.render(that.blog.content)    //将markdown文本渲染成html文本
            that.blog.content = result //将正常文本赋值给页面显示

        })
        // this.commentGet(blogId)
    },

}
</script>

<style scoped>
.mblog {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    min-height: 760px;
    margin: 10px 10px;
}

.comment-container {
    margin: 20px;
}

.comment-top {
    margin-bottom: 10px;
}

.comment-avatar {
    margin-right: 10px;
    margin-top: 5px;
}

.comment-username {
    padding-bottom: 5px;
}

.comment-time {
    margin-left: 5px;
    font-size: 10px;
}

.reply-button {
    display: none;
    float: right;
}

.comment-container:hover .reply-button {
    display: inline-block;
}

.comment-content {
    padding: 20px;
}

.comment-reply {
    margin: 20px;
    padding-left: 20px
}

.comment-reply:hover .reply-button {
    display: inline-block;
}
</style>