{% extends "base.html" %}

{% block css %}
    <style>
        /* 批量导入按钮 */
        #batch {
            border-color: #1dc5a3;
            background-color: #1dc5a3;
            border-radius: 2px;
            border: none;
            color: white;
            padding: 7px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }

        #batch:hover {
            color: red;
        }

        /* 搜索按钮*/
        #search {
            display: inline;
            margin-left: 10%;
        }

        #search input {
            border: 2px solid #20B2AA;
            border-radius: 20px;
            background: transparent;
            top: 0;
            right: 0;
        }

        #search-btn {
            border-color: #1dc5a3;
            background-color: #1dc5a3;
            border-radius: 2px;
            border: none;
            color: white;
            padding: 7px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }

        #search-btn:hover {
            color: red;
        }

        a:hover {
            color: red;
        }

        #cen {
            text-align: center;
        }

        /*返回顶部样式*/
        #myBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: #999c9e;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
        }

        #myBtn:hover {
            background-color: #555;
        }

        #if_name {
            max-width: 200px;
            word-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        #if_name:hover {
            white-space: normal;
            overflow: auto;
        }

        .btn-primary:hover {
            color: red;
        }
    </style>


{% endblock %}
{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">主页</a>
                </li>
                <li class="active">
                    <a class="this">基础信息</a>
                </li>
                <li class="active">
                    <a class="this-page">接口管理</a>
                </li>
            </ol>

        </div>
    </div>
{% endblock %}

{% block body %}
    <div id="toolbar1">
        <a href="{% url 'interface_add' %}" class="btn btn-primary"><i
                class="fa fa-plus-circle"></i>&nbsp;添加接口</a>
    </div>
    <table id="tb_departments" data-toggle="table">

    </table>


{% endblock %}

{% block javascript %}
    <script>


        $('#tb_departments').bootstrapTable({
            paginationLoop: false,
            url: '/base/interface/',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar1',                //工具按钮用哪个容器
            toolbarAlign: "left",
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            {#queryParams: oTableInit.queryParams,//传递参数（*）#}
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            showSearchButton: true,
            {#showSearchClearButton: true,#}
            {#searchAlign:'left',#}
            {#strictSearch: true,#}
            {#showColumns: true,                  //是否显示所有的列#}
            {#showRefresh: true,                  //是否显示刷新按钮#}
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            {#height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度#}
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            {#showToggle: true,                    //是否显示详细视图和列表视图的切换按钮#}
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [
                {
                    field: 'id',
                    title: '#',
                    formatter: function (value, row, index) {
                        return index + 1 + row.offset;
                    }
                }, {
                    field: 'ins_name',
                    title: '接口名称',
                    formatter: function (value, row, index) {
                        return '<a href="/base/interface_update?if_id=' + row.id + '">' + value + '</a>';
                    }
                }, {
                    field: 'project_name',
                    title: '所属项目'
                }, {
                    field: 'method',
                    title: '请求方式'
                }, {
                    field: 'description',
                    title: '描述'
                }, {
                    field: 'update_time',
                    title: '更新时间'
                }, {
                    field: 'update_user',
                    title: '更新用户'
                }, {
                    field: '——',
                    title: '操作',
                    width: 66,
                    align:'center',
                    formatter: function (value, row, index) {
                        return '<a href="#" name="/base/interface_delete?if_id='+row.id+'" class= "layui-btn layui-btn-danger layui-btn-xs" lay - event = "del" onclick = "delete_btn(this)" > ' +
                        '<img src = "/static/admin/img/icon-deletelink.svg" /> </a>';
                    }
                },],
            formatSearch: function () {
                return '搜一搜，啥都有'
            },

        });



        function delete_btn(ele) {
            if (!window.confirm("你确定要删除吗？")) {

                return;
            }
            console.log($(ele).attr('name'));
            $.ajax(
                {
                    url: $(ele).attr('name'),
                    type: 'GET',
                    success: function (data) {
                        console.log(data);
                        var data = JSON.parse(data);
                        console.log(data);
                        if (data.code == 0) {
                            alert('删除成功！');
                            $(ele).parents('tr').remove();
                        } else {
                            alert(data.message);
                            return
                        }
                    },
                    error: function () {
                        alert('删除失败，请联系管理员！')
                    }
                }
            )

        }



    </script>
{% endblock %}