<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <% include("base/web-settings-meta.html"){} %>
    <title>${site.siteName!}-${data.title!}</title>
    <link href="/css/atom-one-dark.min.css" rel="stylesheet">
    <link href="/comment/style.css" rel="stylesheet">
    <link href="/comment/comment.css" rel="stylesheet">
    <link href="/share.js/css/share.min.css" rel="stylesheet">
    <link rel="canonical" href="https://www.ijson.net/article/${data.ename!}/details/${data.shamId!}.html" />
</head>


<body>
<% include("base/web-settings-top-nav.html"){} %>
<% include("base/web-settings-reg-login.html"){} %>


<div class="container">

    <div class="row">
        <div class="blog-header"></div>


        <div class="col-sm-9 blog-main">

            <div class="blog-post">

                <header class="kratos-entry-header">
                    <h1 class="kratos-entry-title text-center">${data.title}</h1>
                    <div class="kratos-post-meta text-center">
                    <span>
                    <i class="fa fa-calendar"></i> ${data.createTime!,dateFormat="yyyy-MM-dd HH:mm"}  <i
                            class="fa fa-commenting-o"></i> ${data.reply}条评论                    <i
                            class="fa fa-eye"></i> ${data.views}次阅读
                    <span class="hd">
                    <i class="fa fa-thumbs-o-up"></i> ${data.pros}人点赞 <i class="fa fa-user"></i> ${data.userCname}                    </span>
                    </span>
                    </div>
                </header>

                <div class="kratos-post-content">
                    ${data.content}
                </div>
                <div class="kratos-copyright text-center clearfix">
                    <h5>本作品采用 <a rel="license nofollow" target="_blank"
                                 href="http://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可
                    </h5>
                </div>


                <footer class="kratos-entry-footer clearfix">
                    <div class="post-like-donate text-center clearfix" id="post-like-donate">
                        <!--
                                                <a href="javascript:;" class="Donate"><i class="fa fa-bitcoin"></i> 打赏</a>
                        -->

                        <a href="javascript:;" id="praise" data-action="love" data-id="3080" class="Love done share-btn"
                           onclick="praise('${data.ename}','${data.shamId}')"><i class="fa fa-thumbs-o-up"></i> 点赞</a>


                        <a href="javascript:;" class="Share share-btn"><i class="fa fa-share-alt"></i> 分享</a>
                        <div class="share-wrap" style="display: none;">
                            <div class="social-share"
                                 data-wechat-qrcode-title="微信扫一扫：分享一下"
                                 data-weibo-title="${data.title}"
                                 data-douban-title="${data.title}"
                                 data-linkedin-title="${data.title}"
                                 data-facebook-title="${data.title}"
                                 data-twitter-title="${data.title}"
                                 data-google-title="${data.title}"
                                 data-disabled="tencent,diandian,qzone"
                                 data-description='${data.intro}'
                                 data-image="${data.imageUrl}"></div>
                        </div>
                    </div>
                    <div class="footer-tag clearfix">
                        <div class="pull-left">
                            <%if(data.topics!=null){%>
                            <i class="fa fa-tags"></i>

                            <%for(topic in data.topics!){%>
                            <a href="/tags/${topic.ename}/tags/${topic.shamId}.html" rel="tag">${topic.name}</a>
                            <%}%>
                            <%}%>
                        </div>

                        <div class="pull-date">
                            <span>最后编辑：${data.lastModifiedTime!,dateFormat="yyyy-MM-dd HH:mm:ss"}</span>
                        </div>
                    </div>
                </footer>

                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- 详情页下方展示 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-8261751522036488"
                     data-ad-slot="8443607164"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>


            </div>


            <%if(site.openCmt){%>

            <div class="comments" id="comments">
                <div class="comm-main">
                    <div class="commentAll">
                        <% if(isEmpty(session.authContext)){%>
                        <div>您还没有登录，请先<a data-toggle="modal" data-target="#login" href="#"><i class="fa fa-sign-in"></i>
                            登录</a>或者<a
                                data-toggle="modal" data-target="#register" href="#"><i class="fa fa-sign-in"></i>
                            注册</a>后,添加评论
                        </div>
                        <%}else{%>
                        <!--评论区域 begin-->
                        <div class="reviewArea clearfix">
                            <textarea class="content comment-input" placeholder="请输入评论内容&hellip;"
                                      onkeyup="keyUP(this)"></textarea>
                            <a href="javascript:;" class="plBtn">评论</a>
                        </div>
                        <!--评论区域 end-->
                        <!--回复区域 begin-->
                        <%}%>

                        <div class="comment-show">

                            <%if(isNotEmpty(hots)){%>
                            <% for(data in replys){ %>
                            <%if(data.replyType=='comment'){%>
                            <div class="comment-show-con clearfix">
                                <input type="hidden" id="${data.id}" class="hidden_id" value="${data.id}">
                                <div class="comment-show-con-img pull-left"><img src="${data.userAvatar}" alt=""></div>
                                <div class="comment-show-con-list pull-left clearfix">
                                    <div class="pl-text clearfix">
                                        <a href="#" class="comment-size-name">${data.userCname} : </a>
                                        <span class="my-pl-con">&nbsp;${data.content}</span>
                                    </div>
                                    <div class="date-dz">
                                        <span class="date-dz-left pull-left comment-time">${data.createTime!,dateFormat="yyyy-MM-dd HH:mm"}</span>
                                        <div class="date-dz-right pull-right comment-pl-block">
                                            <% if(!isEmpty(session.authContext)){%>
                                            <a href="javascript:;" class="removeBlock"
                                               onclick="deleteCR('${data.id}',0)">删除</a>
                                            <a href="javascript:;"
                                               class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                                            <span class="pull-left date-dz-line">|</span>
                                            <%}%>
                                            <a href="javascript:;" class="date-dz-z pull-left"
                                               onclick="praiseCR('${data.id}',0)"><i
                                                    class="date-dz-z-click-red"></i>赞 (<i
                                                    class="z-num">${data.praise}</i>)</a>
                                        </div>
                                    </div>

                                    <%
                                    var childCount = 0;
                                    for(child in replys){ %>

                                    <%if(child.replyId==data.id){ childCount++;%>
                                    <div class="hf-list-con" style="display: block;">
                                        <div class="all-pl-con">
                                            <div class="pl-text hfpl-text clearfix">
                                                <input type="hidden" id="${child.id}" class="hidden_reply_id"
                                                       value="${child.id}">
                                                <a href="#" class="comment-size-name">${child.userCname}
                                                    : </a><span class="my-pl-con">回复<a href="#" class="atName">@${data.userCname} </a>:${child.content}</span>
                                            </div>
                                            <div class="date-dz"><span class="date-dz-left pull-left comment-time">${child.createTime!,dateFormat="yyyy-MM-dd HH:mm"}</span>
                                                <div class="date-dz-right pull-right comment-pl-block">
                                                    <% if(!isEmpty(session.authContext)){%>
                                                    <a href="javascript:;" class="removeBlock"
                                                       onclick="deleteCR('${child.id}',0)">删除</a>
                                                    <!--                                                                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>-->
                                                    <!--                                                                        <span class="pull-left date-dz-line">|</span>-->
                                                    <%}%>
                                                    <a href="javascript:;" class="date-dz-z pull-left"
                                                       onclick="praiseCR('${child.id}',0)"><i
                                                            class="date-dz-z-click-red"></i>赞 (<i class="z-num">${child.praise}</i>)</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <%}%>

                                    <%}%>
                                    <%if(childCount==0){%>
                                    <div class="hf-list-con"></div>
                                    <%}%>
                                </div>
                            </div>
                            <%}%>
                            <%}%>
                            <%}%>
                        </div>
                    </div>
                </div>
            </div>

            <%}%>

        </div><!-- /.blog-main -->

        <div class="col-sm-3  blog-right">
            <% include("base/web-settings-bulletin.html"){} %>
            <% include("base/web-settings-reward.html"){} %>
            <% include("base/web-settings-blog-admin-info.html"){} %>
            <% include("base/index-list-blogroll.html"){} %>
            <% include("base/index-list-hot-article.html"){} %>
            <% include("base/index-list-hot-tag.html"){} %>
            <% include("base/index-list-rece-publish.html"){} %>
        </div>


    </div><!-- /.row -->

