<div id="car-search-panel" class="easyui-panel" title="搜索条件" data-options="closable:false,collapsible:false,minimizable:false,maximizable:false" style="padding:10px;">
    <form id="carSearchFrm" method="post">
        <table cellpadding="5">
            <tr>
                <td>初登日期:</td>
                <td>
                    从
                    <input class="easyui-datebox" type="text" name="register_begin" style="width: 100%;" value="" />
                    至
                    <input class="easyui-datebox" type="text" name="register_end" style="width: 100%;" value="" />
                </td>
                <td>保险日期:</td>
                <td>
                    从
                    <input class="easyui-datebox" type="text" name="resurer_begin" style="width: 100%;" value="" />
                    至
                    <input class="easyui-datebox" type="text" name="resurer_end" style="width: 100%;" value="" />
                </td>
                <td>车主:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="car_man" style="width: 100px;" value="" />
                </td>
            </tr>
        </table>
        <table cellpadding="5">
            <tr>
                <td>车牌:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="car_no" style="width: 100px;" value="" />
                </td>
                <td>发动机号:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="engine_no" style="width: 100px;" value="" />
                </td>
                <td>车架号:</td>
                <td>
                    <input class="easyui-textbox" type="text" name="car_frame_no" style="width: 100px;" value="" />
                </td>
                <td>
                    <a id="car-search-btn" href="javascript:" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
                </td>
            </tr>
        </table>
    </form>
</div>
<table id="car-grid" ></table>
<script>
    function carEdit(id,title) {
        $('<div></div>').dialog({
            id:'car-dlg',
            title: title,
            width: 800,
            height: 320,
            closed: false,
            cache: false,
            href: '/car/edit?id=' + id,
            modal: true,
            onClose : function() {
                $(this).dialog('destroy');
            },
            buttons:[{
                text:'保存',
                handler:function(){
                    var params = $('#carFrm').serialize();
                    $.post('/car/save',params,function(obj){
                        if(obj.success) {
                            $.messager.alert('成功',obj.msg,'info',function(){
                                $("#car-dlg").dialog('destroy');
                                $('#car-grid').datagrid('reload');
                            });
                        } else {
                            $.messager.alert('警告',obj.msg,'warning');
                        }
                    },'json');
                }
            },{
                text:'取消',
                handler:function(){
                    $("#car-dlg").dialog('destroy');
                }
            }]
        });
    }

    function carAppointment(id) {
        $('<div></div>').dialog({
            id:'car-appointment-dlg',
            title: '预约记录',
            width: 700,
            height: 500,
            closed: false,
            cache: false,
            href: '/car/appointment?car_id=' + id,
            modal: true,
            onClose : function() {
                $(this).dialog('destroy');
            }
        });
    }

    function carInsurer(id) {
        $('<div></div>').dialog({
            id:'car-insurer-dlg',
            title: '保险记录',
            width: 800,
            height: 320,
            closed: false,
            cache: false,
            href: '/car/insurer?car_id=' + id,
            modal: true,
            onClose : function() {
                $(this).dialog('destroy');
            }
        });
    }

    function carDelete(id) {
        $.messager.confirm('确认', '是否删除选择项？', function(r){
            if (r){
                var csrf = '<?=Yii::$app->request->csrfToken ?>';
                $.post('/car/delete',{id:id,_csrf:csrf},function(obj){
                    if(obj.success) {
                        $.messager.alert('成功',obj.msg,'info',function(){
                            $("#car-dlg").dialog('destroy');
                            $('#car-grid').datagrid('uncheckAll');
                            $('#car-grid').datagrid('reload');
                        });
                    } else {
                        $.messager.alert('警告',obj.msg,'warning');
                    }
                },'json');
            }
        });
    }

    $(function(){
        //表格列表
        $('#car-grid').datagrid({
            url: '/car/json-data',
            method:'GET',
            idField: 'id',
            pagination: true,
            singleSelect: false,
            pageSize: 20,
            pageList: [20,30,50],
            fitColumns: true,
            striped: true,
            toolbar: [{
                iconCls: 'icon-add',
                text:'添加',
                handler: function() {
                    carEdit(0,'添加车辆信息');
                }
            },{
                iconCls: 'icon-cancel',
                text:'批量删除',
                handler: function() {
                    $.messager.confirm('确认', '是否删除选择项？', function(r){
                        if (r){
                            var csrf = '<?=Yii::$app->request->csrfToken ?>';
                            var items = $('#car-grid').datagrid('getChecked');
                            var len = items.length;
                            if(len == 0) {
                                $.messager.alert('警告','请先选择记录','warning');
                            } else {
                                var params = [];
                                for(var i=0; i < len; i++) {
                                    params.push(items[i].id);
                                }
                                $.post('/car/delete-all',{ids:params,_csrf:csrf},function(obj){
                                    if(obj.success) {
                                        $('#car-grid').datagrid('uncheckAll');
                                        $('#car-grid').datagrid('reload');
                                    } else {
                                        $.messager.alert('警告',obj.msg,'warning');
                                    }
                                },'json');
                            }
                        }
                    });
                }
            },{
                iconCls: 'icon-reload',
                text:'刷新',
                handler: function() {
                    $('#car-grid').datagrid('reload');
                }
            }],
            columns: [[
                { title: 'ID', field: 'id',checkbox:true},
                { field: 'car_no', title: '车牌号',width:120,sortable:true },
                { field: 'car_man', title: '车主',width:300,sortable:true },
                { field: 'phone', title: '联系电话',width:110 },
                { field: 'engine_no', title: '发动机号',width:110 },
                { field: 'car_frame_no', title: '车架号',width:200 },
                { field: 'register_date', title: '初登日期',width:100,sortable:true },
                { field: 'seats', title: '座位数',align:'center' },
                { field: 'created_at', title: '操作', formatter: function(value,row,index){
                    return '[<a href="#" onclick="carEdit('+row.id+',\'修改车辆信息\');">编辑</a>] '+
                        '[<a href="#" onclick="carAppointment('+row.id+');">预约记录</a>]' +
                        '[<a href="#" onclick="carInsurer('+row.id+');">保险记录</a>]' +
                        '[<a href="#" onclick="carDelete('+row.id+');">删除</a>]';
                }}
            ]]
        });
        $('#car-search-btn').click(function(){
            $('#car-grid').datagrid('uncheckAll');
            var data = $('#carSearchFrm').serializeArray();
            var params = {
                register_begin: data[0].value,
                register_end: data[1].value,
                resurer_begin: data[2].value,
                resurer_end: data[3].value,
                car_man: data[4].value,
                car_no: data[5].value,
                engine_no: data[6].value,
                car_frame_no: data[7].value
            };
            $('#car-grid').datagrid('load',params);
        });
    });
</script>