{extend name="admin/layout" /}
{block name="title"}项目管理{/block}
{block name="main"}
<style>
    .type-logo {
        width: 50px;
        margin-top: -2px;
        padding-right: 10px;
        border-radius: 50%;
    }
</style>
<div class="row">
    <div class="col-xs-12 center-block" style="float: none;">
        <div class="panel panel-default panel-intro">
            <div class="panel-body">

                <form onsubmit="return searchSubmit()" method="GET" class="form-inline" id="searchToolbar">
                    <div class="form-group">
                        <label>搜索</label>
                        <input type="text" class="form-control" name="kw" placeholder="标题">
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> 搜索</button>
                    <a href="javascript:searchClear()" class="btn btn-default" title=""><i class="fa fa-refresh"></i> 刷新</a>
                    <a href="/admin/projectAdd" class="btn btn-success"><i class="fa fa-plus"></i> 添加</a>
                </form>

                <table id="listTable">
                </table>
            </div>
        </div>
    </div>
</div>

{/block}
{block name="script"}
<script src="https://s4.zstatic.net/ajax/libs/layer/3.1.1/layer.js"></script>
<script src="https://s4.zstatic.net/ajax/libs/bootstrap-table/1.21.4/bootstrap-table.min.js"></script>
<script src="https://s4.zstatic.net/ajax/libs/bootstrap-table/1.21.4/extensions/page-jump-to/bootstrap-table-page-jump-to.min.js"></script>
<script src="/static/js/custom.js"></script>
<script>
    $(document).ready(function() {
        updateToolbar();
        const defaultPageSize = 15;
        const pageNumber = typeof window.$_GET['pageNumber'] != 'undefined' ? parseInt(window.$_GET['pageNumber']) : 1;
        const pageSize = typeof window.$_GET['pageSize'] != 'undefined' ? parseInt(window.$_GET['pageSize']) : defaultPageSize;

        $("#listTable").bootstrapTable({
            url: '/admin/projectList',
            pageNumber: pageNumber,
            pageSize: pageSize,
            classes: 'table table-striped table-hover table-bordered',
            columns: [
                {
                    field: 'pid',
                    title: 'PID'
                },
                {
                    field: 'name',
                    title: '标题',
                    formatter: function(value, row, index) {
                        return '<img src="'+ row.logo +'" class="type-logo"></img>'+value;
                    }
                },
                {
                    field: 'type',
                    title: '项目类型',
                    align: 'center',
                    formatter: function(value) {
                        if (value === 1) {
                            return '<span class="label label-primary">默认类型</span>';
                        } else if (value === 2) {
                            return '<span class="label label-success">电玩类型</span>';
                        }
                        return '<span class="label label-default">未知</span>';
                    }
                },
                {
                    field: 'categories_name',
                    title: '归属分类',
                    formatter: function(value, row, index) {
                        return '<span class="label label-success">'+ row.categories_name + '</span>';
                    }
                },
                {
                    field: 'link',
                    title: '跳转地址',
                    formatter: function(value, row, index) {
                        return '<a href="'+ row.link +'">'+ row.link + '</a>';
                    }
                },
                {
                    field: 'popup',
                    title: '弹窗状态',
                    align: 'center',
                    formatter: function(value) {
                        if (value === 1) {
                            return '<span class="label label-warning">弹窗</span>';
                        } else {
                            return '<span class="label label-default">不弹窗</span>';
                        }
                    }
                },
                {
                    field: 'state',
                    title: '状态',
                    formatter: function(value, row, index) {
                        if(value === 1){
                            return '<div class="material-switch"><input id="active'+row.pid+'" type="checkbox" checked onchange="setActive('+row.pid+',0)"/><label for="active'+row.pid+'" class="label-primary"></label></div>';
                        }else{
                            return '<div class="material-switch"><input id="active'+row.pid+'" type="checkbox" onchange="setActive('+row.pid+',1)"/><label for="active'+row.pid+'" class="label-primary"></label></div>';
                        }
                    }
                },
                {
                    field: 'create_time',
                    title: '添加时间'
                },
				{
                    field: 'sort',
                    title: '排序'
                },
                {
                    field: '',

                    title: '操作',
                    formatter: function (value, row, index) {
                        var html = '<a href="/admin/projectEdit?id='+ row.pid + '" class="btn btn-info btn-xs">编辑</a> <a href="javascript:delItem(' + row.pid + ')" class="btn btn-danger btn-xs">删除</a>';
                        return html;
                    }
                },
            ],
        })
    })

    function delItem(id){
        layer.confirm('确定要删除此项目吗？', {
            btn: ['确定','取消']
        }, function(){
            $.post('/admin/projectDel', {id: id}, function(data){
                if(data.code === 200) {
                    layer.msg('删除成功', {icon: 1, time:800});
                    $('#listTable').bootstrapTable('refresh');
                } else {
                    layer.msg(data.message, {icon: 2});
                }
            }, 'json');
        });
    }


    function setActive(id, active){
        $.post('/admin/projectSetState', {id: id, active: active}, function(data){
            if(data.code === 200) {
                layer.msg('修改成功', {icon: 1, time:800});
                $('#listTable').bootstrapTable('refresh');
            } else {
                layer.msg(data.message, {icon: 2});
            }
        }, 'json');
    }

</script>
{/block}