<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
    <link rel="stylesheet" href="../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}/account/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="realName" class="am-form-field am-input-sm" maxlength="20"
                                           value="${realName!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">手机号</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="telephone" class="am-form-field am-input-sm" maxlength="11"
                                           value="${telephone!}"/>
                                </div>
                            </td>
                            <th class="am-text-middle">工号</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="userName" class="am-form-field am-input-sm" maxlength="20"
                                           value="${userName!}"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th class="am-text-middle">一级部门</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <select data-am-selected id="deptId" name="deptId">
                                        <option value="-1">全部</option>
                                        <#list  deptList as dept>
                                            <option value=${dept.id!} <#if deptId! =="${dept.id}" >
                                                    selected</#if>>${dept.name!}</option>
                                        </#list>
                                    </select>
                                </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.name!}</option>
                                        </#list>
                                    </select>
                                </div>
                            </td>
                            <th class="am-text-middle">常驻地</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="workLocation" class="am-form-field am-input-sm" maxlength="20"
                                           value="${workLocation!}"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th class="am-text-middle">创建时间</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <div class="am-form am-form-inline">
                                        <div class="am-form-group am-form-icon">
                                            <i class="am-icon-calendar"></i>
                                            <input type="text" class="am-form-field am-input-sm" id="startTime" readonly
                                                   value="${startTime!}" placeholder="开始日期" data-am-datepicker>
                                        </div>
                                        <div class="am-form-group">至</div>
                                        <div class="am-form-group am-form-icon">
                                            <i class="am-icon-calendar"></i>
                                            <input type="text" class="am-form-field am-input-sm" id="endTime" readonly
                                                   value="${endTime!}"
                                                   placeholder="结束日期" data-am-datepicker>
                                        </div>
                                    </div>
                                </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" onclick="sub_function('query')">搜索
                                    </button>
                                    <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary"
                                            id="submit-btn-export" onclick="sub_function('export')">导出
                                    </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="ACCOUNT_ADD">
                            <button type="button" class="am-btn am-btn-default"
                                    onclick="location.href='${base}/account/add'">
                                <span class="am-icon-plus"></span> 新增
                            </button>
                        </@shiro.hasPermission>
                    </div>
                    <div class="am-btn-group am-btn-group-xs">
                        <div class="am-btn-group am-btn-group-xs am-form-file">
                            <button type="button" id="bt_import" class="am-btn am-btn-default">
                                <span class="am-icon-archive"></span>
                                批量导入
                            </button>
                            <input id="doc-form-file" type="file" name="file"
                                   onChange="ajaxUploadFile('doc-form-file','${base}/account/batchImport')"
                                   multiple>
                        </div>
                        <button type="button" class="am-btn am-btn-default"
                                onclick="location.href='${base}/account/template'">
                            <span class="am-icon-archive"></span> 导入模板下载
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-12">
                <div class="am-scrollable-horizontal">
                    <table class="am-table am-table-striped am-table-hover table-main">
                        <thead>
                        <tr class="am-text-nowrap">
                            <th class="table-title">工号</th>
                            <th class="table-title">手机号码</th>
                            <th class="table-title">姓名</th>
                            <th class="table-title">常驻地</th>
                            <th class="table-title">一级部门</th>
                            <th class="table-title">直接主管</th>
                            <th class="table-title">职位</th>
                            <th class="table-title">角色名称</th>
                            <th class="table-title">公司邮件地址</th>
                            <th class="table-title">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <#list  pager.list as list>
                            <tr>
                                <td>${list.userName!}</td>
                                <td>${list.telephone!}</td>
                                <td>${list.realName!}</td>
                                <td>${list.workLocation!}</td>
                                <td>${list.deptName!}</td>
                                <td>${list.directManager!}</td>
                                <td>${list.positionName!}</td>
                                <td>${list.roleName!}</td>
                                <td>${list.companyEmail!}</td>
                                <td>
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <@shiro.hasPermission name="ACCOUNT_EDIT">
                                                <button type="button"
                                                        class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                        onclick="location.href='${base}/account/edit?userId=${list.id}'"><span
                                                            class="am-icon-pencil-square-o"></span>编辑
                                                </button>
                                            </@shiro.hasPermission>
                                            <@shiro.hasPermission name="ACCOUNT_RESET">
                                                <button type="button"
                                                        class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                        onclick="resetPassword('${base}/account/resetPassword?userId=${list.id}')"><span
                                                            class="am-icon-pencil-square-o"></span>密码重置
                                                </button>
                                            </@shiro.hasPermission>
                                        </div>
                                        <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 class="am-btn-group am-btn-group-xs">
                                            <div class="switch-button">
                                                <@shiro.hasPermission name="ACCOUNT_DELETE">
                                                    <button type="button"
                                                            class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                            onclick="deleteAll('${base}/account/delete?userId=${list.id}')">
                                                        <span class="am-icon-trash-o"></span> 删除
                                                    </button>
                                                </@shiro.hasPermission>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                            </tr>
                        </#list>
                        </tbody>
                    </table>
                </div>
                <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>


        <footer class="admin-content-footer">
            <hr>
        </footer>
    </div>
