{extend name="public/base" /}

{block name="title"}{$article.title} - {$sysInfo.webname}{/block} 
{block name="keywords"}{$article.keywords ?: $article.title}{/block}
{block name="description"}{$article.title},{$article.description}{/block}
{block name="ogtitle"}<meta property="og:title" content="{$article.title} - {$sysInfo.webname}">{/block}
{block name="ogdescription"}<meta property="og:description" content="{$article.title},{$article.description ?? ''}" />{/block}
{block name="ogimage"}<meta property="og:image" content="{:getOnepic($article.content)}"/>{/block}
{block name="meta"}
  <!-- SEO优化 -->
  <meta property="og:type" content="article"/>
  <meta property="bytedance:published_time" content="{$article.create_time|date='c'}" />
  <meta property="bytedance:updated_time" content="{$article.update_time|date='c'}" />
  <meta property="og:updated_time" content="{$article.update_time|date='c'}" />
  <meta name="mobile-agent" content="format=html5;url={$Request.domain}{$Request.url}">
{/block}
{block name="link"}
 <!-- 谷歌JavaScript结构化 -->
 <script type="application/ld+json">{"@context": "https://schema.org","@type": "NewsArticle","headline": "{$article.title}","image" : "{:getOnepic($article.content)}","datePublished" : "{$article.create_time|date='c'}","dateModified": "{$article.update_time|date='c'}","author" : {"@type" : "Person","name" : "用户投稿","url": "{$Request.domain}"}},</script>
 <!-- 百度JavaScript结构化 -->
 <script type="application/ld+json">{"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld","@id": "{$Request.domain}{$Request.url}","title": "{$article.title}","images": ["{:getOnepic($article.content)}"],"description": "{$article.description ?? ''}","pubDate": "{$article.create_time|date='c'}","upDate": "{$article.update_time|date='c'}"}</script>
 <!-- 特效丶样式 -->
 <link rel="stylesheet" href="{$Request.domain}/view/common/blog/css/style.css" type="text/css" charset="utf-8"/>
 <script type='text/javascript' src="{$Request.domain}/view/common/blog/js/view-image.min.js"></script>
 <script>window.ViewImage && ViewImage.init('.post-content img');</script>
{/block}
{block name="column"}<div class="layui-hide-xs">{include file="/public/column" /}</div>{/block}
{block name="content"}
<main class="py-2 py-md-2 pb-3" style="transform: none">
    <div class="layui-container" style="transform: none">
        <div class="layui-row layui-col-space15" style="transform: none">
            <div class="layui-col-md8" itemscope itemType="">
              <div class="post card">
                <section class="card-body">
                  <div class="post-header border-bottom mb-4 pb-4">
                    <h1 class="h3 mb-3" itemprop="headline">{article:title /}</h1>
                    <div class="meta d-flex align-items-center text-xs text-muted">
                    <div>
                      <div class="d-inline-block" itemprop="author" itemscope="" itemtype="">
                        Posted by <a href="{$Request.domain}" target="_blank" class="text-muted" itemprop="url">
                        <span itemprop="name">{article:auther}</span></a>，
                        <a href="{article:cate name='link'}" target="_blank" class="text-muted" rel="category">{article:cate name="catename"}</a>，<time class="d-inline-block" datetime="{$article.create_time|date='Y-m-d h:m:s'}" itemprop="datePublished">{article:time}</time>
                      </div>
                    </div>
                    <div class="ml-auto text-sm yincang">
                      <span class="mx-1">
                        <small>已阅读 {article:pv /} 次</small>
                      </span>
                    </div>
                    </div>
                    <div class="border-theme bg-primary"></div>
                  </div>
                  {:hook('taoplayerdiv')}
                  <article class="post-content detail-body" itemprop="articleBody" view-image>
                  {article:content}
                  </article>
                  {//文章末尾}
                  {if (($article.upzip !== '') || session('?user_name'))}
                    <div class="">
                      {notempty name="$article.upzip"}
                      <button type="button" class="layui-btn layui-btn-xs" id="zip-download"><i class="layui-icon layui-icon-download-circle"></i>{:lang('download files')}: {$article.downloads}次</button>
                      {/notempty}
                    </div>
                  {/if}

                  {//解密文件}
                  {empty name="passJieMi"}
                      {if($article.read_type == 1)}
                          <div id="jiemi" style="text-align:center">
                            <button type="button" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-password" style="font-size: 30px; color: #FF5722;"></i> 阅读请解密 </button>
                          </div>
                      {/if}
                  {/empty}

                  {notempty name="tags"}
                      <div style="margin-top: 15px">标签
                        {volist name="tags" id="vo" }
                        <a href="{$vo.url}"><span class="layui-btn layui-btn-xs layui-btn-normal  layui-btn-radius">{$vo.name}</span></a>
                        {/volist}
                      </div>
                  {/notempty}
                  <div style="margin: 20px 0px 15px 0px; color: rgb(130, 125, 125);">
                    <p style="line-height:200%;">{$sysInfo.state|raw}</p>
                  </div>
                  <div style="margin-top: 20px;">本文链接：<a href="{$Request.domain}{$Request.url}">{$Request.domain}{$Request.url}</a></div>
                  <div class="detail-zan">
                    <span class="jieda-zan" type="zan" id="article-zan">
                      点赞 <i class="iconfont icon-zan"></i> <em>{:count($userZanList)}</em>
                    </span>
                    {volist name="userZanList" id="vo" }
                      <span><img src="{$vo.userImg}"></span>
                    {/volist}
                  </div>
                </section>

                <div class="card-footer text-center mt-4">
                  <a href="javascript:" style="color: #FFF !important;" data-img="/qrcode/?text={$Request.domain}{$Request.url}&size=200" data-title="手机扫一扫继续阅读" data-desc="微信或浏览器均可" class="single-popup shangzan mr-3 text-muted text-xs">手机浏览</a>
                  <a href="javascript:" style="color: #FFF !important;" data-img="{:hook('qqKefu','dashang')}" data-title="赞赏支持一下站长" data-desc="微信赞赏扫码" class="single-popup shangzan text-muted text-xs">赞赏支持</a>
                  <div class="text-center text-muted text-xs" style="margin-top: 30px;">
                    "作者已被打赏 0 次"
                  </div>
                </div>
              </div>
              <div class="post card block d-flex p-4">
                <span class="d-inline-block text-muted mr-2 fanpian pb-2 mb-2"> # 上一篇： {$previous|raw}</span>
                <span class="d-inline-block text-muted mr-2 fanpian"># 下一篇： {$next|raw}</span>
              </div>
              {notempty name="relationArticle"}
                  <section class="list-related">
                    <div class="content-related card">
                      <div class="card-body">
                        <div class="mb-3">相关文章</div>
                          <div class="list list-dots my-n2">
                            {volist name="relationArticle" id="vo"}
                              <div class="list-item py-2">
                                <a href="{$Request.domain}{$vo.url}" target="_blank" class="list-title fanpian" title="{$vo.title}" rel="bookmark">{$vo.title} </a>
                              </div>
                            {/volist}
                          </div>
                      </div>
                    </div>
                  </section>
              {/notempty}

              <section class="comments">
                <div class="card">
                  <div class="card-body pt-4">
                    {//评论内容}
                    <div class="mb-3" id="flyReply">
                      文章评论 <small class="font-theme text-muted">({article:comment_num})</small>
                      <ul class="jieda" id="jieda">
                        {article:comment}
                            <li data-id="{comment:id /}" class="jieda-daan">
                              <div class="detail-about detail-about-reply">
                                <a class="fly-avatar" href="{comment:ulink /}">
                                  <img src="{comment:uimg /}" alt="{comment:uname}">
                                </a>
                                <div class="fly-detail-user">
                                  <a href="{comment:ulink /}" class="fly-link">
                                    <cite>{comment:uname /}</cite>
                                  </a>
                                  {if condition="$article.user_id eq $comment.user_id"}<span>({:lang('poster')})</span>{/if}
                                  <span>{comment:usign /}</span>
                                </div>
                                <div class="detail-hits">
                                  <span class="post-time" data="{comment:time}"></span>{:hook('ipShow',$comment.user.city)}</span>
                                </div>

                                {//加密未解密评论不可查看}
                                {if($article.read_type == 0 || (($article.read_type == 1) && $passJieMi))}

                                <div class="detail-body jieda-body photos">{comment:content /}</div>
                                <div class="jieda-reply">
                                  {eq name="comment.delete_time" value="0"}
                                      <span class="jieda-zan {if($comment.zan != 0)}zanok{/if}" type="zan">
                                      <i class="iconfont icon-zan"></i><em>{comment:zan /}</em>
                                      </span>
                                      <span type="reply" data-pid="{comment:id /}" data-tid="{comment:uid /}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
                                      {//评论编辑删除采纳权限}
                                      <div class="jieda-admin">
                                        {if ((session('user_id') == $comment.user_id) && (getLimtTime($comment.create_time) < 2)) OR ($user.auth  ?? '')}
                                        <span type="edit" class="comment-edit" data-id="{comment:id /}">{:lang('edit')}</span>
                                        <span type="del" class="comment-del" data-id="{comment:id /}">{:lang('delete')}</span>
                                        {/if}
                                      </div>
                                  {/eq}

                                  {// 第二层回复}
                                  {notempty name="$comment.children"}
                                    {volist name="$comment.children" id="vo"}
                                        <div class="layui-clear" style="margin:10px 0; padding: 10px; border: 1px solid #f0f0f0; background: #f6f6f6">
                                          <a style="display: inline-block; float: left; width: 50px;"><img src="{$vo.user.user_img}" style="width: 30px; height: 30px; border-radius: 15px; object-fit: cover"></a>
                                          <div style="float: left;width: calc(100% - 50px);">
                                            <div>{$vo.user.name} {$vo.create_time|date='Y-m-d H:i'}</div>
                                            <div class="detail-body jieda-body photos">{$vo.content|raw}</div>
                                            <div class="jieda-reply">
                                              {eq name="vo.delete_time" value="0"}
                                                <span class="jieda-zan {if($vo.zan != 0)}zanok{/if}" type="zan">
                                                  <i class="iconfont icon-zan"></i><em>{$vo.zan}</em>
                                                </span>
                                                  <span type="reply" data-pid="{$vo.id}" data-tid="{$vo.user.id}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
                                                  {//评论编辑删除采纳权限}
                                                  <div class="jieda-admin">
                                                    {if ((session('user_id') == $vo.user.id) && (getLimtTime($vo.create_time) < 2)) OR ($user.auth  ?? '')}
                                                    <span type="edit" class="comment-edit" data-id="{$vo.id}">{:lang('edit')}</span>
                                                    <span type="del" class="comment-del" data-id="{$vo.id}" >{:lang('delete')}</span>
                                                    {/if}
                                                  </div>
                                              {/eq}
                                            </div>
                                          </div>
                                        </div>

                                        {// 第三层回复}
                                        {notempty name="$vo.children"}
                                            {volist name="$vo.children" id="voo"}
                                            <div class="layui-clear" style="margin:10px 0; padding: 10px; border: 1px solid #f0f0f0;">
                                              <a style="display: inline-block; float: left; width: 50px;"><img src="{$voo.user.user_img}" style="width: 30px; height: 30px; object-fit: cover; border-radius: 15px;"></a>
                                              <div style="float: left;width: calc(100% - 50px);">
                                                <div>{$voo.user.name} 回复 {$voo.touser} {$voo.create_time|date='Y-m-d H:i'}</div>
                                                <div class="detail-body jieda-body photos">{$voo.content|raw}</div>
                                                <div class="jieda-reply">
                                                  {eq name="voo.delete_time" value="0"}
                                                  <span class="jieda-zan {if($voo.zan != 0)}zanok{/if}" type="zan">
                                                      <i class="iconfont icon-zan"></i><em>{$voo.zan}</em>
                                                    </span>
                                                  <span type="reply" data-pid="{$vo.id}" data-tid="{$voo.user.id}"><i class="iconfont icon-svgmoban53"></i>{:lang('reply')}</span>
                                                  {//评论编辑删除采纳权限}
                                                  <div class="jieda-admin">
                                                    {if ((session('user_id') == $voo.user.id) && (getLimtTime($voo.create_time) < 2)) OR ($user.auth  ?? '')}
                                                    <span type="edit" class="comment-edit" data-id="{$voo.id}">{:lang('edit')}</span>
                                                    <span type="del" class="comment-del" data-id="{$voo.id}">{:lang('delete')}</span>
                                                    {/if}
                                                  </div>
                                                  {/eq}
                                                </div>
                                              </div>
                                            </div>
                                            {/volist}
                                        {/notempty}

                                    {/volist}
                                  {/notempty}
                                </div>
                                {else /}
                                <div class="detail-body jieda-body photos">
                                  <i class="layui-icon layui-icon-password" style="font-size: 24px; color: #FF5722;"></i>
                                  解密后查看内容
                                </div>
                                {/if}
                              </div>
                            </li>
                        {/article:comment}
                      </ul>
                      <div style="text-align: center" id="pages"></div>
                    </div>

                    {//评论区}
                    {if (config('taoler.config.is_reply') == 1 ) AND ( $article.is_reply == 0 )}
                    <div id="commentszbpmy" style="text-align: center;">
                        <h5>评论已关闭！</h5>
                    </div>
                    {/if}

                    {if session('?user_id') AND (config('taoler.config.is_reply') == 1 ) AND ( $article.is_reply == 1 )}
                        <div class="comment-respond">
                          <form class="comment-form">
                            <div class="layui-form">
                            <div class="layui-form-item layui-form-text">
                              <a name="comment"></a>
                              <div class="comment-textarea mb-3">
                                <textarea id="L_content"  name="content" required lay-verify="required" placeholder="{:lang('please input the content')}" class="layui-textarea fly-editor taonyeditor" style="height: 100px"></textarea>
                              </div>
                            </div>
                            <div class="layui-form-item que-comments">
                              <input type="hidden" name="article_id" value="{$article.id}" />
                              <input type="hidden" name="user_id" value="{:session('user_id')}" />
                              <button class="layui-btn layui-btn-danger" lay-filter="user-comment" lay-submit>{:lang('submit comments')}</button>
                            </div>
                            </div>
                          </form>
                        </div>
                    {/if}

                  </div>
                </div>
              </section>
            </div>
            <div class="sidebar layui-col-md4 d-none d-lg-block">
          <div class="theiaStickySidebar">
            {//作者}
            <dl class="function" id="rongkeji_User">
              <dt style="display:none;"></dt>
              <dd class="function_c">
              <div>
                <div class="widget-author-cover">
                  <div class="media media-21x9">
                    <div class="media-content" style="background-image:url(/view/common/blog/image/user-bg.jpg)">
                    </div>
                  </div>
                  <div class="widget-author-avatar">
                    <div class="flex-avatar w-80"><img alt="{$article.user.name}" src="{article:user name='user_img'}" class="avatar" height="80" width="80">
                    </div>
                  </div>
                </div>
                <div class="widget-author-meta text-center">
                    <div class="p-3">
                    <div class="h6 mb-2">{$article.user.name}</div>
                    <div class="text-xs text-secondary mb-4">本站内容禁止任何人采集</div>
                    <div class="row g-0 text-center">
                      <div class="col"><div class="font-theme h5">{$article.user.article_count}</div><div class="text-xs text-muted">文章</div></div>
                      <div class="col"><div class="font-theme h5">{$article.user.comments_count}</div><div class="text-xs text-muted">评论</div></div>
                      <div class="col"><div class="font-theme h5">{$zanCount}</div><div class="text-xs text-muted">被赞</div></div>
                    </div>
                    </div>
                  </div>
              </div>
              </dd>
            </dl>
            {//广告}
            <!--博客详情广告赞助位-->
            {:hook('ads_blog_detail_rimg')}

            {//热门文章}
            <dl class="function" id="rongkeji_remenwenzhang">
              <dt class="function_t">热门文章</dt>
              <dd class="function_c">
                <ul>
                  {volist name="artHot" id="vo"}
                  <li style="display: block;">
                    <div class="list-body fanpian">
                      <a href="{$vo.url}" target="_blank">{$vo.title}</a>
                    </div>
                    <div class="list-footer">
                      <div class="text-muted text-xs"><time class="d-inline-block">{$vo.create_time|date='Y-m-d'}</time>
                      </div>
                    </div>
                  </li>
                  {/volist}
                </ul>
              </dd>
            </dl>
            {//标签}
            {if count($hotTag) > 0}
            <dl class="function" id="rongkeji_retags">
              <dt class="function_t">热门标签</dt>
              <dd class="function_c">
                <ul>
                  {volist name="hotTag" id="vo"}
                  <li><a href="{$vo.url}" rel="tag">{$vo.name}</a></li>
                  {/volist}
                </ul>
              </dd>
            </dl>
            {/if}
            {//友情链接}
            <!--博客详情友链-->
            {:hook('ads_blog_detail_flink')}

          </div>
        </div>
        </div>
    </div>

    {//crud管理模块}
    {include file="/public/crud" /}
</main>

{include file="public/menu" /}

{/block}

{block name="script"}

<script type='text/javascript' src="{$Request.domain}/view/common/blog/js/theme.js"></script>
<script>
var collectionFind = "{:url('Collection/find')}",
    collection = "{:url('collection/')}",
    articleJieset = "{:url('Article/jieset')}",
    articleDelete = "{:url('Article/delete')}",
    commentJiedaZan = "{:url('Comment/jiedaZan')}",
    commentJiedaCai = "{:url('Comment/jiedaCai')}",
    commentGetDa = "{:url('Comment/getDa')}",
    commentUpdateDa = "{:url('Comment/updateDa')}",
    commentJiedaDelete = "{:url('Comment/jiedaDelete')}",
    langCollection = "{:lang('collection')}",
    langCancelCollection = "{:lang('cancel collection')}";
let taonystatus = "{:hook('taonystatus') ? 1 : 0} ";
	  
layui.use(['fly', 'face','colorpicker', 'laypage'], function(){
	var $ = layui.jquery
	,form = layui.form
	,fly = layui.fly
	,colorpicker = layui.colorpicker
	,laytpl = layui.laytpl
	,uid = layui.cache.user.uid
	,laypage = layui.laypage;
  var id = "{$article.id}";
  let LOGIN_URL = "{:url('login/index')}";

  //tpl模板给发布时间赋值
  $('div.detail-hits').children('span.post-time').each(function(){
    var othis = $(this), html = othis.html();
    var string =  laytpl('{{ d.time }}').render({
		time: othis.attr('data')
	});
	var posttime = layui.util.timeAgo(string, 1);
	othis.text(posttime);
  });

  //文章点赞
  $("#article-zan").on('click',function(){
    //判断登陆
    if(uid == -1){
          layer.msg('请登录再点赞', {icon: 6}, function(){location.href = login})
          return false;
        }
    $.post("{:url('article/userZanArticle')}",{article_id:id,type:1},function(data){
      if(data.code == 0){
          layer.msg(data.msg,{icon:6,time:2000},function () {
                location.reload(true);
            });
        } else {
          layer.msg(data.msg,{icon:6,adim:6});
        }
    })
  });
  
	//预定义颜色项
	colorpicker.render({
		elem: '#color'
		,color: '#393d49'
		,predefine: true // 开启预定义颜色
		,size: 'xs'
		,done: function(color){
      //改变标题颜色
      $('h1').css("color", color);
      $.ajax({
        type:'post',
        url:"{:url('Article/titleColor')}",
        data:{id: id,title_color: color},
        dataType:'json',
        success:function(data){
          if(data.code == 0){
            layer.msg(data.msg,{icon:6,time:2000
            });
          } else {
            layer.open({content:data.msg,icon:5,adim:6});
          }
        }
      });
		}
	});

    // 评论接口
    function comment(data){
        if (uid == -1) {
            layer.msg('请先登陆',{icon:5,time:2000},function(){location.href = "{:url('login/index')}"});
            return false;
        }
        var index = layer.load(1);
        $.ajax({
            type: "post",
            url: "{:url('article/comment')}",
            data: data,
            dataType: "json",
            success:function (res) {
                layer.close(index);
                if (res.code === 0) {
                    layer.msg(res.msg,{icon:6,time:2000},function () {location.reload(true)});
                }else {
                    layer.open({title:'评论失败',content:res.msg,icon:5,anim:6});
                }
            }
        });
    }

    // 回复用户
    $("span[type='reply']").on('click',function (){
        var pid = $(this).attr('data-pid');
        var tid = $(this).data('tid');
        var html =
            '<form class="layui-form user-comment" style="margin-left:50px;">' +
            '<div>' +
            '<input type="hidden" name="article_id" value="{$article.id}">' +
            '<input name="pid" value="'+ pid +'" class="layui-hide">' +
            '<input name="to_user_id" value="'+ tid +'" class="layui-hide">' +
            '<textarea name="content" required lay-verify="required"  class="layui-textarea fly-editor taonyeditor" style="height: 100px; right: 5px; margin: 10px 5px;"></textarea>' +
            '<button  type="submit" class="layui-btn" lay-submit lay-filter="submit-user-comment">提交</button>' +
            '</div>' +
            '</form>';
        var forms = $(this).nextAll('form');
        if(forms.length == 0) {
            // 移除其它评论块
            $('.user-comment').remove();
            //动态添加评论块
            $(this).next().after(html);
        }
    })

    // 评论
    form.on('submit(user-comment)',function (data){
        comment(data.field);
    });
    //提交回复
    form.on('submit(submit-user-comment)', function(data){
        comment(data.field);
        return false;
    })

    // 编辑器插件启用状态
    if(taonystatus == 0) {
        //如果你是采用模版自带的编辑器，你需要开启以下语句来解析。
        $('.detail-body').each(function(){
            var othis = $(this), html = othis.html();
            othis.html(fly.content(html));
        });
    } else {
        // 编辑评论
        $(".comment-edit").on('click', function () {
            var id = $(this).data('id');
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['600px', '500px'],
                content: "{:url('comment/edit')}" + '?id=' + id
            });
        });
        // 删除评论
        $(".comment-del").on('click', function () {
            var id = $(this).data('id');
            layer.confirm('需要删除吗？', {icon: 3}, function (){
                $.post("{:url('comment/jiedaDelete')}", {id: id}, function (res) {
                    if (res.status === 0) {
                        toast.success({title: "成功消息", message: res.msg});
                        location.reload(true);
                    } else {
                        toast.error({title: "失败消息", message: res.msg});
                    }
                })
            })
        });
    }

    // 评论分页
    laypage.render({
      elem: "pages", //注意，这里的 test1 是 ID，不用加 # 号
      count: "{$article.comments_count}", //数据总数，从服务端得到
      limit: 10,
      curr: "{$page}",
      //获取起始页
      jump: function (obj, first) {
        var page = obj.curr;
        var limit = obj.limit;
        var  url = "{:url('article_detail',['id' => $article.id ,'ename' =>$article['cate']['ename']])}";
        var id = "{$article.id}";
        //首次不执行
        if (!first) {
          $.post("{:url('article/detail')}", { id: id, page: page }, function () {
            location.href = url + '?page=' + page + '#flyReply';
          });
        }
      },
    });
	
	//下载
    $('#zip-download').click(function (){
	  var id = "{$article.id}";
      $.ajax({
        type:"post",
        url:"{:url('article/download')}",
        data:{id:id},
        success:function (data) {
          location.href = "{:url('article/download',['id'=>$article.id])}"; 
        }
      });
    });

    $("#jiemi").click(function (){
      //判断登陆
      if(uid == -1){
        layer.msg('请先登录再查看', {icon: 6}, function(){location.href = LOGIN_URL})
        return false;
      }
      var id = "{$article.id}";
      layer.prompt(function(value, index, elem){
        // alert(value); //得到value
        $.post("{:url('article/jiemi')}",{id:id, art_pass:value},function (res){
          if(res.code === 0){
            layer.msg(res.msg,{icon:6,time:2000},function () {
              parent.location.reload(); //刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
            });
          } else {
            layer.msg(res.msg,{icon:5,adim:6});
          }
        });
        layer.close(index);
      });
    });

});
</script>

{:hook('taonyeditor')}

{:hook('taoplayer')}

{:hook('taoplyr')}

{/block}