<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes" />  

    <script src="/static/assets/vendors/jquery/dist/jquery.min.js"></script>
    <script src="/static/js/jquery-ui/js/jquery-ui-1.10.4.custom.js"></script>
    <!-- Bootstrap -->
    <link href="/static/assets/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>


    <!-- Custom Theme Scripts -->
    <script src="/static/assets/js/custom.min.js"></script>


    <style>
        body{
             background:url({{activity.background.url|safe}}) no-repeat center fixed;
            width:100%;
            height:100%;
                       
        }
        #content{          
            position: absolute;
            width:100%;
                      
            
        }
        #content .content{           
            position: absolute;
            top:25px;
            width:100%;
            margin:0 auto;
            text-align: center;
        }
        #content .award img{
            width:250px;

        }
        .act-title{
            font-size:23px;
        }
        .award .tt{
            margin-top:50px;
            font-size:16px;
            color:red;
        }

    </style>

</head>

<script type="text/javascript">
    $(document).ready(function(){
        /*
        wx.config({
            debug: false,
            appId:'{{wx_appid}}',
            timestamp:'{{wx_timestamp}}',
            nonceStr: '{{wx_nonceStr}}',
            signature: '{{wx_signature}}',
            jsApiList: ["getLocation"]
        });

        wx.ready(function () {
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var weidu = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var jingdu = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    sendAddress(weidu, jingdu);
                },
                cancel: function () {
                    sendAddress(0, 0);
                },
                fail: function () {
                    sendAddress(0, 0);
                }
            });
        });
        */

       


        //数据检查
        //标签是否已被扫码
        if({{e.code}}==10){
            alert('此标签已被扫码');
        };


        //标签类型是否符合活动要求
        //alert('{{package_id}},{{activity.lblpkg_id}}');
        


        //活动是否有地理位置要求
        alert('{{activity.adm_ids}}');
        


        var winner_id=0;
        $('.btn-draw').click(function(){
            $.ajax({
                url: "/sales/ajax/activity/{{activity.id}}/draw/",
                success: function(data) {
                    if (data.award.name){
                        winner_id=data.winner_id;
                        $('#content .award .tt').text(data.award.name);
                        $('#content .award img').attr('src',data.award.img);
                    }else{
                         $('#content .award .tt').text("对不起，手气稍稍差了那么一点点...");
                    }
                    $('#content .award').show();
                },
                dataType: 'json',
            });
        });
        $('.btn-list').click(function(){
            $.ajax({
                    type:'GET',
                    processData: false,
                    contentType: 'application/json',
                    url:'/sales/ajax/winner/list/{{company_id}}/{{consumer_id}}/',
                    success:function(data){

                        $('#dlg-winner-list .headimgurl img').attr('src',data.headimgurl);
                        $('#dlg-winner-list .nickname').text(data.nickname);
                        var html='';
                        for (i in data.records){
                            html=html+'<tr><td>'+data.records[i].award_code+'</td><td>'+data.records[i].award_name+
                                '</td><td>'+data.records[i].time+'</td><td>'+data.records[i].time_redeem+'</td></tr>';
                        };     
                        $('#dlg-winner-list table tbody').html(html);
                        $("#dlg-winner-list").modal('show');

                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert('连接服务器失败');
                        return;
                    }
                 });
        });
        $('.btn-redeem').click(function(){
            $.ajax({
                type:'GET',
                processData: false,
                contentType: 'application/json',
                url:'/sales/ajax/winner/redeem/'+winner_id+'/',
                success:function(data){
                    alert('领取成功');
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('连接服务器失败');
                    return;
                }
            });
        });

    });
</script>
<body >
    <div id='content'>
        <div class="content">
            <div class="act-title">活动名称：{{activity.name}}</div>
            <div><a class="btn btn-draw">抽奖</a></div>
            <div><a class="btn btn-list">我的中奖记录</a></div>
            <div class='award' style="display:none;">
                <div class="tt"></div>
                <img></img>
                <div><a class="btn btn-redeem">领取</a></div>
            </div>
        </div>
    </div>

    <!--弹出模式对话框-->
    <div id="dlg-winner-list" class="modal">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>我的中奖记录：</h3>
      </div>
      <div class="modal-body">
        <div>
            <span class="headimgurl"><img></img></span>                    
            <span class="nickname"></span>
            <table class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                <thead> <th>奖项</th><th>奖品名称</th><th>中奖时间</th><th>领取时间</th></thead>
                <tbody></tbody>
            </table>
        </div>
      </div>
      <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">关闭</a>
      </div>
    </div>

    <!-- Custom Theme Scripts -->
    <script src="/static/assets/js/custom.min.js"></script>

</body>


</html>
