<div class="current-location">
    <ul>
        <li class="left"><i class="glyphicon glyphicon-home"></i><a href="javascript:void(0)" onclick="location.href=location.href">登录用户管理</a></li>
        <li class="right"><a href="javascript:void(0)" onclick="LoadData()" title="刷新"><span class="glyphicon glyphicon-refresh"></span></a></li>
    </ul>
</div>
<div class="main">


    <ul class="navTabs">
        <li data-tab-params="tabName:'全部',tabValue:'',tabValueObjName:'#state'"></li>
        <li data-tab-params="tabName:'正常',tabValue:'1',tabValueObjName:'#state'"></li>
        <li data-tab-params="tabName:'失效',tabValue:'0',tabValueObjName:'#state'"></li>
    </ul>

    <table class="tb-head" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td class="btn-group btn-group-sm">
                <button type="button" class="btn btn-default ui-selectInvert">反选</button>
                <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        菜单<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="javascript:void(0)" class="ui-deleteMultiple" data-custom-params="url:'@Url.ActionUrl("Delete")',callBack:'LoadData'">删除</a></li>
                    </ul>
                </div>
            </td>
            <td align="right">
                <div class="form-group">
                    <div class="controls form-inline form-group-sm">
                        <input id="state" class="ui-queryString" type="hidden" value="" />
                        <select class="form-control ui-queryString ui-setName" style="width:120px;">
                            <option value="username">用户名</option>
                            <option value="ip">ip</option>
                            <option value="entryUrl">入口地址</option>
                            <option value="thedate" valuetype="date" searchtype="range">登录时间</option>
                            <option value="expireDate" valuetype="expireDate" searchtype="range">过期时间</option>
                        </select>

                        <input type="text" style="width:120px" placeholder="搜索关键词" class="form-control ui-keyword ui-queryString">
                        <button type="button" class="btn btn-default btn-sm ui-queryString-search">确定</button>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <table border=0 cellpadding=0 cellspacing=0 class="table table-bordered" id="tb_list">
        <thead>
            <tr>
                <td align="center" width="30px"><input type="checkbox" title="选择" class="ui-selectInvert" data-custom-params="isReverse:false"></td>
                <td align="center">用户名</td>
                <td align="center">会员组</td>
                <td align="center">部门</td>
                <td align="center">管理角色</td>
                <td align="center">状态</td>
                <td align="center">登录时间</td>
                <td align="center">过期时间</td>
                <td align="center">管理</td>
            </tr>
        </thead>
        <tr class="item list-template-item" id="item_{id}">
            <td align="center"> <input type="checkbox" value="{id}" class="checked-item"></td>
            <td align="center">
                <div class="dropdown dropdown-hover">
                    <a class="dropdown-toggle" data-toggle="dropdown">
                        <span>{username}</span>
                        <span class="caret"></span>
                    </a>
                    <div class="dropdown-menu item-detail" role="menu">
                        <table class="table" style="width:500px">
                            <tr>
                                <td>手机：{Mobile}</td>
                                <td>邮箱：{Email}</td>
                            </tr>
                            <tr>
                                <td>登录ip：{ip}</td>
                                <td>浏览器：{browser}</td>
                            </tr>
                            <tr>
                                <td colspan="2">入口地址：{entryUrl}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
            <td align="center"><span class="ui-convertTextById sp_member_type">{memberGroupId}</span></td>
            <td align="center"><span class="ui-convertTextById sp_department">{departmentId}</span></td>
            <td align="center"><span class="ui-convertTextById sp_role">{roleId}</span></td>
            <td align="center"><span class="sp_state is-{state}"></span></td>
            <td align="center">{thedate}</td>
            <td align="center">{expireDate}</td>
            <td align="center">
                <input type="hidden" name="id" value="{id}" />
                <button class="btn btn-default btn-sm ui-deleteSingle" data-custom-params="url:'@Url.ActionUrl("Delete")',callBack:'LoadData'">删除</button>
            </td>
        </tr>
    </table>
</div>
<input type="hidden" id="memberGroupList" value="@Html.GetMemberGroupListJson()" />
<input type="hidden" id="departmentList" value="@Html.GetDepartmentListJson()" />
<input type="hidden" id="roleList" value="@Html.GetRoleListJson()" />
<script type="text/javascript">
    //绑定数据

    $(".navTabs").children().InitTab(function () { LoadData() }); //初始化选项卡，并设置回调函数为LoadData()


    function LoadedInit() {
        $(".show-detail").click(function () {
            $(this).next().show();
            $(this).hide();
        });

        $(".hide-detail").click(function () {
            $(this).parent().hide().prev().show();
        });

        $(".sp_member_type").ConvertText({ dataSourceFrom: "" }, $("#memberGroupList").val());
        $(".sp_department").ConvertText({ dataSourceFrom: "" }, $("#departmentList").val());
        $(".sp_role").ConvertText({ dataSourceFrom: "" }, $("#roleList").val());
        $(".dropdown-hover").DropdownHover();
    }


    function LoadData() {
        var url = "@Url.ActionUrl("PageListData")";
        $("#tb_list").ListBind({ url: url, callBack: "LoadedInit" });
    }
    LoadData();

    $(function () {
        $(".show-alldetail").click(function () {
            if ($(this).hasClass("opened")) {
                $(".show-detail").show();
                $(".detail-info").hide();
                $(this).removeClass("opened").text("展开");
            }
            else {
                $(".show-detail").hide();
                $(".detail-info").show();
                $(this).addClass("opened").text("收起");;
            }

        });
    });
</script>
