<#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}/department/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="{btnWidth: '40%', btnSize: 'sm'" id="enabled">
                                        <option value="-1">全部</option>
                                        <option value="1" <#if enabled! == "1">selected</#if> >启用</option>
                                        <option value="0" <#if enabled! == "0">selected</#if> >禁用</option>
                                    </select>
                                </div>
                            </td>
                            <th class="am-text-middle">所属上级</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <select data-am-selected="{btnWidth: '40%', btnSize: 'sm'" id="parentId">
                                        <option value="-1">全部</option>
                                        <option value="0" <#if parentId! == "0">selected</#if>>无</option>
                                        <#if parentList??>
                                            <#list parentList as parent>
                                                <option value="${parent.id!}" <#if parentId! == parent.id + "" >
                                                selected </#if>><#if parent.level gt 1>--</#if>${parent.name}</option>
                                            </#list>
                                        </#if>
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th class="am-text-middle">创建时间</th>
                            <td colspan="3">
                                <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"
                                                   value="${endTime!}" readonly
                                                   placeholder="结束日期" data-am-datepicker>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td colspan="2">
                                <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>
                                    <@shiro.hasPermission name="DEPARTMENT_EXPORT">
                                        <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary"
                                                id="submit-btn-export" onclick="sub_function('export')">导出
                                        </button>
                                    </@shiro.hasPermission>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="am-btn-toolbar" style="padding-left:.5rem;">
                <div class="am-btn-group am-btn-group-xs">
                    <@shiro.hasPermission name="DEPARTMENT_ADD">
                        <button type="button" class="am-btn am-btn-default"
                                onclick="location.href='${base}/department/add'">
                            <span class="am-icon-plus"></span> 新增
                        </button>
                    </@shiro.hasPermission>
                </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>
                        </tr>
                        </thead>
                        <tbody>
                        <#if  (pager.list)?exists && (pager.list?size>0)>
                            <#list    pager.list as list>
                                <tr>
                                    <td>${list.tempId!}</td>
                                    <td>${list.name!}</td>
                                    <td>${list.realName!}</td>
                                    <td>${list.parentName!}</td>
                                    <td>${list.createdBy!}</td>
                                    <td><#if list.createdTime??>${list.createdTime?datetime}</#if></td>
                                    <td>
                                        <div id="edit-div" class="am-btn-toolbar switch-button">
                                            <div class="am-btn-group am-btn-group-xs">
                                                <@shiro.hasPermission name="DEPARTMENT_EDIT">
                                                    <button type="button"
                                                            class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                            onclick="location.href='${base}/department/edit?id=${list.id}'"><span
                                                                class="am-icon-pencil-square-o"></span>编辑
                                                    </button>
                                                </@shiro.hasPermission>
                                                <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>
                                    </td>
                                </tr>
                            </#list>
                        </#if>
                        </tbody>
                    </table>
                </div>
                <div class="am-cf">
                    <!-- 分页 -->
                    <#if (pager.list)?exists && (pager.list?size>0) >
                        <div class="am-fr">
                            <#include "../common/order_list_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 sub_function = function (type) {
        initSearch();
        if (type == 'export') {
            $("#listForm").attr("action", "${base}/department/export");
        } else {
            $("#listForm").attr("action", "${base}/department/list");
        }
        $("#listForm").submit();
    };

    function initSearch() {
        var keywordsObj = {};
        if ($("#name").val())
            keywordsObj.name = $("#name").val();
        if ($("#type").val())
            keywordsObj.type = $("#type").val();
        if ($("#parentId").val())
            keywordsObj.parentId = $("#parentId").val();
        if ($("#enabled").val())
            keywordsObj.enabled = $("#enabled").val();
        if ($("#startTime").val())
            keywordsObj.startTime = $("#startTime").val();
        if ($("#endTime").val())
            keywordsObj.endTime = $("#endTime").val();
        var keywords = "";
        if (!$.isEmptyObject(keywordsObj)) {
            keywords = JSON.stringify(keywordsObj);
        }
        console.log("keywords = " + keywords);
        $("#keywords").val(keywords);
    }

    $(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}/department/enableOrDisable",
            data: {id: id, status: status},
            type: "post",
            dataType: "json",
            async: false,
            success: function (data) {
                parent.layer.msg(data.msg);
            }
        });
    };

</script>