<?php
/**
 * @var \yii\web\View $this
 * @var int $activityType
 * @var string $title
 */
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title><?= $title ?></title>
    <link rel="stylesheet" type="text/css" href="<?= STATIC_URL ?>/static/cp/plugin-datatables/datatables/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="<?= STATIC_URL ?>/static/cp/plugin-datatables/datatables/dataTables.bootstrap.css  "/>
    <script src="<?= STATIC_URL ?>/static/cp/plugin-datatables/datatables/jquery.js"></script>
    <script src="<?= STATIC_URL ?>/static/cp/plugin-datatables/datatables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="<?= STATIC_URL ?>/static/cp/plugin-datatables/datatables/dataTables.bootstrap.js"></script>
    <script src="<?= STATIC_URL ?>/static/cp/plugin-datatables/datatables/bootstrap.min.js"></script>
    <script src="<?= STATIC_URL ?>/static/cp/plugin-datatables/date/bootstrap-datetimepicker.min.js"></script>
    <script src="<?= STATIC_URL ?>/static/cp/plugin-datatables/handlebars-v3.0.1.js"></script>

    <link href="<?= STATIC_URL ?>/static/cp/toastr/toastr.min.css" rel="stylesheet">
    <script src="<?= STATIC_URL ?>/static/cp/toastr/toastr.min.js"></script>
</head>
<div id="container">
    <!-- 定义一个表格元素 -->
    <table id="example" class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>序号</th>
            <th>电话</th>
            <th>奖项</th>
            <th>活动类型</th>
            <th>提交时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
        <tr>
            <th>序号</th>
            <th>电话</th>
            <th>奖项</th>
            <th>活动类型</th>
            <th>提交时间</th>
            <th>操作</th>
        </tr>
        </tfoot>
    </table>
</div>

<!--定义操作列按钮模板-->
<!--说下这里使用模板的作用，除了显示和数据分离好维护以外，绑定事件和传值也比较方便，希望大家能不拼接html则不拼接-->
<script id="tpl" type="text/x-handlebars-template">
{{#each func}}
<button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
{{/each}}
</script>
<script>
var table;
var editFlag = false;
$(function () {
    $('#start_date').datetimepicker();
    var tpl = $("#tpl").html();
    //预编译模板
    var template = Handlebars.compile(tpl);

    table = $('#example').DataTable({
        ajax: {
            url: "/cp/lotto-record/ajax?activityType=<?= $activityType ?>"
        },
        "order": [[0, 'desc']],// dt默认是第一列升序排列 这里第一列为序号列，所以设置为不排序，并把默认的排序列设置到后面
        "serverSide": true,
        "columns": [
            {
                "data": "id"
            },{
                "data": "mobile"
            },{
                "data": "lottery"
            },{
                "data": "activity_type"
            },{
                "data": "in_time"
            },{
                "data": "id"
            },
        ],
        "columnDefs": [
            {
                "searchable": false,
                "orderable": false,
                "targets": [0.-1]
            },
            {
                "targets": 4,
                "render": function (a, b, c, d) {
                    return timeStamp2String(a);
                }
            },
            {
                "targets": 5,
                "render": function (a, b, c, d) {
                    var context =
                    {
                        func: [
                            {"name": "删除", "fn": "del(\'" + c.id + "\')", "type": "danger"}
                        ]
                    };
                    var html = template(context);
                    return html;
                }
            }

        ],
        "language": {
            "lengthMenu": "每页_MENU_ 条记录",
            "zeroRecords": "没有找到记录",
            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
            "infoEmpty": "无记录",
            "search": "搜索：",
            "infoFiltered": "(从 _MAX_ 条记录过滤)",
            "paginate": {
                "previous": "上一页",
                "next": "下一页"
            }
        }

    });

});

/**
 * 删除数据
 * @param id
 */
function del(id) {
    $.ajax({
        url: "/cp/lotto-record/delete",
        data: {
            id: id
        },
        dataType: 'json',
        success: function (data) {
            if (data.code == 1) {
                table.ajax.reload();
            } else {
                toastr.error(data.message, "提示");
            }
        }
    });
}



function timeStamp2String(time) {
    var datetime = new Date();
    datetime.setTime(time);
    var year = datetime.getFullYear();
    var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
    var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
    var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
    var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
    return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}


</script>