</div><!-- /.container -->

<div id="outerdiv"
     style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src=""/>
    </div>
</div>

<% include("base/web-settings-footer.html"){} %>

<% include("base/web-settings-bottom.html"){} %>
<script src="/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<script src="/share.js/js/social-share.min.js"></script>
<script type="text/javascript" src="/js/jquery.flexText.js"></script>

<script>
    hljs.initHighlightingOnLoad();

    function praise(ek, id) {
        var kprais = getCookie(ek + "_" + id + "_praise");
        if (kprais) {
            toastr.warning('您已经支持过了');
            return;
        }
        $.ajax({
            cache: false,
            type: "POST",
            contentType: 'application/json',
            url: "/article/rest/" + ek + "/praise/" + id,
            async: false,
            success: function (data) {
                if (data.code === 0) {
                    toastr.success(data.message);
                } else {
                    toastr.warning(data.message);
                }
            },
            error: function (data) {
                toastr.error(data.message);
            }
        });
    }

    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr === document.cookie.match(reg)) {
            return unescape(arr[2]);
        } else {
            return null;
        }
    }

    $(document).on("click", ".Share", function () {
        $(".share-wrap").fadeToggle("slow");
    });
</script>

<%if(site.openCmt){%>
<script>
    function toastrwarn(message) {
        toastr.warning(message)
    }
</script>

<!--textarea高度自适应-->
<script type="text/javascript">
    $(function () {
        $('.content').flexText();
    });
</script>
<!--textarea限制字数-->
<script type="text/javascript">
    function keyUP(t) {
        var len = $(t).val().length;
        if (len > 139) {
            $(t).val($(t).val().substring(0, 140));
        }
    }
</script>

<% if(!isEmpty(session.authContext)){%>
<!--点击评论创建评论条-->
<script type="text/javascript">
    $('.commentAll').on('click', '.plBtn', function () {
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        if (m < 10) m = '0' + m;
        var s = myDate.getSeconds();
        if (s < 10) s = '0' + s;
        var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
        //获取输入内容
        var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
        console.log(oSize);
        if (oSize === undefined || oSize === '' || oSize === null) {
            toastr.warning("评论内容不能为空");
            return
        }
        var commentId = new Date().getTime();
        //动态创建评论模块
        oHtml = '<div class="comment-show-con clearfix">' +
            '<input type="hidden" id="' + commentId + '" class="hidden_id">' +
            '<div class="comment-show-con-img pull-left"><img src="${user.avatar!}" alt=""></div> ' +
            '<div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> ' +
            '<a href="#" class="comment-size-name">${user.cname!} : </a> <span class="my-pl-con">&nbsp;' + oSize + '</span> </div> ' +
            '<div class="date-dz"> <span class="date-dz-left pull-left comment-time">' + now + '</span> ' +
            '<div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock" onclick="deleteCR(' + commentId + ',1)">删除</a> ' +
            '<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> ' +
            '<a href="javascript:;" class="date-dz-z pull-left" onclick="praiseCR(' + commentId + ',1)"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">0</i>)</a> </div> </div>' +
            '<div class="hf-list-con"></div></div> </div>';
        if (oSize.replace(/(^\s*)|(\s*$)/g, "") !== '') {
            $(this).parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
            $(this).siblings('.flex-text-wrap').find('.comment-input').prop('value', '').siblings('pre').find('span').text('');
        }

        $.ajax({
            cache: false,
            type: "POST",
            contentType: 'application/json',
            url: "/comment/save/",
            async: true,
            data: JSON.stringify({
                content: oSize,
                ename: '${data.ename}',
                shamId: '${data.shamId}',
                replyType: 'comment',
                postId: '${data.id}',
                userId: '${data.userId}'
            }),
            success: function (data) {
                if (data.code === 0) {
                    $("#" + commentId).val(data.result)
                    toastr.success(data.message);
                } else {
                    toastr.warning(data.message);
                }
            },
            error: function (data) {
                toastr.error(data.message);
            }
        });


    });
</script>
<!--点击回复动态创建回复块-->
<script type="text/javascript">
    $('.comment-show').on('click', '.pl-hf', function () {
        //获取回复人的名字
        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        //回复@
        var fhN = '回复@' + fhName;
        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
        var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
        //显示回复
        if ($(this).is('.hf-con-block')) {
            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
            $(this).removeClass('hf-con-block');
            $('.content').flexText();
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding', '6px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
        } else {
            $(this).addClass('hf-con-block');
            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
        }
    });
</script>
<!--评论回复块创建-->
<script type="text/javascript">
    $('.comment-show').on('click', '.hf-pl', function () {
        var oThis = $(this);
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        if (m < 10) m = '0' + m;
        var s = myDate.getSeconds();
        if (s < 10) s = '0' + s;
        var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
        //获取输入内容
        var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
        console.log(oHfVal)
        var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        var oAllVal = '回复@' + oHfName;
        var replyId = $(this).parent().parent().parent().parent().children(".hidden_id").attr("value");
        if (oHfVal.replace(/^ +| +$/g, '') === '' || oHfVal === oAllVal) {
            toastr.warning("评论内容不能为空");
            return
        } else {
            $.getJSON("/json/pl.json", function (data) {
                var oAt = '';
                var oHf = '';
                $.each(data, function (n, v) {
                    delete v.hfContent;
                    delete v.atName;
                    var arr;
                    var ohfNameArr;
                    if (oHfVal.indexOf("@") === -1) {
                        data['atName'] = '';
                        data['hfContent'] = oHfVal;
                    } else {
                        arr = oHfVal.split(':');
                        ohfNameArr = arr[0].split('@');
                        data['hfContent'] = arr[1];
                        data['atName'] = ohfNameArr[1];
                    }

                    if (data.atName === '') {
                        oAt = data.hfContent;
                    } else {
                        oAt = '回复<a href="#" class="atName">@' + data.atName + '</a>:' + data.hfContent;
                    }
                    oHf = data.hfName;
                });


                var replyIdNumber = new Date().getTime() + 33;
                var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix">' +
                    '<input type="hidden" id="' + replyIdNumber + '" class="hidden_reply_id">' +
                    '<a href="#" class="comment-size-name">${user.cname} : </a><span class="my-pl-con">' + oAt + '</span></div><div class="date-dz"> ' +
                    '<span class="date-dz-left pull-left comment-time">' + now + '</span> ' +
                    '<div class="date-dz-right pull-right comment-pl-block"> ' +
                    '<a href="javascript:;" class="removeBlock" onclick="deleteCR(' + replyIdNumber + ',1)">删除</a> ' +
                    //'<a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> ' +
                    // '<span class="pull-left date-dz-line">|</span> ' +
                    '<a href="javascript:;" class="date-dz-z pull-left" onclick="praiseCR(' + replyIdNumber + ',1)"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">0</i>)</a> </div> </div></div>';
                oThis.parents('.hf-con')
                    .parents('.comment-show-con-list')
                    .find('.hf-list-con')
                    .css('display', 'block')
                    .prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();

                // console.log("replyId:"+replyId)
                // console.log("content:"+data.hfContent)
                // console.log("ename:${data.ename}")
                // console.log("shamId:${data.shamId}")
                // console.log("postId:${data.id}")
                // console.log("replyType:reply")
                // console.log("userId:${session.authContext.id}")

                $.ajax({
                    cache: false,
                    type: "POST",
                    contentType: 'application/json',
                    url: "/comment/save/reply",
                    async: true,
                    data: JSON.stringify({
                        content: data.hfContent,
                        ename: '${data.ename}',
                        shamId: '${data.shamId}',
                        replyType: 'reply',
                        postId: '${data.id}',
                        userId: '${data.userId}',
                        replyId: replyId
                    }),
                    success: function (data) {
                        if (data.code === 0) {
                            $("#" + replyIdNumber).val(data.result)
                            toastr.success(data.message);
                        } else {
                            toastr.warning(data.message);
                        }
                    },
                    error: function (data) {
                        toastr.error(data.message);
                    }
                });

            });
        }
    });
</script>
<!--删除评论块-->
<script type="text/javascript">
    $('.commentAll').on('click', '.removeBlock', function () {
        //var childId = $(this).parent().parent().parent().children(".hfpl-text").children(".hidden_reply_id").attr("value")
        var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
        // debugger
        if (oT.siblings('.all-pl-con').length >= 1) {
            oT.remove();
        } else {
            $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display', 'none')
            oT.remove();
        }
        $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();


    });

    function deleteCR(id, flag) {
        if (flag === 1) {
            id = $("#" + id).val()
        }
        $.ajax({
            cache: false,
            type: "POST",
            contentType: 'application/json',
            url: "/comment/delete",
            async: true,
            data: JSON.stringify({
                id: id
            }),
            success: function (data) {
                if (data.code === 0) {
                    toastr.success(data.message);
                } else {
                    toastr.warning(data.message);
                }
            },
            error: function (data) {
                toastr.error(data.message);
            }
        });
    }
</script>
<%}%>

<!--点赞-->
<script type="text/javascript">
    $('.comment-show').on('click', '.date-dz-z', function () {
        var zNum = $(this).find('.z-num').html();
        if ($(this).is('.date-dz-z-click')) {
            zNum--;
            $(this).removeClass('date-dz-z-click red');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').removeClass('red');
        } else {
            zNum++;
            $(this).addClass('date-dz-z-click');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').addClass('red');
        }
    });

    function praiseCR(id, flag) {
        if (flag === 1) {
            id = $("#" + id).val()
        }

        var crprais = getCookie('cr' + "_" + id + "_praise");
        if (crprais) {
            toastr.warning('您已经支持过了');
            return;
        }

        $.ajax({
            cache: false,
            type: "POST",
            contentType: 'application/json',
            url: "/comment/praise",
            async: true,
            data: JSON.stringify({
                id: id
            }),
            success: function (data) {
                if (data.code === 0) {
                    toastr.success(data.message);
                } else {
                    toastr.warning(data.message);
                }
            },
            error: function (data) {
                toastr.error(data.message);
            }
        });
    }

</script>
<%}%>


<script>
    $(function () {
        $("p img").click(function () {
            var _this = $(this);//将当前的pimg元素作为_this传入函数
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        });
    });

    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function () {
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if (realHeight > windowH * scale) {//判断图片高度
                imgHeight = windowH * scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth;//等比例缩放宽度
                if (imgWidth > windowW * scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW * scale;//再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW * scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth);//以最终的宽度对图片缩放

            var w = (windowW - imgWidth) / 2;//计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2;//计算图片与窗口上边距
            $(innerdiv).css({"top": h, "left": w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });

        $(outerdiv).click(function () {//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>

</body>
</html>
