{template 'common/header-base'}

<style>
    body {
        font-family: MicroSoft YaHei, simHei;
        background: #a87480 url('../addons/we7_shake/template/image/bg.jpg');
        background-position: center;
        background-attachment: fixed;
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
    }
    .common-bg {
        filter: Alpha(opacity=70);
        background: #000;
        background: rgba(0, 0, 0, 0.7);
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .shake {
        width: 1000px;
        margin: 0 auto;
    }
    .shake-top {
        height: 120px;
        padding-top: 20px;
        margin-bottom: 20px;
        background: url('{php echo tomedia($reply['logo']);}') no-repeat 0 15px;
    }
    .shake-top-info {
        width: 630px;
        height: 100px;
    }
    .shake-topic {
        margin: 0 10px;
        color: #EEE;
        line-height: 50px;
    }
    .shake-topic .msg_tit {
        display: block;
        height: 50px;
        font-size: 32px;
        font-family: simHei;
        font-weight: bold;
        line-height: 60px;
        margin: 0;
    }
    .shake-topic .msg_cnt {
        display: block;
        height: 50px;
        font-size: 16px;
        font-weight: bold;
    }
    .shake-topic .msg_tit strong, .shake-topic .msg_cnt span {
        color: #ef2e2e;
    }
    .shake-box {
        overflow: hidden;
    }
    .shake-box > .pull-right {
        width: 630px;
        margin: 0;
    }
    .shake-box li {
        display: block;
        height: 35px;
        margin-bottom: 23px;
        border: 1px #000 solid;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .shake-box li .img-circle {
        width: 53px;
        height: 53px;
        line-height: 70px;
        text-align: center;
        background: #e93f3f;
        border: 1px #000 solid;
        position: absolute;
        margin-top: -10px;
        margin-left: -1px;
        overflow: hidden;
    }
    .shake-box li .img-circle i {
        font-size: 40px;
        color: #FFF;
    }
    .shake-box li .shake-progress {
        display: inline-block;
        height: 20px;
        background: #fff100;
        border: 1px #000 solid;
        margin-top: 8px;
        margin-left: -5px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .shake-box li:nth-child(even) .shake-progress {
        background: #98d110;
    }
    .shake-box li .pull-right {
        width: 70%;
    }
    .shake-box li .pull-left {
        line-height: 37px;
        height: 37px;
        width: 30%;
        overflow: hidden;
    }
    .shake-box li .shake-num {
        display: inline-block;
        font-size: 28px;
        color: #FFF;
        position: absolute;
        padding-left: 15px;
        text-align: right;
    }
    .shake-box li .shake-name {
        display: inline-block;
        color: #FFF;
        font-size: 14px;
        width: 74%;
        padding-left: 23%;
        padding-right: 3%;
        text-align: right;
    }
    .shake-box > .pull-left {
        width: 360px;
    }
    .shake-time {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #EEE;
        font-size: 80px;
        background: rgba(0, 0, 0, 0.7);
        border: 8px #EEE solid;
        margin-top: 100px;
    }
    .shake-qrcode {
        display: block;
        width: 320px;
        height: 320px;
        margin: 30px auto 0 auto;
    }
    .shake-pic {
        width: 360px;
        height: 420px;
        margin-bottom: 10px;
        overflow: hidden;
    }
    .shake-info {
        color: #FFF;
        font-size: 20px;
        padding: 10px;
    }
    .shake-avatar {
        width: 80px;
        float: left;
        margin: 5px;
    }
</style>

<div class="shake">
    <div class="shake-top">
        <div class="shake-top-info common-bg pull-right">
            <div class="shake-topic">
                <h1 class="msg_tit" style="display: block;">搜索公众号 <strong>{$_W['account']['name']}</strong></h1>
                <h1 class="msg_tit" style="display: none;">添加公众号 <strong></strong></h1>
                <span class="msg_cnt">发送 {loop $reply['keyword'] $row}
                    <span class="red Topic_cnt">{$row['content']}</span>，{/loop} 登记后进入摇一摇界面
                </span>
            </div>
        </div>
    </div>
    <div class="shake-box">
        {if $reply['status'] == 0}
        <div class="alert alert-warning text-center" style="font-size:20px;" role="alert">已经有
            <span id="container-total">{$total}</span> 个用户加入摇一摇
        </div>
        <div class="pull-left" style="text-align:center;">
            <div class="shake-time img-circle" id="description" style="display:none;">{$reply['countdown']}</div>
            <img class="img-rounded shake-qrcode" src="{php echo tomedia($reply['qrcode']);}">
            <div class="shake-button btn btn-warning btn-lg" onclick="start()" style="width:300px; margin-top:60px;">
                开始
            </div>
        </div>
        <div class="pull-right" id="container-join">
            {loop $list $row}
            <img id="head-{$row['openid']}" class="img-circle shake-avatar" src="{$fans[$row['openid']]['avatar']}">
            {/loop}
        </div>
        {else}
        <!-- 开始 -->
        <div class="pull-left">
            {if $reply['background']}
            <div class="shake-pic img-rounded">
                <img src="{php echo tomedia($reply['background']);}" style="width:360px;">
            </div>
            {/if}
            {if $reply['rule']}
            <div class="shake-info common-bg">
                {$reply['rule']}
            </div>
            {/if}
        </div>
        <ul class="pull-right" id="shakecount-list">
            {php $i = 1;}
            {loop $list $item}
            <li id="shakecount-{$item['openid']}" class="common-bg {if $i%2==0}even{/if}">
                <div class="pull-left">
                    <img class="img-circle shake-avatar" style="margin-left:-45px;"
                         src="{$fans[$item['openid']]['avatar']}">
                    <span class="shake-num">{php echo $i++;}</span>
                    <span class="shake-name">{$fans[$item['openid']]['nickname']}</span>
                </div>
                <div class="pull-right">
                    <span class="shake-progress" style="{if $item['shakecount']}width:{php echo round($item['shakecount'] / $reply['maxshake'], 4) * 100}%;{else}width:0%;{/if}"></span>
                </div>
            </li>
            {/loop}
        </ul>
        {/if}
    </div>
</div>

{if $reply['status'] == 0}
<script type="text/javascript">
    var countdown = {php echo $reply['countdown'] ? $reply['countdown'] : 10};
    var lastupdatetime = '{$lastupdatetime}';
    function start() {
        $('.shake-qrcode').hide();
        $('#description').show().html(countdown--);
        if (countdown <= 0) {
            //更新摇一摇状态
            $.post('{php echo $this->createWebUrl('changestatus', array('id' => $reply['rid'], 'status' => 1))}', function () {location.reload();});
            return false;
        } else {
            setTimeout(function () {
                start();
            }, 1000);
        }
    }
    function getJoin() {
        $.getJSON('{php echo $this->createWebUrl('getjoin', array('rid' => $reply['rid']))}', {'lastupdatetime': '1417342323'}, function (s) {
            if (s.message) {
                for (item in s.message.list) {
                    if (!$('#head-' + s.message.list[item].openid).size()) {
                        $('#container-join').prepend('<img id="head-' + s.message.list[item].openid + '" class="img-circle shake-avatar" src="' + s.message.list[item].avatar + '">');
                    }
                }
                $('#container-total').html(s.message.total);
            }
            setTimeout(function () {
                getJoin();
            }, 3000);
        });
    }
    setTimeout(function () {
        getJoin();
    }, 5000);
</script>

{elseif $reply['status'] == 1}
<script type="text/javascript">
    function refresh() {
        $.getJSON('{php echo $this->createWebUrl('getrank', array('id' => $reply['id'], 'weid' => $_W['uniacid']))}', function (s) {
            if (s.message.status == 1) {
                var html = '';
                var avatar;
                var progress, num = 1, beforeitem = '';
                for (i in s.message.message) {
                    $('#shakecount-' + s.message.message[i].openid).removeClass('even');
                    progress = Math.round(s.message.message[i].shakecount / {$reply['maxshake']} * 10000) / 100;
                    $('#shakecount-' + s.message.message[i].openid).find('.shake-progress').css('width', progress + '%');
                    $('#shakecount-' + s.message.message[i].openid).find('.shake-num').html(num);
                    if (num == 1) {
                        $('#shakecount-list').prepend($('#shakecount-' + s.message.message[i].openid));
                        beforeitem = s.message.message[i].openid;
                    } else {
                        $('#shakecount-' + s.message.message[i].openid).insertAfter($('#shakecount-' + beforeitem));
                        beforeitem = s.message.message[i].openid;
                    }
                    if (num % 2 == 0) {
                        $('#shakecount-' + s.message.message[i].openid).addClass('even');
                    }
                    num = num + 1;
                }
            } else {
                if (s.redirect) {
                    location.href = s.redirect;
                }
                return false;
            }
            setTimeout(function () {
                refresh();
            }, 1000);
        });
    }
    $(function () {
        refresh();
    });
</script>
{/if}

</body>
</html>