<?php
/**
 * Created by PhpStorm.
 * User: chenkuan
 * Date: 2017/12/18
 * Time: 上午10:43
 */
use yii\helpers\Url;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <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>

    <!--<script type="text/javascript" src="/dt-page/extjs.js"></script>-->
</head>
<body>
<div class="container">
    <table id="example" class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>微信号 </th>
            <th>提交时间</th>
            <th>IP</th>
            <th>域名</th>
            <th>备注1</th>
            <th>备注2</th>
        </tr>
        </thead>
    </table>
</div>
<!-- Button trigger modal -->


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="name" placeholder="姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="position" placeholder="位置">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="salary" placeholder="薪资">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="start_date" placeholder="时间"
                           data-date-format="yyyy/mm/dd">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="office" placeholder="工作地点">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="extn" placeholder="编号">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="initData">添加模拟数据</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<!--定义操作列按钮模板-->
<!--说下这里使用模板的作用，除了显示和数据分离好维护以外，绑定事件和传值也比较方便，希望大家能不拼接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: "<?= Url::to(['/cp/index-activity/get-enroll-list-ajax'])?>"
            },
            "order": [[0, 'desc']],// dt默认是第一列升序排列 这里第一列为序号列，所以设置为不排序，并把默认的排序列设置到后面
            "serverSide": true,
            "columns": [
                {
                    "data": "id"
                },{
                    "data": "nickname"
                },{
                    "data": "mobile"
                },{
                    "data": "email"
                },{
                    "data": "weixin"
                },{
                    "data": "in_time"
                },{
                    "data": "ip"
                },{
                    "data": "domain"
                },{
                    "data": "remark1"
                },{
                    "data": "remark2"
                }
            ],
            "columnDefs": [
                {
                    "searchable": false,
                    "orderable": false,
                    "targets": [0.-1]
                },
                {
                    "targets": 5,
                    "render": function (a, b, c, d) {
                        return timeStamp2String(a);
                    }
                },
                {
                    "targets": 9,
                    "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": "下一页"
                }
            },
            buttons: [{
                extend: 'copy'
            },
                {
                    extend: 'csv'
                },
                {
                    extend: 'excel'
                },
                {
                    extend: 'pdf'
                }]

        });

        //添加序号
        //不管是排序，还是分页，还是搜索最后都会重画，这里监听draw事件即可
        table.on('draw.dt',function() {
            table.column(0, {
                search: 'applied',
                order: 'applied'
            }).nodes().each(function(cell, i) {
                //i 从0开始，所以这里先加1
                i = i+1;
                //服务器模式下获取分页信息
                var page = table.page.info();
                //当前第几页，从0开始
                var pageno = page.page;
                //每页数据
                var length = page.length;
                //行号等于 页数*每页数据长度+行号
                var columnIndex = (i+pageno*length);
            });
        }).draw();

    });

    /**
     * 删除数据
     * @param name
     */
    function del(enrollId) {
        $.ajax({
            url: "<?= Url::to(['/cp/index-activity/delete-enroll']) ?>",
            data: {
                "enrollId": enrollId
            }, success: function (data) {
                table.ajax.reload();
                console.log("删除成功");
            }
        });
    }

    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>
