<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<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"/>
</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 pb10 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="form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="userId" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">IP</label>
                            <div class="layui-input-inline">
                                <input type="text" name="ip" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" id="startTime" name="createTimeStart" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">截止时间</label>
                            <div class="layui-input-inline">
                                <input type="text" id="endTime" name="createTimeEnd" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">国家</label>
                            <div class="layui-input-inline">
                                <select name="isChina" lay-verify="required">
                                    <option value="" selected>未选择</option>
                                    <option value="1">中国</option>
                                    <option value="0">国外</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">省份</label>
                            <div class="layui-input-inline">
                                <input type="text" name="province" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">城市</label>
                            <div class="layui-input-inline">
                                <input type="text" name="city" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">县区</label>
                            <div class="layui-input-inline">
                                <input type="text" name="county" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">操作内容</label>
                            <div class="layui-input-inline">
                                <input type="text" name="remark" class="layui-input">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 表单数据 -->
    <div class="mb50 mt10">
        <div class="whitebg pl10 pr10">
            <table class="layui-hide" id="table" lay-filter="table"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-sm" lay-event="reset">
        <i class="layui-icon layui-icon-fonts-clear"></i>
        清空
    </a>
    <a class="layui-btn layui-btn-sm" lay-event="search">
        <i class="layui-icon layui-icon-search"></i>
        查询
    </a>
</script>

<script>
    let table;
    let form;
    let laydate;
    layui.use(['table', 'form', 'laydate'], function () {
        table = layui.table;
        form = layui.form;
        laydate = layui.laydate;

        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
        });

        laydate.render({
            elem: '#endTime'
            , type: 'datetime'
        });

        table.render({
            elem: '#table'
            , id: 'table'
            , url: ctx + '/operationRecord/page' //数据接口
            , response: {
                statusCode: 200
            }
            , autoSort: false
            , where: {
                asc: false,
                column: 'createTime'
            }
            , request: {
                pageName: 'current' //页码的参数名称，默认：page
                , limitName: 'size' //每页数据量的参数名，默认：limit
            }
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            , even: true
            , page: true //开启分页
            , toolbar: '#toolBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , defaultToolbar: ['filter']
            , cols: [[
                {type: 'checkbox', minWidth: 40, rowspan: 2}
                , {field: 'userId', title: '用户ID', width: 90, align: "left"}
                , {field: 'userName', title: '用户名称', width: 120, align: "left"}
                , {field: 'remark', title: '操作内容', minWidth: 86, align: "left"}
                , {
                    field: 'ip', title: '操作IP', width: 140, align: "left", templet: function (d) {
                        return '<a style="text-decoration: underline;" lay-event="searchIp">' + d.ip + '</a>';
                    }
                }
                , {field: 'count', title: '同IP用户', width: 110, align: "left", sort: true}
                , {
                    title: "地区", minWidth: 195, align: 'left', templet: function (d) {
                        let result = "";
                        if (d.country != null && d.country != '') {
                            result = result + d.country + " - ";
                        }

                        if (d.province != null && d.province != '') {
                            result = result + d.province + " - ";
                        }

                        if (d.city != null && d.city != '') {
                            result = result + d.city + " - ";
                        }

                        if (d.county != null && d.county != '') {
                            result = result + d.county + " - ";
                        }

                        if (result.length > 0) {
                            result = result.substring(0, result.length - 3);
                        }

                        return result;
                    }
                }
                , {field: 'address', title: '商户地址', minWidth: 100, align: "left"}
                , {field: 'isp', title: '运营商', width: 86, align: "left"}
                , {
                    field: 'createTime',
                    title: '操作时间',
                    width: 160,
                    align: "left",
                    templet: "<div>{{layui.util.toDateString(d.createTime,'yyyy-MM-dd HH:mm:ss')}}</div>"
                }
            ]]
        })

        table.on('toolbar(table)', function (obj) {
            switch (obj.event) {
                case 'search':
                    reload();
                    break;
                case 'reset':
                    debugger;
                    $('form[lay-filter="form"]')[0].reset()
                    break;
            }
        })

        table.on('tool(table)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'searchIp':
                    $('input[name="ip"]').val(data.ip);
                    reload()
            }
        })

        table.on('sort(table)', function (obj) {
            table.reload('table', {
                initSort: obj
                , where: {
                    column: obj.field //排序字段
                    , asc: obj.type === 'asc' //排序方式
                }
            });
        })
    })

    function reload() {
        let formData = form.val('form')
        table.reload('table', {
            page: {
                curr: 1
            }
            , where: formData

        }, true);
    }
</script>
</body>