<%@ page contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <jsp:include page="../../../common.jsp"/>

    <style>
    </style>
</head>
<body>
<div class="row animated fadeInRight" style="margin: 0;">
    <div class="wrapper wrapper-content mt5 right-content ml5 mr5">
        <div class="toolbar-panel bdd">
            <div class="toolbar-box">
                <div class="toolbar-head clearfix lgraybg pt5 pb5 pl10 bdbd">
                    <!-- 顶部按钮 -->
                    <div class="fl">
                        查询条件
                    </div>
                    <div class="tools fr">
                        <a href="javascript:void(0);" class="collapse dblock f14 dgray mr5">
                            <i class="fa-2x fa fa-angle-double-up"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!--搜索条件 -->
            <div class="toolbar-body">
                <form class="layui-form" action="" style="margin-top: 10px" lay-filter="condition">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">mcc编码</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="fMccCode">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">一级类目</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="fGrandpaTxt">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">二级类目</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="fFatherTxt">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">mcc描述</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="fMccTxt">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">mcc类型</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="fMccType">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <table class="layui-hide" id="demo" lay-filter="test"></table>
    </div>
</div>

<script id="barDemo" type="text/html">
    <button class="layui-btn layui-btn-xs"
            lay-mDropdown="{template: '#toolbarMenu'}">
        <span>操作</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button>
</script>

<script type="text/html" id="toolbarMenu">
    <a href="javascript:void(0);" lay-event="edit"
       class="layui-btn layui-btn-xs layui-btn-radius fa fa-edit ops_more f12">编&emsp;&emsp;辑</a>
    <br/><a href="javascript:void(0);" lay-event="bandage"
            class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger fa ops_more f12">&ensp;角色绑定&ensp;</a>
    <br/><a href="javascript:void(0);" lay-event="del"
            class="layui-btn layui-btn-xs layui-btn-radius fa fa-detail ops_more f12">删&emsp;&emsp;&emsp;除</a>
</script>

<script type="text/html" id="imgTemp">
    <img src="{{d.icon}}" width="50px" height="50px" alt=""/>
</script>

<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-sm" href="javascript:void(0);"
       lay-event="search"><i class="layui-icon layui-icon-search"></i><span>搜索</span></a>
</script>

<script>

    var laypage, layer, table, form;

    layui.config({
        version: '1598935358933' //为了更新 js 缓存，可忽略
    });

    layui.use(['laypage', 'layer', 'table', 'upload', 'element'], function () {
        laypage = layui.laypage;
        layer = layui.layer; //弹层
        table = layui.table; //表格
        form = layui.form;

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , id: 'idTest'
            , url: ctx + '/mccInfo/sxf/page' //数据接口
            , autoSort: false
            , response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , countName: 'count' //数据总数的字段名称，默认：count
                , dataName: 'data' //默数据列表的字段名称，认：data
                , statusCode: 200
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , title: 'app首页菜单表'
            , page: true //开启分页
            , toolbar: '#toolBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['filter']
            , cols: [[ //表头
                {type: 'checkbox'}
                , { field: 'fId', title: 'id'}
                , { field: 'fMccCode', title: 'mcc编码', minWidth: 80, sort: true }
                , { field: 'fGrandpaTxt', title: '一级类目', minWidth: 80}
                , { field: 'fFatherTxt', title: '二级类目', minWidth: 80}
                , { field: 'fMccTxt', title: 'mcc描述', minWidth: 200}
                , { field: 'fMccType', title: 'mcc类型', minWidth: 80}
                // , {fixed: 'right', title: '操作', minWidth: 100, style: "height: 61px", align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'search':
                    search();
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                del(data)
            } else if (layEvent === 'edit') {
                //layer.msg('编辑操作');
                toEdit(data.id);
            } else if (layEvent === 'bandage') {
                bandage(data.id);
            }
        });

        //监听排序事件
        table.on('sort(test)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('idTest', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    column: obj.field //排序字段
                    , asc: obj.type === 'asc' //排序方式
                }
            }, true);

            layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
        });
    });

    function toEdit(id) {
        var url = '${ctx}/appMenu/detail/' + id;
        var index = layer.open({
            type: 2
            , title: "菜单详情"
            , shade: 0.5
            , maxmin: true
            , content: url
            , area: ['550px', '750px']
        });
    }

    function toAdd() {
        var url = '${ctx}/appMenu/detail';
        var index = layer.open({
            type: 2
            , title: "菜单详情"
            , shade: 0.5
            , maxmin: true
            , content: url
            , area: ['550px', '750px']
            , end: function () {
                time: 1000
            }
        });
    }

    function bandage(id) {
        var url = '${ctx}/appMenu/bandage/' + id;
        var index = layer.open({
            type: 2
            , title: "用户角色"
            , shade: 0.5
            , maxmin: true
            , content: url
            , area: ['400px', '300px']
        });
    }

    function del(obj) {
        var url = '${ctx}/appMenu/del/' + obj.id;
        layer.confirm('真的删除“' + obj.name + '”么', {
            yes: function () {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg(res.message);
                            table.reload('idTest');
                        } else {
                            layer.msg(res.message, {
                                icon: 5
                            });
                        }
                    },
                    error: function () {
                        layer.msg("操作失败", {
                            icon: 5
                        });
                    }
                })
            }
        });
    }

    function search() {
        var condition = form.val('condition');
        table.reload('idTest', {
            where: condition
        }, true);
    }
</script>
</body>

</html>