{extend name="admin/layout" /}
{block name="title"}轮播图管理{/block}
{block name="main"}
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="row">
            <div class="col-sm-8">
                <a href="/admin/bannerAdd" 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>
const $table = $('#table');

function initTable() {
    $table.bootstrapTable({
        url: '/admin/bannerList',
        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: 'title', title: '标题', align: 'center'},
            {
                field: 'image',
                title: '图片',
                align: 'center',
                formatter: function (value) {
                    return value ? `<img src="${value}" style="max-height: 50px;">` : '无';
                }
            },
            {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: 'sort', title: '排序', align: 'center'},
            {
                field: 'state',
                title: '状态',
                align: 'center',
                formatter: function(value, row) {
                    const checked = value === 1 ? 'checked' : '';
                    return `<label class="switch"><input type="checkbox" ${checked} onchange="setState(${row.id}, this.checked)"><span></span></label>`;
                }
            },
            {field: 'create_time', title: '添加时间', align: 'center'},
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                formatter: function (value, row) {
                    return `
                        <a href="/admin/bannerEdit?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/bannerDel', {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 setState(id, checked) {
    $.post('/admin/bannerSetState', {
        id: id,
        state: checked ? 1 : 0
    }, function(res) {
        if (res.code === 200) {
            layer.msg(res.message, {icon: 1});
        } else {
            layer.msg(res.message, {icon: 2});
            $table.bootstrapTable('refresh');
        }
    });
}

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

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

<style>
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch span {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.switch span:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.switch input:checked + span {
    background-color: #2196F3;
}

.switch input:checked + span:before {
    transform: translateX(26px);
}

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