<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
    <link rel="stylesheet" href="${base}/assets/css/amazeui.switch.css"/>
    <div class="admin-content">
        <div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;">
            <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">系统管理</strong> /
                <small>前端账号管理</small>
            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-12">
                <form class="am-form" id="listForm" action="${base}/manager/list" method="POST">
                    <input type="hidden" id="keywords" name="keywords" value='${keywords!""}'/>
                    <table class="am-table am-table-bordered am-table-radius table-main" style="padding:0;">
                        <tbody>
                        <tr>
                            <th class="am-text-middle">姓名</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="name" class="am-form-field am-input-sm"
                                           value="${name!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">账号角色</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <select data-am-selected id="roleId" name="roleId">
                                        <option value="-1">全部</option>
                                        <#list  roleList as role>
                                            <option value=${role.id!} <#if roleId! =="${role.id}" >
                                                    selected
                                                    </#if>>${role.roleName!}</option>
                                        </#list>
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th class="am-text-middle">手机号</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="phone" class="am-form-field am-input-sm"
                                           value="${phone!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">所属区域</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <select id="regionId" name="regionId"
                                            data-am-selected="{btnSize: 'sm',maxHeight: 200,searchBox: 1}">
                                        <option value="-1">全部</option>
                                        <#if regionList?exists>
                                            <#list regionList as node>
                                                <option value="${node.id!}" <#if regionId! == "${node.id}" >
                                                selected </#if>>${node.name}</option>
                                            </#list>
                                        </#if>

                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th class="am-text-middle">归属单位</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="company" class="am-form-field am-input-sm"
                                           value="${company!}"/>
                                </div>
                            </td>
                            <td colspan="4">
                                <div align='right'>
                                    <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary"
                                            id="submit-btn">搜索
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="am-u-sm-12 am-u-md-12" style="padding:0 1.6rem 1.6rem 1rem;margin:0;">
                <div class="am-btn-toolbar" style="padding-left:.5rem;">
                    <div class="am-btn-group am-btn-group-xs">
                        <@shiro.hasPermission name="MANAGER_ADD">
                            <button type="button" class="am-btn am-btn-default"
                                    onclick="location.href='${base}/manager/add'">
                                <span class="am-icon-plus"></span>
                                新增
                            </button>
                        </@shiro.hasPermission>
                        <@shiro.hasPermission name="MANAGER_DELETE">
                            <button type="button" id="deleteButton" disabled="disabled"
                                    class="am-btn am-btn-default"
                                    onclick="deleteAll('${base}/manager/delete')"><span
                                        class="am-icon-trash-o"></span> 删除
                            </button>
                        </@shiro.hasPermission>
                    </div>
                </div>
            </div>
        </div>
        <div class="am-g">
            <div class="am-u-sm-12 am-scrollable-horizontal">
                <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr class="am-text-nowrap">
                        <th class="table-check">
                            <input type="checkbox" id="allCheck"></th>
                        <th class="table-title">姓名</th>
                        <th class="table-date">角色</th>
                        <th class="table-title">手机号码</th>
                        <th class="table-date">所属区域</th>
                        <th class="table-title">归属单位</th>
                        <th class="table-date">备注</th>
                        <th class="table-date">创建时间</th>
                        <th class="table-set am-text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <#if (pager.list)?exists>
                        <#list  pager.list as list>
                            <tr>
                                <td>
                                    <input type="checkbox" name="ids" value="${list.id}"/>
                                </td>
                                <td>${list.name!}</td>
                                <td>${list.roleName!}</td>
                                <td>${list.phone!}</td>
                                <td>${list.regionName!}</td>
                                <td>${list.company!}</td>
                                <td>${list.remark!}</td>
                                <td><#if list.createTime??>${list.createTime?datetime}</#if></td>
                                <td>
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <@shiro.hasPermission name="MANAGER_EDIT">
                                                <button type="button"
                                                        class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                        onclick="location.href='${base}/manager/edit?id=${list.id?c}'">
                                                    <span class="am-icon-pencil-square-o"></span>
                                                    编辑
                                                </button>
                                            </@shiro.hasPermission>
                                            <@shiro.hasPermission name="MANAGER_RESET">
                                                <button type="button"
                                                        class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                        onclick="resetPassword('${base}/manager/resetPassword?managerId=${list.id}')"><span
                                                            class="am-icon-pencil-square-o"></span>密码重置
                                                </button>
                                            </@shiro.hasPermission>
                                            <@shiro.hasPermission name="MANAGER_BINDING">
                                                <#if (list.roleName) = '工地巡查员'>
                                                    <button type="button"
                                                            class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                            onclick="location.href='${base}/binding/select?id=${list.id?c}&type=app'">
                                                        <span class="am-icon-pencil-square-o"></span>
                                                        绑定工地
                                                    </button>
                                                </#if>
                                            </@shiro.hasPermission>
                                            <div class="am-btn-group am-btn-group-xs">
                                                <div class="switch-button">
                                                    <#--是否启用：0禁用，1启用-->
                                                    <input id="${list.id}" type="checkbox" data-size='xs'
                                                           data-am-switch data-off-text="已禁用" data-on-text="已启用"
                                                           <#if list.enabled==1 >checked</#if>/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </#list>
                    </#if>
                    </tbody>
                </table>

                <div class="am-cf">
                    <!-- 分页 -->
                    <#if (pager.list)?exists && (pager.list?size>0) >
                        <div class="am-fr">
                            <#include "../common/common_pager.ftl">
                        </div>
                    <#else>
                        <div class="am-kai" align="center">
                            <h3>没有找到任何记录!</h3>
                        </div>
                    </#if>
                </div>
            </div>
        </div>
    </div>
