{pboot:if({pboot:commentstatus})}
<div class="container">
  <div class="shadow-sm p-3 my-5 bg-white rounded">
    <h4>{plang:cmt_submit}:</h4>
    <form class="my-4" onsubmit="return submitcomment(this);" data-action="{pboot:commentaction}">
      <div class="form-group">
        <textarea name="comment" id="comment" class="form-control" placeholder="{plang:cmt_hint_content}"></textarea>
      </div>
      {pboot:2if({pboot:commentcodestatus})}
      <div class="form-group">
        <div class="row">
          <div class="col-6 col-md-3">
            <input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="{plang:cmt_hint_checkcode}">
          </div>
          <div class="col-6  col-md-3">
            <img title="{plang:global_refresh}" class="codeimg" style="height:33px;" src="{pboot:checkcode}" onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" />
          </div>
        </div>
      </div>
      {/pboot:2if}
      <div class="form-group">
        <button type="submit" class="btn btn-info mb-2">{plang:global_submit}</button>
      </div>
    </form>
    <h4>{plang:cmt_record}</h4>
    <a name="comment"></a>
    {pboot:comment contentid={content:id} num=20}
    <div class="media border-bottom pb-3 pt-3">
      <img class="mr-3" src="[comment:headpic]" height="25">
      <div class="media-body">
        <h6 class="mt-0">
          <strong>[comment:nickname]</strong>
          <small style="color:#999">[comment:date]</small>
        </h6>
        <p>[comment:comment]
          <span class="badge badge-light text-secondary font-weight-normal replybtn" data-action="[comment:replyaction]">{plang:global_replay}</span>
        </p>
        {pboot:commentsub}
        <!-- 调用子评论 -->
        <div class="media mt-3 border-top-dashed pt-3">
          <img class="mr-3" src="[commentsub:headpic]" height="25">
          <div class="media-body">
            <h6 class="mt-0"><strong>[commentsub:nickname]</strong> <small style="color:#999">[commentsub:date]</small></h6>
            <p>
              @[commentsub:pnickname] [commentsub:comment]
              <span class="badge badge-light text-secondary font-weight-normal replybtn" data-action="[commentsub:replyaction]">{plang:global_replay}</span>
            </p>
          </div>
        </div>
        {/pboot:commentsub}
      </div>
    </div>
    {/pboot:comment}
    <!-- 分页 -->
    {pboot:2if({page:rows}>0)}
    <nav aria-label="page navigation" class="my-4">
      <div class="pagination justify-content-center">
        <a class="page-item page-link" href="{page:index}#comment">{plang:page_index}</a>
        <a class="page-item page-link" href="{page:pre}#comment">{plang:page_pre}</a>
        <a class="page-item page-link" href="{page:next}#comment">{plang:page_next}</a>
        <a class="page-item page-link" href="{page:last}#comment">{plang:page_last}</a>
      </div>
    </nav>
    {2else}
    <div class="text-center my-5 text-secondary">{plang:global_no_data}</div>
    {/pboot:2if}
  </div>
</div>
<!-- 评论回复弹框 -->
<div class="modal" tabindex="-1" role="dialog" id="reply">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{plang:cmt_reply}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form onsubmit="return submitcomment(this);" data-action="" id="replyform">
        <div class="modal-body">
          <div class="form-group">
            <textarea name="comment" id="comment" class="form-control" placeholder="{plang:cmt_hint_content}"></textarea>
          </div>
          {pboot:2if({pboot:commentcodestatus})}
          <div class="form-group">
            <div class="row">
              <div class="col-6">
                <input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="{plang:cmt_hint_checkcode}">
              </div>
              <div class="col-6">
                <img title="{plang:global_refresh}" class="codeimg" style="height:33px;" src="{pboot:checkcode}" onclick="this.src='{pboot:checkcode}?'+Math.round(Math.random()*10);" />
              </div>
            </div>
          </div>
          {/pboot:2if}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{plang:global_close}</button>
          <button type="submit" class="btn btn-info">{plang:global_submit}</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  /*评论回复弹框*/
  $('.replybtn').on("click", function() {
    var url = $(this).data("action");
    $("#reply").modal("show");
    $("#replyform").data("action", url);
  });

  /*提交评论*/
  function submitcomment(obj) {
    var url = $(obj).data("action");
    var comment = $(obj).find("#comment").val();
    var checkcode = $(obj).find("#checkcode").val();

    $.ajax({
      type: 'POST',
      url: url,
      dataType: 'json',
      data: {
        comment: comment,
        checkcode: checkcode
      },
      success: function(response, status) {
        if (response.code) {
          alert(response.data);
          $(obj)[0].reset();
          $(".modal").modal("hide");
          window.location.reload()
        } else {
          if (response.tourl != "") {
            if (confirm(response.data + '{plang:global_to_login}')) {
              location.href = response.tourl;
            }
          }
          $('.codeimg').click(); /*更新验证码*/
        }
      },
      error: function(xhr, status, error) {
        alert('{plang:error_retData}');
      }
    });
    return false;
  }
</script>
{/pboot:if}