<!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_username" class="col-sm-4 control-label">
                            用户名&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-5">
                            <input id="modal_input_username"  class="form-control" ng-show="!editItem.id" ng-model="editItem.username" autocomplete="off" required />
                            <input class="form-control" title="{{editItem.username}}" ng-show="editItem.id"  ng-model="editItem.username" autocomplete="off" required readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_nickname" class="col-sm-4 control-label">
                            昵称
                        </label>
                        <div class="col-sm-5">
                            <input id="modal_input_nickname" class="form-control" ng-model="editItem.nickname" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_email" class="col-sm-4 control-label">
                            邮箱
                        </label>
                        <div class="col-sm-5">
                            <input id="modal_input_email" class="form-control" type="email" ng-model="editItem.email" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_phone" class="col-sm-4 control-label">
                            电话
                        </label>
                        <div class="col-sm-5">
                            <input id="modal_input_phone" class="form-control" ng-model="editItem.phone" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_password" class="col-sm-4 control-label">
                            密码&nbsp;<B>*</B>
                        </label>
                        <div class="col-sm-5">
                            <input id="modal_input_password" class="form-control" type="password" ng-model="editItem.password" required autocomplete="off"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-4 col-sm-4">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="editItem.enabled"/> 启用
                                </label>
                                &nbsp;
                                <label>
                                    <input type="checkbox" ng-model="editItem.root"/> 超级管理员
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_select_role" class="col-sm-4 control-label">角色</label>
                        <div class="col-sm-5">
                            <select id="modal_select_role" class="form-control selectpicker show-tick" data-actions-box="true" data-select-all-text="全选" data-deselect-all-text="反选"
                                    ng-model="editItem.roles" ng-options="item.value as item.name for item in roles" title="请选择" multiple>
                            </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="query.searchText">
                        </div>
                        <div class="item-inl form-group">
                            <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>
                                    <th>
                                        角色
                                    </th>
                                    <th>
                                        是否启用
                                    </th>
                                    <th>
                                        创建时间
                                    </th>
                                    <th>
                                        修改时间
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in items" ng-show="item.username.indexOf(query.searchText) >= 0 || item.nickname.indexOf(query.searchText) >= 0">
                                    <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.username}}
                                    </td>
                                    <td>
                                        {{item.nickname}}
                                    </td>
                                    <td>
                                        {{item.email}}
                                    </td>
                                    <td>
                                        {{item.phone}}
                                    </td>
                                    <td>
                                        {{item.roleNames}}
                                    </td>
                                    <td>
                                        <label ng-if="item.enabled" class="label label-success">启用</label>
                                        <label ng-if="!item.enabled" class="label label-danger">禁用</label>
                                    </td>
                                    <td>
                                        {{item.createTime}}
                                    </td>
                                    <td>
                                        {{item.updateTime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </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);
    app.controller('content-controller', function ($scope, $http, $timeout) {
        $scope.query = {searchText: ''};
        $scope.items = [];
        $scope.permissions = [];
        $scope.roles = [];
        $scope.roleMap = {};

        $scope.onNewItem = function () {
            $scope.editItem = {
                root: false,
                enabled: true,
                level: 0
            };
            $('#editDlg').modal();
        };

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

        $('#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.reload = function () {
            $http.get('../role/list.api')
                .success(function (roles) {
                    $scope.roles = [];
                    roles.forEach(function (role) {
                        $scope.roles.push(
                            {
                                value: role.code,
                                name: role.name
                            }
                        );
                        $scope.roleMap[role.code] = role.name;
                    });
                    $http.get('./list.api')
                        .success(function (data) {
                            $scope.items = data;
                            $scope.items.forEach(function (item) {
                                if (item.root) {
                                    item.roleNames = '超级管理员';
                                } else {
                                    var ret = '';
                                    for (var i in item.roles) {
                                        if (ret !== '') {
                                            ret += ',';
                                        }
                                        ret += $scope.roleMap[item.roles[i]];
                                    }
                                    if (ret) {
                                        item.roleNames = ret;
                                    } else {
                                        item.roleNames = '平台用户';
                                    }
                                }
                            });
                        });
                    $timeout(function () {
                        $('.selectpicker').selectpicker('refresh');
                    }, 50);
                });
        };

        $scope.reload();
    });
</script>
</body>
</html>