<%@ 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>
        .layui-table-cell {
            text-align: center;
            height: auto;
            white-space: normal;
        }

        .layui-table img {
            max-width: 300px
        }
    </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="" lay-filter="condition" style="margin-top: 10px">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">省</label>
                            <div class="layui-input-inline">
                                <input name="province" placeholder="源数据" class="layui-input"/>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">市</label>
                            <div class="layui-input-inline">
                                <input name="city" placeholder="源数据" class="layui-input"/>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">县区</label>
                            <div class="layui-input-inline">
                                <input name="area" placeholder="源数据" class="layui-input"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

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


<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 type="text/html" id="operation1">
    <a class="layui-btn layui-btn-xs" href="javascript:void(0);"
       lay-event="editSxf">
        <i class="layui-icon layui-icon-edit"></i>
        <span>编辑</span>
    </a>
</script>

<script type="text/html" id="operation2">
    <a class="layui-btn layui-btn-xs" href="javascript:void(0);"
       lay-event="editRyx">
        <i class="layui-icon layui-icon-edit"></i>
        <span>编辑</span>
    </a>
</script>

<script type="text/html" id="operation3">
    <a class="layui-btn layui-btn-xs" href="javascript:void(0);"
       lay-event="editYs">
        <i class="layui-icon layui-icon-edit"></i>
        <span>编辑</span>
    </a>
</script>

<script>

    var laypage, layer, table, form;

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

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , id: 'idTest'
            , url: '${ctx}/regionReflect/pageData' //数据接口
            , autoSort: false
            , where: {
                column: 'sort'
                , asc: true
            }
            , 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: '商户'
            , page: true //开启分页
            , toolbar: '#toolBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['filter']
            , cols: [[ //表头
                    {type: 'checkbox', rowspan: 2}
                    , {field: '', title: '序号', type: 'numbers', rowspan: 2}
                    , {field: '', title: '源地区数据', minWidth: 180, rowspan: 2, sort: true, templet: function(d) {
                            return d.src.province + "-" + d.src.city + "-" + d.src.area
                        }}
                    , {field: '', title: '随行付', minWidth: 180, colspan: 2}
                    , {field: '', title: '瑞银信', minWidth: 180, colspan: 2}
                    , {field: '', title: '银盛', minWidth: 180, colspan: 2}
                ],
                [
                    {field: '', title: '地区数据', minWidth: 180, templet: function(d) {
                            if (d.sxf != null) {
                                return d.sxf.province + "-" + d.sxf.city + "-" + d.sxf.area
                            }
                            return "";
                        }}
                    , {field: '', title: '操作', minWidth: 80, templet: '#operation1' }
                    , {field: '', title: '地区数据', minWidth: 180, templet: function(d) {
                        if (d.ryx != null) {
                            return d.ryx.province + "-" + d.ryx.city + "-" + d.ryx.area
                        }

                        return "";
                    }}
                    , {field: '', title: '操作', minWidth: 80, templet: '#operation2' }
                    , {field: '', title: '地区数据', minWidth: 180, templet: function(d) {
                        if (d.ys != null) {
                            return d.ys.province + "-" + d.ys.city + "-" + d.ys.area
                        }
                        return "";
                    }}
                    , {field: '', title: '操作', minWidth: 80, templet: '#operation3' }
                ]
            ]
        });

        table.on('toolbar(test)', function(obj) {
            switch(obj.event){
                case 'search':
                    reload();
                    break;
            }
        });

        table.on('tool(test)', function(obj) {
            var data = obj.data;
            var type;
            switch(obj.event){
                case 'editSxf':
                    type = "sxf";
                    break;
                case 'editRyx':
                    type = "ryx";
                    break;
                case 'editYs':
                    type = "ys";
                    break;
            }

            layer.open({
                type: 2
                , area: ['500px', '500px']
                , content: ctx + '/regionReflect/edit/' + type + "?regionSrc=" + data.regionSrc
            });
        });
    });

    function reload() {
        var data = form.val('condition')

        table.reload('idTest', {
            url: '${ctx}/regionReflect/pageData'
            , where: data
        }, true);
    }
</script>
</body>
</html>