@{
    ViewBag.Title = "AccountList";
}

<div class="wrapper-content J_mainContent gray-bg-right">
    <div class="row">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <div class="row">
                    <div id="toolbar">
                        <div class="form-inline">
                            <a id="btnAdd" class="btn btn-primary add"><i></i>增加子账号<span></span></a>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <table id="table"
                           data-toggle="table"
                           data-toolbar="#toolbar"
                           data-show-refresh="false"
                           data-show-toggle="false"
                           data-show-columns="false"
                           data-url="@Url.Action("AccountList")"
                           data-pagination="true"
                           data-side-pagination="server"
                           data-total-field="Total"
                           data-data-field="Data"
                           data-page-number="1"
                           data-page-size="15"
                           data-sortable="true"
                           data-sort-class="table-active"
                           data-silent-sort="false"
                           data-method="post">
                        <thead>
                            <tr>
                                <th data-field="NAME" data-sortable="true">姓名</th>
                                <th data-field="TEL" data-sortable="true">电话</th>
                                <th data-field="MOBILE" data-sortable="true">手机</th>
                                <th data-field="EMAIL" data-sortable="true">邮箱</th>
                                <th data-field="STATUS" data-sortable="true">状态</th>
                                <th data-field="GID" data-formatter="operateFmt">操作</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--子账号管理增加-->
    <div class="modal fade bs-example-modal-lg" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editLabel">
        <div class="modal-dialog modal-lg" 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="editLabel">增加</h4>
                </div>
                <div class="modal-body" id="editModelBody">
                    <form class="form-horizontal" id="editForm">
                        <input type="hidden" name="gid" />
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i>*</i>姓名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="姓名" name="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="电话" name="tel">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i>*</i>手机</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="手机" name="mobile">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i>*</i>邮箱</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" placeholder="邮箱" name="email">
                            </div>
                        </div>
                        <div class="form-group" id="modelIptGroupPwd">
                            <label class="col-sm-2 control-label"><i>*</i>密码</label>
                            <div class="col-sm-8">
                                <input type="password" class="form-control" placeholder="密码" name="password">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-deter" id="btnModelSave">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
@section styles
{

    <link type="text/css" rel="stylesheet" href="~/Content/css/accountList.css" />
}

@section scripts
{
    <script src="~/Content/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="~/Content/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="~/Content/hplus/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="~/Content/js/jquery.form.js"></script>
    <script src="~/Content/js/validatorConfig.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#table').bootstrapTable();

            $("#btnAdd").click(function () {
                showAdd();
            });

            $("#editForm").validate({
                rules: {
                    name: "required",
                    mobile: {
                        required: true,
                        isMobile: true
                    },
                    email: "required",
                    password: "required"
                },
                messages: {
                    name: errIcon + "请输入姓名",
                    mobile: {
                        required: errIcon + "请输入手机号"
                    },
                    email: errIcon + "请输入邮箱",
                    password: errIcon + "请输入登录密码"
                }
            });


            $("#btnModelSave").click(function () {
                if ($('#editForm').valid()) {
                    $("#editForm").ajaxSubmit({
                        method:'POST',
                        url: '@Url.Action("AccountSave")',
                        success: function (data) {
                            layer.open({
                                title: '',
                                content: data.Message,
                                yes: function (index) {
                                    location.reload();
                                    layer.close(index);
                                }
                            });
                        }
                    });
                }
            });

        });

        function operateFmt(value, row, index) {
            return [
                '<a href="javascript:void(0);" onclick="showEdit(' + index + ')"><i class=\'fa fa-edit\'></i>编辑</a>'
            ].join('')
        }

        function showAdd() {
            $("#editLabel").html('增加子账号');
            $('#editModal').modal('show');
            $('#editModal input').val("");
            $('#modelIptGroupPwd').show();
        }

        function showEdit(idx) {
            $("#editLabel").html('编辑子账号');
            $('#editModal').modal('show');

            var data = $('#table').bootstrapTable('getData')[idx];
            $('#editModal input[name="gid"]').val(data.GID);
            $('#editModal input[name="name"]').val(data.NAME);
            $('#editModal input[name="mobile"]').val(data.MOBILE);
            $('#editModal input[name="tel"]').val(data.TEL);
            $('#editModal input[name="email"]').val(data.EMAIL);
            $('#editModal input[name="password"]').val(data.PASSWORD);
            //$('#modelIptGroupPwd').hide();
        }
    </script>
}