{extend name="public/base" /}
{block name="title"}
    {notempty name="detail.seo_title"}<title>{$detail.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block}
{block name="seo"}
    {notempty name="detail.seo_keywords"}
    <meta name="keywords" content="{$detail.seo_keywords}" />
    <meta name="description" content="{$detail.seo_desc}" />
    {else /}
    {__BLOCK__}
    {/notempty}
{/block}
{block name="style"}
<link rel="stylesheet" href="__CSS__/article_detail.css">
{/block}
{block name="main"}
<div class="orico_Page_articleDetail">
    <!--内容 -->
    <div class="articleDetailMain">
        <div class="atmleft">
            <div class="blog_title">
                <h2>{$detail.title}</h2>
                <p>{$detail.release_time}</p>
            </div>
            <!-- 文本渲染-->
            <div class="blog_content">{$detail.content|raw}</div>
        </div>
        <div class="atmright">
            {notempty name="share_config"}
            <div class="blog_share">
                <h3>{:lang_i18n('分享')}</h3>
                <div class="share_list">
                    {volist name="share_config" id="sc"}
                    <a class="atdit" {if condition="!empty($sc.is_blank) && $sc.is_blank.value == 1"}target="_blank"{/if} {notempty name="sc.url.value"}href="{$sc.url.value}"{/notempty}>
                        <img src="{$sc.image.value}" />
                        {eq name=":array_key_exists('triggered_qrcode', $sc)" value="true"}
                        <div class="triggered_qrcode">
                            <img src="{$sc.triggered_qrcode.value}" />
                        </div>
                        {/eq}
                    </a>
                    {/volist}
                </div>
            </div>
            {/notempty}
            <div class="repply">
                <h3>{:lang_i18n('留言')}</h3>
                <form action="{:url('article/comment', ['id' => $detail.id])}" method="POST" autocomplete="off">
                    <span>{:lang_i18n('名称')}</span>
                    <input class="form-control itinp new_name" type="text" name="name" style="text-indent: 10px;">
                    <span>{:lang_i18n('电子邮箱')}</span>
                    <input class="form-control itinp new_email" type="email" name="email" style="text-indent: 10px; margin-bottom:0;">
                    <p style="color: #C6C7C9; font-size: 0.75rem; margin-bottom: 0.625rem;">{:lang_i18n('您的电子邮件地址不会被公开')}</p>
                    <span>{:lang_i18n('留言内容')}</span>
                    <textarea class="form-control itinp new_comment" name="content" rows="3" style="text-indent: 10px;width: 98%; margin-top: 0.625rem;margin-bottom: 0.625rem;border: 1px solid #DBDBDB;"></textarea>
                    <div class="comment_btn" style="color:#ffffff;">{:lang_i18n('提交留言')}</div>
                </form>
            </div>
        </div>
    </div>
    {notempty name="$recommends"}
    <div class="xq">
        <!-- 猜您喜欢 -->
        <div class="love">
            <div class="love1">
                <p class="tt">{:lang_i18n('你可能还喜欢')}</p>
                <p><img src="__IMAGES__/1line.png" height="7"></p>
            </div>
            <ul class="love2">
                {volist name="recommends" id="vo"}
                <li>
                    <a href="{:url('article/detail', ['id' => $vo.id])}">
                        <div class="lvimg"><img src="{$vo.image}"></div>
                        <p class="lvtit">{$vo.title}</p>
                    </a>
                </li>
                {/volist}
                <div class="clear"></div>
            </ul>
        </div>
    </div>
    {/notempty}
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(document).ready(function() {
        $('.comment_btn').click(function() {
            var form = $(this).parents('form');
            var form_data = form.serialize();
            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: form_data,
                dataType: 'json',
                success: function(data) {
                    alert(data.msg);
                    if (data.code == 0) {
                        window.location.reload();
                    }
                }
            })
        })
        // 滚动到猜你喜欢部分，右边提交信息不固定
      $(window).scroll(function() {
          // 获取元素引用
          const blogContent = $('.blog_content');
          const rightSidebar = $('.orico_Page_articleDetail .articleDetailMain .atmright');
          
          // 计算 blog_content 底部位置
          const contentBottom = blogContent.offset().top + blogContent.outerHeight();
          
          // 计算视口底部位置
          const windowBottom = $(window).scrollTop() + $(window).height();
          
          // 当视口底部超过 blog_content 底部时
          if (windowBottom >= contentBottom) {
              rightSidebar.css('position', 'static'); // 移除固定定位
          } else {
              rightSidebar.css('position', 'fixed'); // 恢复固定定位
          }
      });
    })
    function shareCustomers(){
        // 复制到粘贴板
        const input = document.createElement('input')
        input.setAttribute('readonly', 'readonly')
        let url=window.location.href
        input.setAttribute('value', url)
        document.body.appendChild(input)
        input.select()
        if (document.execCommand('copy')) {
            document.execCommand('copy')
            alert("{:lang_i18n('链接复制成功')}")
        }
        document.body.removeChild(input)
    } 
</script>
{/block}