</@defaultLayout.layout>
<script type="text/javascript" src="${base}/common/js/jquery.ajaxfileupload.js"></script>
<script src="${base}/common/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${base}/common/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${base}/common/jQuery-File-Upload/js/jquery.fileupload.js"></script>
<script src="${base}/common/jQuery-File-Upload/js/jquery.fileupload-process.js"></script>
<script src="${base}/common/jQuery-File-Upload/js/jquery.fileupload-validate.js"></script>
<script src="../assets/js/amazeui.switch.js"></script>
<script type="text/javascript">
    $(function () {
        /**
         * 为每个启用或禁用按钮增加事件
         */
        $(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 keywordsObj = {};
        $("#submit-btn").on("click", function () {
            if ($("#realName").val())
                keywordsObj.realName = $("#realName").val();
            if ($("#telephone").val())
                keywordsObj.telephone = $("#telephone").val();
            if ($("#userName").val())
                keywordsObj.userName = $("#userName").val();
            if ($("#deptId").val())
                keywordsObj.deptId = $("#deptId").val();
            if ($("#roleId").val())
                keywordsObj.roleId = $("#roleId").val();
            if ($("#workLocation").val())
                keywordsObj.workLocation = $("#workLocation").val();
            if ($("#startTime").val())
                keywordsObj.startTime = $("#startTime").val();
            if ($("#endTime").val())
                keywordsObj.endTime = $("#endTime").val();
            var startTime = $("#startTime").val();
            var endTime = $("#endTime").val();
            if(startTime > endTime){
                window.confirm('开始日期应早于结束日期');
            }
            var keywords = "";
            if (!$.isEmptyObject(keywordsObj)) {
                keywords = JSON.stringify(keywordsObj);
            }
            $("#keywords").val(keywords);
            $("#listForm").submit();
        });
    });

    function ajaxUploadFile(id, url) {
        $.ajaxFileUpload({
            url: url,
            secureuri: false,
            fileElementId: id,// file标签的id
            dataType: 'json',// 返回数据的类型
            success: function (data, status) {
                console.log("--------success---------" + data)
                if (data.status == 0) {
                    var list = data.data;
                    var content = '';
                    $.each(list, function (i, r) {
                        content += (i + 1) + '、' + r + '<br>';
                    });
                    console.log('---> ' + content);
                    parent.layer.open({
                        title: '导入结果：',
                        content: data.msg + '<br><br>' + content
                    });
                } else {
                    parent.layer.msg(data.msg);
                }

                window.location.reload();
                $("#" + id).val("");
            },
            error: function (data, status, e) {
                console.log("--------error---------" + data)
                alert("-----------------" + data);
                // if ($('#modal')) {
                //     $('#modal').modal('close');
                // }
                alert(e);
                $("#" + id).val("");
            }
        });
    };

    function initSearch() {
        var keywordsObj = {};
        if ($("#realName").val())
            keywordsObj.realName = $("#realName").val();
        if ($("#telephone").val())
            keywordsObj.telephone = $("#telephone").val();
        if ($("#userName").val())
            keywordsObj.userName = $("#userName").val();
        if ($("#deptId").val())
            keywordsObj.deptId = $("#deptId").val();
        if ($("#roleId").val())
            keywordsObj.roleId = $("#roleId").val();
        if ($("#workLocation").val())
            keywordsObj.workLocation = $("#workLocation").val();
        if ($("#startTime").val())
            keywordsObj.startTime = $("#startTime").val();
        if ($("#endTime").val())
            keywordsObj.endTime = $("#endTime").val();
        var keywords = "";
        if (!$.isEmptyObject(keywordsObj)) {
            keywords = JSON.stringify(keywordsObj);
        }
        $("#keywords").val(keywords);
    };

    var sub_function = function (type) {
        initSearch();
        if (type == 'export') {
            $("#listForm").attr("action", "${base}/account/export");
        }
        if(type == 'query'){
            $("#listForm").attr("action", "${base}/account/list");
        }
        $("#listForm").submit();
    };

    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("重置失败");
                    }
                }
            });
        }
    };

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

    // 删除
    var deleteAll = 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("删除失败");
                    }
                }
            });
        }
    }
</script>
















