<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/'} ">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script type="text/javascript" src="assets/js/vendor/safety/js/jquery.min.js" ></script>
    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">

    <script type="text/javascript" src="assets/js/vendor/safety/js/context.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/safety/css/context.standalone.css">
    <style>
        .phone-list{padding:10px;}
        .phone-list ul{overflow: hidden;clear: both;}
        .phone-list ul li{width:25%;float: left;}
        .phone-list ul li .phone-box{margin:10px;position: relative;}
        .phone-list ul li .phone-box img{margin-top:2px;width:100%;vertical-align: top;height:170px;}
        .phone-list ul li .phone-box b{display: inline-block;width:51%;height:14%;text-align:left;color:#47e8f8;font-size:14px;font-weight:500;position: absolute;}
        .phone-list ul li .phone-box b.orange{color:orange;}
        .phone-list ul li .phone-box span{display: inline-block;width:37%;height:10.5%;color:#fff;font-size:13px;position: absolute;top:12%;right:-14%;overflow: hidden;}
        .title{text-align: center;font-size: 13px;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
        .phone-list{z-index: 1;position: relative}
        .phone-list ul li .phone-box b.status{bottom:-8px;width:100%;left:1px;top: auto;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    </style>
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein" style="z-index: 10 !important;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body"   id="dataTableBox">
                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                        <div class="layui-inline">
                            <input type="text" id="keywords" class="layui-input search-item" placeholder="输入关键字">
                        </div>
                        <div class="layui-inline layui-form search-item" id="bigdataModuleTypeBox" lay-filter="bigdataModuleTypeBox"></div>
                        <button type="button" id="search" class="layui-btn layui-btn-sm">
                            <i class="fa fa-lg fa-search"></i> 搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="phone-list" id="showDataDiv">
</div>
<script id="showDataScript" type="text/html">
    <ul>
        {{# for(var i = 0 ; i < d.length ; i++ ) {  }}
        <li style="cursor: pointer;" class="module" data-index="{{i}}">
            <div class="phone-box">
                {{# if(d[i].bigdataModuleLink == 'mapLink') {  }}
                    <span style="color:forestgreen;font-weight: bold">地图联动</span>
                {{# } }}
                {{# if(d[i].bigdataModuleLink == 'dateLink') { }}
                    <span style="color:forestgreen;font-weight: bold">时间联动</span>
                {{# } }}
                {{# if(d[i].bigdataModuleLink == 'selectLink') { }}
                    <span style="color:forestgreen;font-weight: bold">选项联动</span>
                {{# } }}
                <h3 class="title">{{d[i].bigdataModuleName}}</h3>
                <img alt="{{d[i].bigdataModuleCode}} - {{d[i].bigdataModuleTypeDictionaryName}}" src="route/file/download/false/{{d[i].bigdataModulePhoto}}">
                <b class="badge orange status">{{d[i].bigdataModuleCode}} - {{d[i].bigdataModuleTypeDictionaryName}}</b>
            </div>
        </li>
        {{# } }}
    </ul>
</script>

<script id="bigdataModuleTypeTemplate" type="text/html">
    <select id="bigdataModuleType" name="bigdataModuleType">
        <option value="">模块类型</option>
        {{# for(var i = 0, item; item = d[i++];) { }}
        <option value="{{item.dictionaryId}}">{{item.dictionaryName}}</option>
        {{# } }}
    </select>
</script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script>
    layui.config({
        base: 'assets/layuiadmin/'
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'laydate', 'laytpl', 'common', 'form'], function() {
        var $ = layui.$;
        var $win = $(window);
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var common = layui.common;
        var resizeTimeout = null;
        var tableUrl = 'api/bigdatamodule/listpagebigdatamodule?bigdataModuleSwitch=1&page=1';
        var total = 0;
        var currentPage = 1; //设置当前页数，全局变量
        var rows = [];
        var viewer = new Viewer(document.getElementById("showDataDiv"), {navbar: false});

        // 右键菜单参数
        context.init({
            fadeSpeed: 100,
            filter: function (data){
                console.log(data);
            },
            above: 'auto',
            preventDoubleContext: true,
            compress: false
        });

        function reloadTable(page) {
            currentPage = page;
            var loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
            top.restAjax.get(top.restAjax.path(tableUrl + '&rows=' + (page * 20) + "&keywords=" + $("#keywords").val() + "&bigdataModuleType=" + $('#bigdataModuleType').val(), []), {}, null, function(code, data) {
                total = data.total;
                rows = data.rows;
                laytpl(document.getElementById('showDataScript').innerHTML).render(rows, function(html) {
                    document.getElementById('showDataDiv').innerHTML = html;
                    viewer.update();
                });
                layer.close(loadLayerIndex);
                context.attach('.module', [
                    {text: '使用模块', action: function(e){
                            e.preventDefault();
                            var selectIndex = $(context.clickEle()).data("index");
                            top.dialog.dialogData.bigdataModuleId = rows[selectIndex].bigdataModuleId;
                            top.dialog.dialogData.bigdataModuleName = rows[selectIndex].bigdataModuleName;
                            top.dialog.dialogData.bigdataModuleCode = rows[selectIndex].bigdataModuleCode;
                            top.dialog.dialogData.bigdataModuleModuleJson = rows[selectIndex].bigdataModuleModuleJson;
                            top.dialog.dialogData.bigdataModuleServerJson = rows[selectIndex].bigdataModuleServerJson;
                            top.dialog.dialogData.bigdataModuleLink = rows[selectIndex].bigdataModuleLink;
                            closeBox();
                        }
                    },
                    {text: '查看代码', action: function(e){
                            e.preventDefault();
                            var selectIndex = $(context.clickEle()).data("index");
                            top.dialog.open({
                                url: top.restAjax.path('route/bigdatamodule/updatebigdatamodulecontentview?bigdataModuleId={bigdataModuleId}', [rows[selectIndex].bigdataModuleId]),
                                title: data.bigdataModuleName,
                                width: '100%',
                                height: '100%',
                                onClose: function() {
                                }
                            });
                        }
                    },
                    {divider: true}
                ]);
            }, function(code, data) {
                top.dialog.msg(data.msg);
            }, function() {
                loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
            }, function() {
                top.dialog.close(loadLayerIndex);
            });
        }

        //核心代码
        var winH = $(window).height(); //页面可视区域高度
        var scrollHandler = function () {
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop(); //滚动条top
            var a = (pageH - winH - scrollT) / winH;
            if(a  == 0 && total > (currentPage  * 20)) {
                reloadTable(currentPage + 1);
            }
        }

        initBigdataModuleTypeSelect();

        //定义鼠标滚动事件
        $(window).scroll(scrollHandler);

        // 初始化模块类型下拉选择
        function initBigdataModuleTypeSelect() {
            top.restAjax.get(top.restAjax.path('api/data/listbyparentid/e5078e2b-fa0e-41c8-9b3a-9dcec1ff8855', []), {}, null, function(code, data, args) {
                laytpl(document.getElementById('bigdataModuleTypeTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('bigdataModuleTypeBox').innerHTML = html;
                });
                form.render('select', 'bigdataModuleTypeBox');
                reloadTable(1);
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 表格行中按钮事件
        table.on('tool(dataTable)', function(obj) {
            var layEvent = obj.event;
            var data = obj.data;
            if(layEvent === 'moduleContentEvent') {
                top.dialog.open({
                    url: top.restAjax.path('route/bigdatamodule/updatebigdatamodulecontentview?bigdataModuleId={bigdataModuleId}', [data.bigdataModuleId]),
                    title: data.bigdataModuleName,
                    width: '100%',
                    height: '100%',
                    onClose: function() {
                        reloadTable();
                    }
                });
            }
        });

        // 事件 - 页面变化
        $win.on('resize', function() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() {
                reloadTable(currentPage + 1);
            }, 500);
        });

        // 事件 - 搜索
        $(document).on('click', '#search', function() {
            reloadTable(1);
        });

        // 事件 - 增删改
        table.on('toolbar(dataTable)', function(obj) {
            var layEvent = obj.event;
            var checkStatus = table.checkStatus('dataTable');
            var checkDatas = checkStatus.data;
            if(layEvent === 'updateEvent') {
                if(checkDatas.length === 0) {
                    top.dialog.msg(top.dataMessage.table.selectEdit);
                } else if(checkDatas.length > 1) {
                    top.dialog.msg(top.dataMessage.table.selectOneEdit);
                } else {
                    if(checkDatas.length === 0) {
                        top.dialog.msg("请选择要使用的模块");
                    } else if(checkDatas.length > 1) {
                        top.dialog.msg("只能选择一个模块");
                    } else {
                        top.dialog.dialogData.bigdataModuleId = checkDatas[0].bigdataModuleId;
                        top.dialog.dialogData.bigdataModuleName = checkDatas[0].bigdataModuleName;
                        top.dialog.dialogData.bigdataModuleCode = checkDatas[0].bigdataModuleCode;
                        top.dialog.dialogData.bigdataModuleModuleJson = checkDatas[0].bigdataModuleModuleJson;
                        top.dialog.dialogData.bigdataModuleServerJson = checkDatas[0].bigdataModuleServerJson;
                        top.dialog.dialogData.bigdataModuleLink = checkDatas[0].bigdataModuleLink;
                        closeBox();
                    }
                }
            }
        });
        // initBigdataModuleTypeSelect();

        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }
    });
</script>
</body>
</html>