<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/barrager.css">
<script src="/libs/valine/av-min.js"></script>
<script src="/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.barrager.js"></script>

<%- partial('_partial/bg-cover') %>

<style>
    #send{
        margin-bottom: 10px;
        width: 49%;
        background-color: #0ba360;
    }
    #clear{
        margin-bottom: 10px;
        width: 49%;
        background-color: #e7c65c;
    }
    p{
        text-align: center;
    }
</style>
<main class="content">
    <div id="contact" class="container chip-container">
        <div class="card">
            <div class="card-content">
                <div class="tag-title center-align">
                    <i class="fas fa-comments"></i>&nbsp;&nbsp;<%= __('contact') %>
                </div>
                <%- page.content %>
            </div>
            <!--valine评论弹幕-->
            <% if (theme.valine && theme.valine.enable) { %>
                <p>
                    <b>畅所欲言</b><br>
                    <b>在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链</b><br>
                    <b>友链信息</b><br>
                    <b>博客名称: <%- config.title %></b><br>
                    <b>博客网址: <%- config.url %></b><br>
                    <b>博客头像: <%- config.url %>/medias/logo.png</b><br>
                    <b>博客介绍: 犹豫就会败北</b><br>
                </p>
                <div class="container">
                    <section id="custom" class="bb-section">
                        <div class="row">
                            <div class="col-md-5">
                                <form class="form-inline">
                                    <div class="form-group">
                                        文字：<input class="form-control" name="info" type="text" placeholder="hello, world"/>
                                    </div>
                                    <div class="form-group">
                                        链接：<input class="form-control" name="href" type="text" placeholder="https://github.com/blinkfox/hexo-theme-matery"/>
                                    </div>
                                    <div class="form-group">
                                        速度：<input  class="form-control"  name="speed" type="text" placeholder="5~20" value="16" />
                                    </div>
                                </form>
                                <div class="form-group">
                                    <button id="send"  class="btn" onclick="run()">留言</button>
                                    <button id="clear" class="btn " onclick="clear_barrage()"> 清除</button>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>

                <script type="text/javascript">
                    AV.init({
                        appId: '<%- theme.valine.appId %>',
                        appKey: '<%- theme.valine.appKey %>'
                    });

                    $(function() {
                        do_barrager();
                        async function do_barrager() {
                            let lists = [];
                            //查询弹幕
                            const query = new AV.Query('barrager');
                            const barrager = await query.find().then((barrager) => {
                                lists = barrager;
                            })
                            let length = lists.length;
                            let index = 0;
                            const timer = setInterval(() => {
                                if (index === length) {
                                    clearInterval(timer);
                                    do_barrager()
                                } else {
                                    let obj = lists[index]
                                    let jsonObject = eval('(' + JSON.stringify(obj) + ')');
                                    $('body').barrager({
                                        'img': '/medias/barrager/' + Math.floor(Math.random() * 3) + ".png",
                                        'href': jsonObject.href,
                                        'info': jsonObject.info,
                                        'speed': jsonObject.speed
                                    });
                                    index++;
                                }
                            }, 500)
                        }
                    });

                    //发送弹幕
                    function  run(){
                        let info = $('input[name=info]').val();
                        (info === '' ) ?  info='hello world' : info=info;
                        let href = $('input[name=href]').val();
                        (href === '' ) ?  href='https://github.com/blinkfox/hexo-theme-matery' : href=href;
                        let speed = parseInt($('input[name=speed]').val());
                        if(speed > 20 || speed < 5)
                            speed = Math.floor(Math.random() * 10) + 5;
                        const Barrager = AV.Object.extend('barrager');
                        const barrager = new Barrager();
                        barrager.set('href', href);
                        barrager.set('info', info);
                        barrager.set('speed', speed);
                        barrager.save().then((todo) => {
                            $(" input[ name='info' ] ").val("")
                            $(" input[ name='href' ] ").val("")
                            $(" input[ name='speed' ] ").val("")
                        });
                    }

                    function  clear_barrage()
                    {
                        $.fn.barrager.removeAll();
                    }

                </script>
            <% } %>
        </div>

        <!--其他评论card-->
        <div class="card">
            <% if (theme.gitalk && theme.gitalk.enable) { %>
                <%- partial('_partial/gitalk') %>
            <% } %>

            <% if (theme.gitment.enable) { %>
                <%- partial('_partial/gitment') %>
            <% } %>

            <% if (theme.disqus.enable) { %>
                <%- partial('_partial/disqus') %>
            <% } %>

            <% if (theme.livere && theme.livere.enable) { %>
                <%- partial('_partial/livere') %>
            <% } %>

            <% if (theme.minivaline && theme.minivaline.enable) { %>
                <%- partial('_partial/minivaline') %>
            <% } %>

            <% if (theme.twikoo && theme.twikoo.enable) { %>
                <%- partial('_partial/twikoo') %>
            <% } %>

            <% if (theme.changyan && theme.changyan.enable) { %>
                <%- partial('_partial/changyan') %>
            <% } %>

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