{extend name="../../admin/view/main"}

{block name='content'}
<div class="think-box-shadow">
    <!-- 表单搜索 -->
    <form class="layui-form layui-form-pane form-search" action="">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">包名</label>
            <div class="layui-input-inline">
                <input name="package_name" placeholder="请输入包名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">应用名称</label>
            <div class="layui-input-inline">
                <input name="name" placeholder="请输入应用名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="">所有状态</option>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">创建人</label>
            <div class="layui-input-inline">
                <input name="username" placeholder="请输入创建人" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">添加时间</label>
            <div class="layui-input-inline">
                <input name="add_time" id="add_time" placeholder="请选择添加时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary" type="button" lay-submit lay-filter="search-btn">
                <i class="layui-icon">&#xe615;</i> 搜 索
            </button>
            <button class="layui-btn layui-btn-primary" type="reset" id="resetSearch">重置</button>
        </div>
    </form>

    <!-- 数据表格 -->
    <table id="currentTable" lay-filter="currentTable"></table>
</div>

<!-- 表单模板 -->
<script type="text/html" id="editForm">
    <form class="layui-form" lay-filter="editForm" style="padding: 30px;">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">应用名称</label>
            <div class="layui-input-block" style="margin-left: 130px;">
                <input type="text" name="name" lay-verify="required" placeholder="请输入应用名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">包名</label>
            <div class="layui-input-block" style="margin-left: 130px;">
                <input type="text" name="package_name" lay-verify="required" placeholder="请输入包名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">状态</label>
            <div class="layui-input-block" style="margin-left: 130px;">
                <input type="radio" name="status" value="1" title="启用" checked>
                <input type="radio" name="status" value="0" title="禁用">
            </div>
        </div>
        <div class="layui-form-item text-center" style="margin-top: 40px;">
            <input type="hidden" name="id">
            <button class="layui-btn layui-btn-lg" lay-submit lay-filter="formSubmit">保存</button>
            <button type="button" class="layui-btn layui-btn-lg layui-btn-danger" onclick="layer.closeAll()">取消</button>
        </div>
    </form>
</script>
{/block}

{block name='script'}
<!-- 表格操作列 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        {if auth("edit")}
        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
        {/if}
        {if auth("remove")}
        <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
        {/if}
    </div>
</script>

