{extend name="admin/layout" /}

{block name="main"}
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-sm-8">
                <a href="/admin/projectDataAdd" class="btn btn-success">添加数据</a>
            </div>
            <div class="col-sm-4">
                <div class="input-group">
                    <input type="text" id="search-kw" class="form-control" placeholder="请输入关键词...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button" onclick="searchData()">
                            <i class="fa fa-search"></i> 搜索
                        </button>
                        <button class="btn btn-default" type="button" onclick="resetSearch()">
                            <i class="fa fa-refresh"></i> 重置
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <table id="table" class="table table-hover"></table>
    </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>
const $table = $('#table');

function initTable() {
    $table.bootstrapTable({
        url: '/admin/projectDataList',
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        pagination: true,
        sidePagination: "server",
        pageNumber: 1,
        pageSize: 10,
        search: false,
        sortable: false,

        columns: [
            {field: 'id', title: 'ID', align: 'center', width: '60px'},
            {field: 'project_name', title: '所属项目', align: 'center'},
            {
                field: 'logo',
                title: 'Logo',
                align: 'center',
                formatter: function (value) {
                    return value ? `<img src="${value}" style="max-height: 50px;">` : '无';
                }
            },
            {field: 'name', title: '标题', align: 'center'},
            {field: 'url', title: '跳转链接', align: 'center', formatter: function(value) {
                if (!value) return '无';
                return `<a href="${value}" target="_blank" class="url-link" title="${value}">
                    <i class="fa fa-external-link"></i> ${value}
                </a>`;
            }},
            {field: 'create_time', title: '添加时间', align: 'center'},
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                formatter: function (value, row) {
                    return `
                        <a href="/admin/projectDataEdit?id=${row.id}" class="btn btn-info btn-xs">
                            <i class="fa fa-edit"></i> 编辑
                        </a>
                        <button class="btn btn-danger btn-xs" onclick="deleteItem(${row.id})">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                    `;
                }
            }
        ]
    });
}

function searchData() {
    $table.bootstrapTable('refresh', {
        query: {
            kw: $('#search-kw').val()
        }
    });
}

function deleteItem(id) {
    layer.confirm('确定要删除这条记录吗？', {
        btn: ['确定','取消']
    }, function(){
        $.get('/admin/projectDataDel', {id: id}, function (res) {
            if (res.code === 200) {
                layer.msg(res.message, {icon: 1});
                $table.bootstrapTable('refresh');
            } else {
                layer.msg(res.message, {icon: 2});
            }
        });
    });
}

function resetSearch() {
    $('#search-kw').val('');
    searchData();
}

$(function() {
    initTable();
});
</script>
{/block}