<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./assets/style.css">
</head>

<body>
    <div id="detail">
        <header>
            <div class="container show-flex">
                <div class="logo"><a href="./">我的博客</a></div>
                <nav class="site-nav">
                    <a href="./">首页</a>
                    <a href="./login.html">登录</a>
                </nav>
            </div>
        </header>
        <div class="main container">
            <div v-if="isError == false" style="display:none" :style="{display:a.id > 0 ?'block':'none'}">
                <h1 id="article-title">{{a.title}}</h1>
                <div id="artilce-info" class="show-flex">
                    <div class="category">分类:{{a.category}}</div>
                    <div class="time">发布于:{{a.publish_time}}</div>
                    <div class="count">
                        阅读数({{a.view_count}})
                        评论数({{a.comment_count}})
                    </div>
                </div>
                <div id="article-content" v-html="a.content"></div>
                <div id="article-comment" style="margin-top: 50px;">
                    <h1>所有评论</h1>
                    <div class="publish" style="margin: 10px 0;">
                        <!-- 发表评论 -->
                        <div>
                            <el-input type="textarea" v-model="commentContent" :rows="4" placeholder="请发表您的看法" />
                        </div>
                        <div style="margin-top: 10px;">
                            <el-button size="small" type="primary" @click="submitComment" :disabled="commentContent == ''">评论</el-button>
                        </div>
                    </div>
                    <div id="comment-list">
                        <!-- 评论列表 -->
                        <div class="comment-item" v-for="c in commentList" :key="c.id">
                            <div class="content">{{c.content}}</div>
                            <div class="info" style="padding:10px 0;font-size:12px;">
                                <span>归属地:{{c.address || c.ip}}</span>
                                <span style="margin-left: 10px;">评论时间:{{c.publish_time}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="error-notice">
                <el-result icon="info" title="提示" sub-title="加载文章数据异常">
                    <template slot="extra">
                        <el-button type="primary" round size="medium" @click="back">返回</el-button>
                    </template>
                </el-result>
            </div>
        </div>
    </div>
    <!-- 引入vue库 -->
    <script src="./vue/dist/vue.js"></script>
    <script src="./element-ui/lib/index.js"></script>
    <script src="./modules/dayjs.min.js"></script>
    <script type="module">
        // import Vue from './vue/dist/vue.esm-browser.js'
        // vue 通过 Vue.createApp(选项)创建vue实例
        import request from './modules/request.js'
        import qs from './modules/qs.js'

        new Vue({
            el: '#detail', // 设置挂载对象
            data() {
                return {
                    commentContent: '',
                    isError: false,
                    a: {
                        "id": 0,
                        "title": null,
                        "cover": "",
                        "publish_time": "",
                        "description": "",
                        "content": "",
                        "category": "",
                        "view_count": 0,
                        "comment_count": 0,
                        "status": 1
                    },
                    // 所有评论的列表
                    commentList: []
                }
            },
            async created() {
                const params = qs.parse(location.search); // 解析查询参数
                if (!params.id) {
                    this.setTitle()
                    this.isError = true;
                    return;
                }
                const id = this.a.id = params.id; // 获取并保存文章编号
                await request('./api/article/web/update', { id }) // 更新阅读数量
                const articleList = await request('./api/article/web/detail', { id }); // 查询详情
                if (articleList.length != 1) {
                    this.isError = true;
                    this.setTitle()
                    return;
                }
                this.a = articleList[0];
                this.setTitle()
                // 加载评论
                this.loadCommentList()

            },
            methods: {
                async submitComment(){
                    if(!this.commentContent){
                        this.$message.error('请先填写评论内容')
                        // this.$alert('请先填写评论内容','提示')
                        return false;
                    }
                    const ret = await request('./api/comment/web/add',{
                        article_id:this.a.id,
                        content:this.commentContent
                    },'POST')

                    if(ret.status){
                        this.$message.success('发表评论成功')
                        this.a.comment_count ++; // 直接对评论数+1
                        this.loadCommentList()
                        // this.commentContent = '' // 将评论内容清空 
                    }else{
                        this.$message.error(ret.message)
                    }
                },
                async loadCommentList() {
                    const id = this.a.id;
                    const list = await request('./api/comment/web/query', { id }) // 获取所有的评论列表
                    this.commentList = list;
                },
                back() {
                    history.back()
                },
                setTitle(title = null) {
                    document.title = this.a.title || '加载数据失败'
                },
                formatDate(time) {
                    return dayjs(time).format('YYYY-MM-DD HH:mm')
                },
            }
        })
    </script>
</body>

</html>