</@defaultLayout.layout>

<script src="${base}/assets/js/amazeui.switch.js"></script>
<script type="text/javascript">
    var urlBase = "${base}";
    var url;

    $(function () {
        /*表单提交 start*/
        var keywordsObj = {};
        $("#submit-btn").on("click", function () {
            if ($("#name").val())
                keywordsObj.name = $("#name").val();
            if ($("#roleId").val())
                keywordsObj.roleId = parseInt($("#roleId").val());
            if ($("#phone").val())
                keywordsObj.phone = $("#phone").val();
            if ($("#regionId").val())
                keywordsObj.regionId = parseInt($("#regionId").val());
            if ($("#company").val())
                keywordsObj.company = $("#company").val();
            var keywords = "";
            if (!$.isEmptyObject(keywordsObj)) {
                keywords = JSON.stringify(keywordsObj);
            }
            console.log("keywords = " + keywords);
            $("#keywords").val(keywords);
            $("#listForm").submit();
        });
        /*表单提交 end*/

        /*复选框全选效果 start*/
        $("body").on('click', '.list-item', function () {
            $(".list-item").removeClass("tr-selected");
            $(this).addClass('tr-selected');
        });
        $("#allCheck").click(function () {
            $('input[name="ids"]').prop("checked", this.checked);
            $("#deleteButton").prop("disabled", $("input[name='ids']:checked").length == 0 ? true : false);
        });
        var $citySubBox = $("input[name='ids']");
        $citySubBox.click(function () {
            $("#allCheckCity").prop("checked", $citySubBox.length == $("input[name='ids']:checked").length ? true : false);
            $("#deleteButton").prop("disabled", $("input[name='ids']:checked").length == 0 ? true : false);
        });
        /*复选框全选效果 end*/

    });

    /*批量删除角色 start*/
    var deleteAll = function (url) {
        var $deleteButton = $("#deleteButton");// 删除按钮
        var ids = "";
        $("input[name='ids']:checked").each(function () {
            ids += $(this).val() + "#%#";
        });
        var params = {ids: ids};
        if (window.confirm('确定要删除吗？')) {
            $.ajax({
                url: url,
                data: params,
                dataType: "json",
                async: false,
                beforeSend: function (data) {
                    $deleteButton.prop("disabled", true)
                },
                success: function (data) {
                    $deleteButton.prop("disabled", false)
                    if (data.status == 0) {
                        alert(data.msg);
                        window.location.href = window.location.href;
                    } else if (data.status == 1) {
                        alert(data.msg);
                    }
                }
            });
        }
    }
    /*批量删除角色 end*/

    var resetPassword = function (url) {
        var params = {};
        if (window.confirm('确定要重置密码吗？')) {
            $.ajax({
                url: url,
                data: params,
                dataType: "json",
                async: false,
                beforeSend: function (data) {
                },
                success: function (data) {
                    if (data.status == 0) {
                        alert("重置成功");
                        window.location.href = window.location.href;
                    } else if (data.status == 1) {
                        alert("重置失败");
                    }
                }
            });
        }
    }

    /**
     * 为每个启用或禁用按钮增加事件
     */
    $(function () {
        var $mycheckbox = $('.switch-button').find("input[type='checkbox']");
        $mycheckbox.each(function () {
            var myid = $(this).attr("id");
            var prop = $(this).attr("prop");

            $(this).on({
                'switchChange.bootstrapSwitch': function (event, state) {
                    toggle(myid, state ? 1 : 0);
                }
            });

        });

    });

    //启用或者禁用
    var toggle = function (id, status) {
        $.ajax({
            url: "${base}/manager/changeStatus",
            data: {id: id, enabled: status},
            type: "post",
            dataType: "json",
            async: false,
            success: function (data) {
                parent.layer.msg(data.msg);
            }
        });
    };
</script>