<script>
layui.use(['table', 'form', 'laydate'], function () {
    var table = layui.table;
    var form = layui.form;
    var laydate = layui.laydate;
    
    // 日期范围
    laydate.render({
        elem: '#add_time',
        type: 'date',
        range: true,
        trigger: 'click'
    });

    // 数据表格初始化
    table.render({
        elem: '#currentTable',
        url: '{:request()->url()}',
        method: 'post',
        defaultToolbar: ['filter', 'print', 'exports'],
        toolbar: ['<div class="layui-btn-container">',
            '{if auth("add")}',
            '<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe654;</i> 添加包名</button>',
            '{/if}',
            '</div>'
        ].join(''),
        cols: [[
            {type: "checkbox"},
            {field: 'id', width: 80, title: 'ID', sort: true},
            {field: 'name', minWidth: 150, title: '应用名称'},
            {field: 'package_name', minWidth: 200, title: '包名'},
            {field: 'username', width: 100, title: '创建人'},
            {field: 'status', width: 100, title: '状态', templet: function(d){
                return '<input type="checkbox" name="status" value="' + d.id + '" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" ' + (d.status == 1 ? 'checked' : '') + '>';
            }},
            {field: 'add_time', minWidth: 170, title: '添加时间', templet: function(d){
                return d.add_time ? layui.util.toDateString(d.add_time * 1000, 'yyyy-MM-dd HH:mm:ss') : '';
            }},
            {field: 'update_time', minWidth: 170, title: '更新时间', templet: function(d){
                return d.update_time ? layui.util.toDateString(d.update_time * 1000, 'yyyy-MM-dd HH:mm:ss') : '';
            }},
            {title: '操作', minWidth: 120, toolbar: '#toolbar', align: "center", fixed: 'right'}
        ]],
        page: true,
        limit: 15,
        limits: [10, 15, 20, 25, 50, 100]
    });

    // 搜索提交
    form.on('submit(search-btn)', function (data) {
        table.reload('currentTable', {
            page: {curr: 1},
            where: data.field,
            method: 'post'
        });
        return false;
    });

    // 重置搜索
    $('#resetSearch').click(function() {
        // 重置表单
        $('.form-search')[0].reset();
        // 重载表格
        table.reload('currentTable', {
            page: {curr: 1},
            where: {},
            method: 'post'
        });
    });

    // 监听表单提交
    form.on('submit(formSubmit)', function (data) {
        var url = data.field.id ? '{:url("edit")}' : '{:url("add")}';
        $.ajax({
            url: url,
            type: 'post',
            data: data.field,
            success: function(res) {
                if (res.code === 1) {
                    layer.closeAll();
                    layer.msg(res.info, {icon: 1, time: 1000});
                    table.reload('currentTable');
                } else {
                    layer.msg(res.info, {icon: 2, time: 2000});
                }
            },
            error: function() {
                layer.msg('网络错误，请稍后重试！', {icon: 2, time: 2000});
            }
        });
        return false;
    });

    // 监听工具条
    table.on('tool(currentTable)', function (obj) {
        var data = obj.data;
        if (obj.event === 'edit') {
            showForm('编辑包名', data);
        } else if (obj.event === 'delete') {
            layer.confirm('确定要删除该包名吗？', {
                title: '删除确认',
                btn: ['确定', '取消']
            }, function (index) {
                $.ajax({
                    url: '{:url("remove")}',
                    type: 'post',
                    data: {id: data.id},
                    success: function(res) {
                        if (res.code === 1) {
                            layer.msg(res.info, {icon: 1, time: 1000});
                            table.reload('currentTable');
                        } else {
                            layer.msg(res.info, {icon: 2, time: 2000});
                        }
                        layer.close(index);
                    },
                    error: function() {
                        layer.msg('网络错误，请稍后重试！', {icon: 2, time: 2000});
                        layer.close(index);
                    }
                });
            });
        }
    });

    // 监听头工具栏事件
    table.on('toolbar(currentTable)', function(obj){
        if(obj.event === 'add'){
            showForm('添加包名');
        }
    });

    // 显示表单
    function showForm(title, data) {
        layer.open({
            type: 1,
            title: title,
            area: ['800px', '500px'],
            offset: '50px',
            shadeClose: true,
            content: $('#editForm').html(),
            success: function(layero, index) {
                $(layero).find('.layui-form').css('margin', '15px');
                $(layero).find('.layui-input-block').css('max-width', '500px');
                
                form.render();
                if(data) {
                    form.val('editForm', data);
                }
            }
        });
    }

    // 监听状态切换
    form.on('switch(status)', function(obj){
        var id = this.value;
        var status = obj.elem.checked ? 1 : 0;
        
        layer.confirm('确定要' + (status == 1 ? '启用' : '禁用') + '该包名吗？', {
            title: '操作确认',
            btn: ['确定', '取消']
        }, function(index){
            $.ajax({
                url: '{:url("state")}',
                type: 'post',
                data: {
                    id: id,
                    status: status
                },
                success: function(res) {
                    if (res.code === 1) {
                        layer.msg(res.info, {icon: 1, time: 1000});
                        table.reload('currentTable');
                    } else {
                        layer.msg(res.info, {icon: 2, time: 2000});
                        // 状态切换失败，恢复开关状态
                        obj.elem.checked = !obj.elem.checked;
                        form.render('checkbox');
                    }
                    layer.close(index);
                },
                error: function() {
                    layer.msg('网络错误，请稍后重试！2', {icon: 2, time: 2000});
                    // 发生错误，恢复开关状态
                    obj.elem.checked = !obj.elem.checked;
                    form.render('checkbox');
                    layer.close(index);
                }
            });
        }, function(){
            // 取消操作，恢复开关状态
            obj.elem.checked = !obj.elem.checked;
            form.render('checkbox');
        });
    });
});
</script>
{/block}