{#layout name="public/layout2" /#}
{#load href="__ROOT__/assets/css/article.css" /#}
<div id="app">
    <!-- <div class="information_banner">
        <img src="__ROOT__/assets/images/information_banner.png" >
    </div> -->
    <div class="content_wrapper">
        <div class="content">
            <div class="information_nav_wrapper" @mouseleave.stop="showSecondLine=false">
                <div class="information_nav_con">
                    <div class="information_nav">
                        <a {#if condition="!$Request.param.cid"#}class="active_text" {#/if#}
                            href="{#:P(['cid'=>null])#}">全部分类</a>
                        {#volist name="options1" id="vo"#}
                        <a {#if condition="$key eq $Request.param.cid"#}class="active_text" {#/if#}
                            href="{#:P(['cid'=>$key])#}">{#$vo#}</a>
                        {#/volist#}
                        {#if condition="count($options2) gt 0"#}
                        <a class="open_btn active_open_btn" href="javascript:;"
                            @mouseenter.stop="showSecondLine=true">···</a>
                        {#/if#}
                    </div>
                    <div class="information_nav2" v-show="showSecondLine">
                        {#volist name="options2" id="vo"#}
                        <a {#if condition="$key eq $Request.param.cid"#}class="active_text" {#/if#}
                            href="{#:P(['cid'=>$key])#}">{#$vo#}</a>
                        {#/volist#}
                    </div>
                </div>
            </div>
            <div class="information_list_con">
                <div class="article_banner"><img src="__ROOT__/assets/images/article/banner.png" alt="" /></div>
                {#if condition="count($list) gt 0"#}
                <div>
                    {#volist name="list" id="vo"#}
                    <div class="information_list clearfix">
                        <!-- <div class="information_list_img  float">
                            <a href="{#$vo.link_url#}" target="_blank"><img src="{#$vo.thumb_src#}" ></a>
                        </div> -->
                        <div class="information_list_text">
                            <a class="title substring" href="{#$vo.link_url#}" target="_blank">{#$vo.title#}</a>
                            <p class="list_con">{#$vo.content#}</p>
                            <div class="list_text_bottom">
                                <div class="lf">
                                    {#eq name="vo.source" value="0"#}
                                    <span class="original">[原创]</span>
                                    {#else/#}
                                    <span class="original2">[转载]</span>
                                    {#/eq#}
                                    <a class="guide" href="{#:P(['cid'=>$vo.cid])#}">· {#$options[$vo.cid]#}</a>
                                    <span class="handle_time">· {#:date('Y-m-d H:i',$vo.addtime)#}</span>
                                </div>
                                <span class="handle_see">{#$vo.click#}</span>
                            </div>
                        </div>
                    </div>
                    {#/volist#}
                </div>
                {#else#}
                <div class="list_empty n_bd">
                    <div class="emp_text">暂时没有数据哦</div>
                </div>
                {#/if#}
                {#$pagerHtml#}
            </div>
            <div class="information_hot_ranking">
                <div class="box_1">
                    <input id="inputField" class="input" type="text" value="{#$Request.param.keyword#}" placeholder="搜索资讯" />
                    <span class="search displayBlock"></span>
                    <span class="close displayNone" id="inputClose"></span>
                </div>
                <div class="box_2">
                    <div class="tit">热门排行</div>
                    <ul class="lists">
                        {#volist name="hotArticleList" id="vo"#}
                        <li class="item">
                            <div class="item_lf">
                                <span class="ranking ranking_{#$key+1#}">{#$key+1#}</span>
                                <a class="substring" href="{#$vo.link_url#}" target="_blank">{#$vo.title#}</a>
                            </div>
                            <span class="item_rt">{#$vo.click#}</span>
                        </li>
                        {#/volist#}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var keyword = "{#$Request.param.keyword#}";
    
    $(document).ready(function() {
        if(keyword!=''){
            $('.search').removeClass('displayBlock').addClass('displayNone')
            $('.close').removeClass('displayNone').addClass('displayBlock')
        }
        
        // 监听input输入事件
        $('#inputField').on('input', function() {
            var text = $(this).val();
            if (text.length > 0) {
                $('.search').removeClass('displayBlock').addClass('displayNone')
                $('.close').removeClass('displayNone').addClass('displayBlock')
            } else {
                $('.search').removeClass('displayNone').addClass('displayBlock')
                $('.close').removeClass('displayBlock').addClass('displayNone')
            }
        });
        
        // 监听回车事件
        $('#inputField').on('keypress', function(e) {
            if (e.which === 13) {
                var text = $(this).val();
                httpget(qscms.apiList.searchLocation, {
                	alias: 'articlelist',
                	keyword: text
                }).then(function(res) {
                	location.href = res.data
                }).catch(function() {})
            }
        });

        $('#inputClose').on('click', function() {
            var url = "{#:P(['keyword'=>null])#}"
            window.location.href = url
            // $('#inputField').val('')
            // $('.search').removeClass('displayNone').addClass('displayBlock')
            // $('.close').removeClass('displayBlock').addClass('displayNone')
        });
    });

    var app = new Vue({
        el: '#app',
        data: {
            showSecondLine: false,
        }
    })
</script>