{extend name="admin/layout" /}
{block name="title"}导航数据管理{/block}
{block name="main"}
<style>
    .url-link {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
</style>

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-sm-8">
                <a href="/admin/navDataAdd" 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://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://s4.zstatic.net/ajax/libs/layer/3.1.1/layer.js"></script>
<script>
    const $table = $('#table');

    function initTable() {
        $table.bootstrapTable({
            url: '/admin/navDataList',
            method: 'post',
            contentType: "application/x-www-form-urlencoded",
            pagination: true,
            sidePagination: "server",
            pageNumber: 1,
            pageSize: 10,
            search: false,
            sortable: false,
            queryParams: function(params) {
                return {
                    ...params,
                {if $nid}nid: '{$nid}',{/if}
                kw: $('#search-kw').val()
            }
            },
                columns: [
                    {field: 'id', title: 'ID', align: 'center', width: '60px'},
                    {
                        field: 'logo',
                        title: 'Logo',
                        align: 'center',
                        formatter: function (value) {
                            return value ? `<img src="${value}" style="max-height: 50px;">` : '无';
                        }
                    },
                    {field: 'name', title: '标题', align: 'center'},
                    {field: 'nav_name', title: '所属导航', align: 'center',
                        formatter: function(value, row, index) {
                            return '<span class="label label-success">'+ row.nav_name + '</span>';
                        }},
                    {
                        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/navDataEdit?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/navDataDel', {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}