<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/resource"/>
    <title>代理管理 - Big Whale</title>
    <link href="../../../libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <link href="../../../css/common.css" rel="stylesheet"/>
</head>
<body ng-app="content-app" ng-controller="content-controller">
<div class="modal fade" id="editDlg" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">{{editItem.id ? "编辑" : "新增"}}</h4>
            </div>
            <form class="form-horizontal" ng-submit="onSaveItem()">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="modal_input_name" class="col-sm-4 control-label">
                            名称&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-5">
                            <input id="modal_input_name" class="form-control" ng-model="editItem.name" required autocomplete="off" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_description" class="col-sm-4 control-label">
                            描述
                        </label>
                        <div class="col-sm-5">
                            <textarea id="modal_input_description" class="form-control" ng-model="editItem.description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">
                            实例&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-5">
                            <div ng-repeat="tip in editItem.instances track by $index">
                                <input style="width: 95%; display: inline-block" type="text" class="form-control" ng-model="editItem.instances[$index]" placeholder="机器IP" required autocomplete="off"/><span style="width: 5%" class="glyphicon glyphicon-minus" ng-click="onRemoveTip(editItem.instances, $index)"></span>
                            </div>
                            <div ng-click="!editItem.instances ? editItem.instances = []: '';onAddTip(editItem.instances);">
                                <span style="padding-top: 7px;" class="glyphicon glyphicon-plus"></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_clusterId" class="col-sm-4 control-label">
                            集群
                        </label>
                        <div class="col-sm-5">
                            <select id="modal_select_clusterId" class="form-control selectpicker show-tick"
                                    ng-model="editItem.clusterId" ng-options="item.id as item.name for item in clusterList">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary" id="btn_submit">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container-fluid animated fadeInDown">
    <div class="bw-nav">
        <div class="row">
            <ol class="breadcrumb">
                <li>集群管理</li>
                <li class="active">代理管理</li>
            </ol>
            <a class="bw-refresh" onclick="location.reload()" title="刷新">
                <i class="fa fa-refresh" style="font-size: 18px"></i>
            </a>
        </div>
    </div>
    <div class="bw-body">
        <div class="row">
            <div class="col-md-12 ">
                <div class="col-md-12 search-form">
                    <form class="form-inline" ng-submit="options.mypage.toFirst()">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="名称" ng-model="options.query.name">
                        </div>
                        <div class="form-group">
                            <label for="query_select_clusterId">集群</label>
                            <select id="query_select_clusterId" class="selectpicker show-tick"
                                    ng-model="options.query.clusterId" ng-options="item.id as item.name for item in clusterList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">搜索</button>
                            <button type="button" class="btn btn-primary" ng-click="onNewItem()">新增</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>
                                    操作
                                </th>
                                <th>
                                    名称
                                </th>
                                <th>
                                    描述
                                </th>
                                <th>
                                    实例
                                </th>
                                <th>
                                    集群
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="item in options.items">
                                <td>
                                    <p class="operate">
                                            <span ng-click="onEditItem(item)">
                                                <i class="glyphicon glyphicon-pencil" aria-hidden="true" title="编辑"></i>
                                            </span><br/>
                                        <span class="remove" id="{{item.id}}_removeBtn" ng-click="onRemoveItem(item)">
                                                <i class="glyphicon glyphicon-trash" aria-hidden="true" title="删除"></i>
                                            </span>
                                    </p>
                                </td>
                                <td>
                                    {{item.name}}
                                </td>
                                <td>
                                    {{item.description}}
                                </td>
                                <td>
                                    <ul style="padding-left: 0; margin-bottom: 0; list-style: none">
                                        <li ng-repeat="instance in item.instances">
                                            <label class="label label-info">{{instance}}</label >
                                        </li>
                                    </ul>
                                </td>
                                <td>
                                    {{clusterMap[item.clusterId].name}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <mypage ng-model="options"></mypage>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script src="../../../libs/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../../../libs/bootstrap-select/i18n/defaults-zh_CN.js" type="text/javascript"></script>
<script src="../../../libs/angular-1.3.9/angular.min.js" type="text/javascript"></script>
<script src="../../../libs/angular-1.3.9/myangular.js" type="text/javascript"></script>
<script src="../../../js/common.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = angular.module('content-app', []);
    registerHttpInterceptor(app);
    registerPage(app);

    app.controller('content-controller', function ($scope, $http) {
        getCluster($scope, $http);

        $scope.onNewItem = function () {
            $scope.editItem = {status: 1};
            $('#editDlg').modal();
        };

        $scope.onEditItem = function(item) {
            $scope.editItem = angular.copy(item);
            $('#editDlg').modal();
        };

        //添加实例
        $scope.onAddTip = function(tips) {
            if (!tips) {
                tips = [];
            }
            tips.push('');
        };

        //移除实例
        $scope.onRemoveTip = function(tips, index) {
            if (!tips) {
                return;
            }
            tips.splice(index,1);
        };

        $('#editDlg').on('shown.bs.modal', function () {
            $('.selectpicker').selectpicker('refresh');
        });

        $scope.onSaveItem = function() {
            $('#btn_submit').attr('disabled', 'true');
            $http.post('./save.api', $scope.editItem)
                .success(function(data) {
                    $('#btn_submit').removeAttr('disabled');
                    $('#editDlg').modal('hide');
                    $scope.reload();
                    swal({
                        title: '保存成功',
                        type: 'success',
                        showConfirmButton: false,
                        timer: 1500
                    });
                })
                .error(function (data) {
                    $('#btn_submit').removeAttr('disabled');
                    $('#editDlg').modal('hide');
                });
        };

        $scope.onRemoveItem = function(item) {
            removeItem('./delete.api', item, $http, $scope.reload);
        };

        // 获取数据列表
        $scope.options = {
            query: {},
            listUrl: './getpage.api'
        };

        // 刷新
        $scope.reload = function () {
            $scope.options.mypage.reload();
        };

    });
</script>
</body>
</html>