{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="oricoEGapp">
    <!-- 内容 -->
    <div class="oricoEGapp-articledetail">
        <div class="content">
            <div class="blog_detail">
                <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="share_box">
                {notempty name="share_config"}
                <div class="blog_share">
                    <h3>{:lang_i18n('分享')}</h3>
                    <ul class="share_list">
                        {volist name="share_config" id="sc"}
                        <li>
                            <a 
                            {if condition="!empty($sc.is_blank) && $sc.is_blank.value == 1"}target="_blank"{/if}
                            {notempty name="sc.url.value"}href="{$sc.url.value}"{/notempty}>
                                {eq name=":array_key_exists('triggered_qrcode', $sc)" value="true"}
                                <img class="toggle_qrcode" src="{$sc.image.value}" />
                                <div class="triggered_qrcode">
                                    <img src="{$sc.triggered_qrcode.value}" />
                                </div>
                                {else /}
                                <img src="{$sc.image.value}" />
                                {/eq}
                            </a>
                        </li>
                        {/volist}
                    </ul>
                </div>
                {/notempty}
                <div class="comment">
                    <h3>{:lang_i18n('留言')}</h3>
                    <form action="{:url('article/comment', ['id' => $detail.id])}" method="POST" class="comment_form clearfix" autocomplete="off">
                        <div style="margin-right: 0.625rem; margin-bottom: 0.5rem;">{:lang_i18n('名称')}:<br>
                            <input class="form-control itinp new_name" type="text" name="name">
                        </div>
                        <div>{:lang_i18n('电子邮箱')}:<br>
                            <input class="form-control itinp new_email" type="email" name="email">
                            <p style="color: #C6C7C9; font-size: 0.75rem; margin-bottom: 0.5rem; ">
                                {:lang_i18n('您的电子邮件地址不会被公开')}
                            </p>
                        </div>
                        <div class="comment_area">{:lang_i18n('留言内容')}:<br>
                            <textarea class="form-control itinp new_comment" style="height: 3rem;border: 1px solid #DBDBDB;" name="content"></textarea>
                        </div>
                    </form>
                    <div class="comment_btn" style="color:#ffffff;">{:lang_i18n('提交留言')}</div>
                </div>
                {notempty name="$recommends"}
                <div class="mblove">
                    <div class="mianct">
                        <p class="thtitle">{:lang_i18n('你可能还喜欢')}</p>
                        <p><img src="__IMAGES__/1line.webp"></p>
                    </div>
                    <div class="swiper-container loveswiper">
                        <div class="swiper-wrapper">
                            {volist name="recommends" id="vo"}
                            <div class="swiper-slide">
                                <a href="{:url('article/detail', ['id' => $vo.id])}">
                                    <img src="{$vo.image}" alt="{$vo.title}">
                                    <p class="lvtit">{$vo.title}</p>
                                </a>
                            </div>
                            {/volist}
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                {/notempty}
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function() {
        $('.comment_btn').click(function() {
            var form = $('.comment_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();
                    }
                }
            })
        })

        $('.toggle_qrcode').click(function() {
            $(this).siblings('.triggered_qrcode').toggle();
        })
    })
    //banner轮播
    var loveswiper = new Swiper('.loveswiper', {
        // 配置选项
        slidesPerView: 2,
        spaceBetween: 30,
        loop: true,
        autoplay: {
            delay: 3000,
        },
        pagination: {
            el: '.swiper-pagination',
        }
    });
    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}