{extend name="admin/layout" /}
{block name="title"}客服管理{/block}

{block name="css"}
<link href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css" rel="stylesheet">
{/block}

{block name="main"}
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-sm-8">
                <a href="/admin/bottomAdd" 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/bottomList',
            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: '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/bottomEdit?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/bottomDel', {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>

<style>
.url-link {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
</style>
{/block}