{{template "header"}}
<link href="/static/libs/page/jquery.sPage.css" rel="stylesheet"/>
<style>
    .card-box {
        padding: 0px;
    }

    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0rem;
    }

    #tableList .td {
        vertical-align: middle;
    }

    thead {
        background: #f5f5f5;
    }

    .project {
        font-weight: bold;
        padding-left: 5px;
    }

    .fa-trash-o {
        margin-right: 5px;
    }

    .info {
        color: #039cfd;
        cursor: pointer;
        font-weight: bold;
    }

    .label {
        line-height: 11px;
    }

    .lb_ssh {
        background-color: #953fb9;
    }

    .lb_redis {
        background-color: #e44242;
    }

    .lb_mysql {
        background-color: #cabd23;
    }

    .lb_ftp {
        background-color: #32cc16;
    }

    .lb_telnet {
        background-color: #6b79c1;
    }

    .lb_deep {
        background-color: #000000;
    }

    .lb_mem_cache {
        background-color: #3d9671;
    }

    .pre {
        background: #2c2c31;
        color: #4fe21b;
        padding: 10px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .modal-body {
        position: relative;
        padding: 0px;
        margin-bottom: -14px;
    }

    .modal-content {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .modal-header {
        padding: 10px;
        border-bottom: 1px solid #e5e5e5;
    }

    .modal-header .close {
        margin-top: 0px;
    }

    .sos {
        margin-bottom: 10px;
        height: 100px;
    }

    .agent_name {
        border: 1px solid #079dfd;
        padding: 2px 5px;
        border-radius: 5px;
        color: #079dfd;
        font-size: 12px;
    }

    .ipinfo {
        border: 1px solid #434e56;
        padding: 2px 5px;
        border-radius: 5px;
        color: #434e56;
        font-size: 12px;
    }

    .cinfo {
        border: 1px solid #1eaec1;
        padding: 2px 5px;
        border-radius: 5px;
        color: #1eaec1;
        font-size: 12px;
    }

    #myPage {
        text-align: center;
        margin-bottom: 20px;
    }

    .checkbox {
        padding-left: 20px;
        margin-bottom: -2px;
    }
</style>
<div class="row">
    <div class="col-sm-12">
    {{/*<div class="btn-group pull-right m-t-15">*/}}
    {{/*<a type="button" class="btn btn-custom" href="#">导出 <span class="m-l-5"><i*/}}
    {{/*class="zmdi zmdi-alarm-plus"></i></span>*/}}
    {{/*</a>*/}}
    {{/*</div>*/}}
        <h4 class="page-title">上钩列表</h4>
    </div>

    <div class="sos">
        <div class="col-sm-2">
            <select class="form-control" id="selectType" style="height: 34px;" onchange="so()"></select>
        </div>
        <div class="col-sm-2">
            <select class="form-control" id="selectColony" style="height: 34px;" onchange="so()"></select>
        </div>
        <div class="col-sm-2">
        </div>
        <div class="col-sm-2">
        </div>
        <div class="col-sm-4">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa  fa-search"></i></span>
                <input type="text" class="form-control" id="so_text"
                       placeholder="请输入搜索内容" oninput="so()">
            </div>
        </div>
    </div>


    <div class="col-sm-12">
        <div class="card-box table-responsive">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th width="1%">
                        <div class="checkbox checkbox-single checkbox-danger">
                            <input type="checkbox" value="all" id="check_all">
                            <label></label>
                        </div>
                    </th>
                    <th width="11%">项目</th>
                    <th width="8%">集群名称</th>
                    <th width="8%">来源 IP</th>
                    <th width="8%">地理信息</th>
                    <th width="5%">信息</th>
                    <th width="5%">长度</th>
                    <th width="8%">上钩时间</th>
                </tr>
                </thead>
                <tbody id="tableList"></tbody>
            </table>
        </div>
        <button type="button" id="delbtn" class="btn btn-danger waves-effect waves-light btn-sm"
                style="float: left;margin-top: 5px;" onclick="del()" disabled><i class="fa fa-trash-o"></i>删除
        </button>
        <div id="myPage"></div>
    </div>
</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h6 class="modal-title" id="myModalLabel">上钩信息</h6>
            </div>
            <div class="modal-body">
                <pre class="pre"></pre>
            </div>
        </div>
    </div>
</div>

{{template "footer" }}
<script src="/static/libs/page/jquery.sPage.js"></script>
<script>
    function show(id) {
        $.ajax({
            type: "GET",
            url: "/get/fish/info",
            dataType: "json",
            data: {
                "id": id
            },
            success: function (e) {
                if (e.code == 200) {
                    var data = e.data;
                    var str = data[0].info.replace(/&&/g, "<br>");
                    console.log(str);
                    $(".pre").html(str);
                } else {
                }
            },
            error: function (e) {
            }
        });

        $('#myModal').modal('show')
    }

    function del() {
        var val = "";
        $('input[name^="check_"]').each(function () {
            if (this.checked) {
                val += $(this).val() + ',';
            }
        });
        val = val.substring(0, val.length - 1);

        $.ajax({
            type: "POST",
            url: "/post/fish/del",
            dataType: "json",
            data: {
                "id": val
            },
            success: function (e) {
                if (e.code == 200) {
                    window.location.href = "/fish";
                } else {
                    swal("删除失败", e.msg, 'error');
                }
            },
            error: function (e) {
                swal("删除失败", "请 Github 提交 Issues", 'error');
            }
        });
    }

    function init_type() {
        $.ajax({
            type: "GET",
            url: "/get/fish/typeList",
            dataType: "json",
            success: function (e) {
                var data = e.resultInfoType;
                var _h = '<option value="all">请选择类型</option>';

                for (var i = 0; i < data.length; i++) {
                    _h += '<option value="' + data[i].type + '">' + data[i].type + '</option>';
                }

                $("#selectType").html(_h);

                var data1 = e.resultColonyName;
                var _h1 = '<option value="all">请选择集群</option>';
                _h1 += '<option value="本机">本机</option>';

                for (var i = 0; i < data1.length; i++) {
                    _h1 += '<option value="' + data1[i].agent_name + '">' + data1[i].agent_name + '</option>';
                }
                $("#selectColony").html(_h1);
            },
            error: function (e) {
            }
        });
    }

    $("#check_all").click(function () {
        var status = 0;

        $('input[name="check_x"]').each(function () {
            if ($("#check_all").prop('checked') == true) {
                status++;
                this.checked = true;
            } else {
                this.checked = false;
            }
        });

        if (status > 0) {
            $("#delbtn").attr("disabled", false);
        } else {
            $("#delbtn").attr("disabled", true);
        }
    });

    function changedel() {
        var status = 0;
        $('input[name="check_x"]').each(function () {
            if (this.checked == true) {
                status++;
            } else {
            }
        });

        if (status > 0) {
            $("#delbtn").attr("disabled", false);
        } else {
            $("#delbtn").attr("disabled", true);
        }
    }

    function init(page, type, colony, so_text) {
        $.ajax({
            type: "GET",
            url: "/get/fish/list",
            dataType: "json",
            data: {
                "page": page,
                "pageSize": 10,
                "type": type,
                "colony": colony,
                "so_text": so_text
            },
            success: function (e) {
                var data = e.data;
                var _h = '';

                for (var i = 0; i < data.length; i++) {
                    _h += '<tr>';
                    _h += '    <td class="td"><div class="checkbox checkbox-single checkbox-danger"><input type="checkbox"  value="' + data[i].id + '" name="check_x" onchange="changedel()"><label></label></div></td>'
                    _h += '    <td class="td">';
                    if (data[i].type == "WEB") {
                        _h += '       <span class="label label-primary">WEB</span> ';
                    } else if (data[i].type == "SSH") {
                        _h += '       <span class="label lb_ssh">SSH</span> ';
                    } else if (data[i].type == "REDIS") {
                        _h += '       <span class="label lb_redis">REDIS</span> ';
                    } else if (data[i].type == "MYSQL") {
                        _h += '       <span class="label lb_mysql">MYSQL</span> ';
                    } else if (data[i].type == "FTP") {
                        _h += '       <span class="label lb_ftp">FTP</span> ';
                    } else if (data[i].type == "TELNET") {
                        _h += '       <span class="label lb_telnet">TELNET</span> ';
                    } else if (data[i].type == "DEEP") {
                        _h += '       <span class="label lb_deep">DEEP</span> ';
                    } else if (data[i].type == "MEMCACHE") {
                        _h += '       <span class="label lb_mem_cache">MEMCACHE</span> ';
                    }

                    _h += '       <span class="project">' + data[i].project_name + '</span>';
                    _h += '    </td>';
                    _h += '    <td class="td"><span class="agent_name">' + data[i].agent + '</span></td>';
                    _h += '    <td class="td" style="font-weight: bold;">' + data[i].ip + '</td>';

                    // country,region,city
                    if (data[i].country == "本机地址") {
                        _h += '    <td class="td"><span class="ipinfo">本机地址</span></td>';
                    } else if (data[i].country == "局域网") {
                        _h += '    <td class="td"><span class="ipinfo">局域网</span></td>';
                    }
                    else {
                        _h += '    <td class="td"><span class="ipinfo">' + data[i].country + ' ' + data[i].region + ' ' + data[i].city + '</span></td>';
                    }

                    _h += '    <td><span class="info" onclick="show(' + data[i].id + ')">点击查看</span></td>';
                    _h += '    <td class="td"><span class="cinfo">' + data[i].info.length + '</span></td>';
                    _h += '    <td class="td">' + data[i].create_time + '</td>';
                    _h += '</tr>';
                }

                if (_h == "") {
                    _h = '<tr style="text-align: center;"><td style="line-height: 200px;font-size: 20px;color: #a9a9a9;" colspan="5">暂无数据</td></tr>'
                }

                $("#tableList").html(_h);

                var pageCount = e.pageCount;
                var totalCount = e.totalCount;
                var page = e.page;


                $("#myPage").sPage({
                    page: page,
                    pageSize: 10,
                    total: totalCount,
                    totalTxt: "共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
                    noData: true,//没有数据时是否显示分页，默认false不显示，true显示第一页
                    showTotal: true,//是否显示总条数，默认关闭：false
                    showSkip: true,
                    showPN: true,
                    prevPage: "上一页",
                    nextPage: "下一页",
                    backFun: function (p) {
                        var selectType = $("#selectType").val();
                        var selectColony = $("#selectColony").val();
                        var so_text = $("#so_text").val();
                        init(p, selectType, selectColony, so_text);
                    }
                });
            },
            error: function (e) {
            }
        });
    }

    init(1, "all", "all", "");
    init_type();

    function so() {
        var selectType = $("#selectType").val();
        var selectColony = $("#selectColony").val();
        var so_text = $("#so_text").val();


        init(1, selectType, selectColony, so_text);
    }
</script>