<!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">
    <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">
    <style>
        .selectColor{
            width:95%;
            float:left;
            cursor:pointer;
        }
    </style>
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein">
    <div class="layui-card">
        <!-- <div class="layui-card-header">
             <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
               <a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
               <a href="javascript:void(0);"><cite>新增内容</cite></a>
             </span>
         </div>-->
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form layui-form-pane" lay-filter="dataForm">
                <input type="hidden" id="bigdataTemplateId" name="bigdataTemplateId" class="layui-input" value="">
                <div id="templateAreaModuleDataDiv"></div>

                <script id="templateAreaModuleDataScript" type="text/html">
                    <div class="layui-formitem" style="text-align: center;width:100% !important;font-size: 17px">
                        <b style="color: red">模块基础参数</b>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">id<span style="color: red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" id="id" name="id" disabled="disabled" class="layui-input" value="{{d.id}}" placeholder="" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">title<span style="color: red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" id="title" name="title" class="layui-input title" value="{{d.title}}" placeholder="请输入标题" >
                        </div>
                    </div>
                    <div class="layui-formitem" style="text-align: center;width:100% !important;font-size: 17px">
                        <b style="color: red">模块data对象参数</b>
                    </div>
                    {{#    for(let key in d.data) { }}
                    {{#         if(typeof(d.data[key]) == 'string') { }}
                            <div class="layui-form-item">
                                <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" id="data_{{key}}" name="data_{{key}}" class="layui-input dataInputRowFilter {{(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) ? 'selectColor' : '' }}" value="{{d.data[key]}}" placeholder="" >
                                    {{#         if(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) { }}
                                        <div style="height:38px;width:5%;float:left;background-color:{{d.data[key]}};"></div>
                                    {{# } }}
                                </div>
                            </div>
                    {{#         } else if(typeof(d.data[key]) == 'number') { }}
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
                                        <div class="layui-input-block">
                                            <input type="number" id="data_{{key}}" name="data_{{key}}" class="layui-input dataInputRowFilter" value="{{d.data[key]}}" placeholder="" >
                                        </div>
                                    </div>

                    {{#         } else if(typeof(d.data[key]) == 'boolean') { }}
                                    <div class="layui-form-item" pane>
                                        <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" id="data_{{key}}" name="data_{{key}}" lay-filter="dataSwitchRowFilter" value="{{d.data[key]}}" {{d.data[key] == true ? 'checked="checked"' : ''}}  lay-skin="switch"  lay-text="开|关">
                                        </div>
                                    </div>
                    {{#         } }}
                    {{#    } }}
                    {{#    var mList =  d.list; }}
                    <div class="layui-formitem" style="text-align: center;width:100% !important;font-size: 17px">
                        {{#     if(mList.length  > 0) { }}
                        <botton  class="layui-btn layui-btn-xs" style="margin-right: 10px;" id="addRow">添加一行</botton>
                        {{#     } }}
                        <b style="color: red">模块list集合参数</b>
                    </div>

                    {{#    for(let i = 0; i < mList.length; i++) { }}
                    <div class="layui-formitem" style="text-align: center;width:100% !important;">
                        <span style="color: red">模块list集合对象{{i + 1}}</span>
                        <botton  class="layui-btn layui-btn-xs layui-btn-danger removeRow" style="margin-left: 10px;margin-bottom: 5px;" listIndex="{{i}}" >删除本行</botton>
                    </div>
                    {{#         var mData =  mList[i]; }}
                        {{#         if(typeof(mData) == 'string') { }}
                        <div class="layui-form-item">
                            <label class="layui-form-label">字符<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" >
                            </div>
                        </div>
                        {{#         } else if(typeof(mData) == 'boolean') { }}
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label">布尔<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="checkbox" id="list_{{i}}" name="list_{{i}}" value="{{mData}}"  lay-filter="dataSwitchRowFilter"  {{mData == true ? 'checked="checked"' : ''}}  lay-skin="switch"  lay-text="开|关">
                            </div>
                        </div>
                        {{#         } else if(typeof(mData) == 'number') { }}
                        <div class="layui-form-item">
                            <label class="layui-form-label">数值<span style="color: red">*</span></label>
                            <div class="layui-input-block">
                                <input type="number" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" >
                            </div>
                        </div>
                        {{#         } else if(typeof(mData) == 'object') { }}
                            {{#     for(let key in mData) { }}
                                {{#         if(typeof(mData[key]) == 'string') { }}
                                <div class="layui-form-item">
                                    <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="text" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" class="layui-input dataInputRowFilter {{(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) ? 'selectColor' : '' }}" value="{{mData[key]}}" placeholder="" >
                                        {{#  if(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) { }}
                                            <div style="height:38px;width:5%;float:left;background-color:{{mData[key]}};"></div>
                                        {{# } }}
                                    </div>
                                </div>
                                {{#         } else if(typeof(mData[key]) == 'number') { }}
                                <div class="layui-form-item">
                                    <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="number" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" class="layui-input dataInputRowFilter" value="{{mData[key]}}" placeholder="" >
                                    </div>
                                </div>
                                {{#         } else if(typeof(mData[key]) == 'boolean') { }}
                                <div class="layui-form-item" pane>
                                    <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" lay-filter="dataSwitchRowFilter"  value="{{mData[key]}}" {{mData[key] == true ? 'checked="checked"' : ''}}  lay-skin="switch" lay-text="开|关">
                                    </div>
                                </div>
                                {{#         } }}
                            {{# } }}
                        {{# } else { }}
                            <div class="layui-form-item">
                                <label class="layui-form-label">{{typeof(mData) }}<span style="color: red">*</span></label>
                            </div>
                            {{# } }}
                    {{# } }}
                </script>

                <div class="layui-form-item layui-layout-admin">
                    <div class="layui-input-block">
                        <div class="layui-footer" style="left: 0;">
                            <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交修改</button>
                            <button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
                            <button type="button" class="layui-btn layui-btn-normal" id="showRemark">字段释义❓</button>
                            <div id="test-all" style="padding-top: 5px;">颜色速查</div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="assets/js/vendor/wangEditor/wangEditor.min.js"></script>
<script src="assets/js/vendor/ckplayer/ckplayer/ckplayer.js"></script>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>

<script src="assets/template/aes/rollups/aes.js"></script>
<script src="assets/template/aes/components/cipher-core.js"></script>
<!--<script src="assets/template/aes/components/core.js"></script>-->
<script src="assets/template/aes/components/mode-ecb.js"></script>

<script>

    function Encrypt(word){
        var key = CryptoJS.enc.Utf8.parse("abcdefgabcdefg12");
        var srcs = CryptoJS.enc.Utf8.parse(word);
        var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
        return encrypted.toString();
    }

    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'slider','laydate', 'laytpl', 'colorpicker'], function(){
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var wangEditor = window.wangEditor;
        var slider = layui.slider;
        var colorpicker = layui.colorpicker;
        var wangEditorObj = {};
        var viewerObj = {};
        var areaData = {};
        var templateAreaModuleData = {};

        var bigdataTemplateAreaId = top.restAjax.params(window.location.href).bigdataTemplateAreaId;
        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        var clone = function (obj) {
            if(obj === null) return null
            if(typeof obj !== 'object') return obj;
            if(obj.constructor===Date) return new Date(obj);
            var newObj = new obj.constructor ();  //保持继承链
            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {   //不遍历其原型链上的属性
                    var val = obj[key];
                    newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除与函数名的耦合
                }
            }
            return newObj;
        }

        function checkBoxBind() {
            // data显示开关
            form.on('switch(dataSwitchRowFilter)', function (data) {
                if(data.elem.name.startsWith("data_") ) {
                    templateAreaModuleData.data[data.elem.name.replace("data_", "")] = this.checked;
                }else{
                    var keySplit = data.elem.name.split("_");
                    var index = keySplit[1];
                    if(keySplit.length == 3) {
                        // 对象
                        var keyObj = keySplit[2];
                        templateAreaModuleData.list[index][keyObj] = this.checked;
                    }else{
                        // 普通
                        templateAreaModuleData.list[index] = this.checked;
                    }
                }
                laytpl(document.getElementById('templateAreaModuleDataScript').innerHTML).render(templateAreaModuleData, function(html) {
                    document.getElementById('templateAreaModuleDataDiv').innerHTML = html;
                    form.render();
                    checkBoxBind();
                });
            });
        }

        $(document).on('input propertychange', '.title', function() {
            templateAreaModuleData.title = $(this).val();
        });

        $(document).on('input propertychange', '.dataInputRowFilter', function() {
            if($(this).attr("name").startsWith("data_") ) {
                if(/^\d+(?=\.{0,1}\d+$|$)/.test($(this).val())){
                    templateAreaModuleData.data[$(this).attr("name").replace("data_", "")] = Number($(this).val());
                }else{
                    templateAreaModuleData.data[$(this).attr("name").replace("data_", "")] = $(this).val();
                }
            }else{
                var keySplit = $(this).attr("name").split("_");
                var index = keySplit[1];
                if(keySplit.length == 3) {
                    // 对象
                    var keyObj = keySplit[2];
                    if(/^\d+(?=\.{0,1}\d+$|$)/.test($(this).val())){
                        templateAreaModuleData.list[index][keyObj] = Number($(this).val());
                    }else{
                        templateAreaModuleData.list[index][keyObj] = $(this).val();
                    }
                }else{
                    // 普通
                    if(/^\d+(?=\.{0,1}\d+$|$)/.test($(this).val())){
                        templateAreaModuleData.list[index] = Number($(this).val());
                    }else{
                        templateAreaModuleData.list[index] = $(this).val();
                    }
                }
            }
        });

        $(document).on('click', '#addRow', function() {
            var obj = templateAreaModuleData.list[templateAreaModuleData.list.length-1];
            var newObj = clone(obj);
            templateAreaModuleData.list.push(newObj);
            laytpl(document.getElementById('templateAreaModuleDataScript').innerHTML).render(templateAreaModuleData, function(html) {
                document.getElementById('templateAreaModuleDataDiv').innerHTML = html;
                form.render();
                checkBoxBind();
            });
        });

        $(document).on('click', '.removeRow', function() {
            if(templateAreaModuleData.list.length <= 1) {
                layer.msg("至少需要保留一条");
                return;
            }
            templateAreaModuleData.list.splice($(this).attr("listIndex"), 1);
            laytpl(document.getElementById('templateAreaModuleDataScript').innerHTML).render(templateAreaModuleData, function(html) {
                document.getElementById('templateAreaModuleDataDiv').innerHTML = html;
                form.render();
                checkBoxBind();
            });
        });

        $(document).on('click', '.selectColor', function() {
            selectColor(this, $(this).val())
        });

        var changeColor = function(ele) {
            if($(ele).attr("name").startsWith("data_") ) {
                if(/^\d+(?=\.{0,1}\d+$|$)/.test($(ele).val())){
                    templateAreaModuleData.data[$(ele).attr("name").replace("data_", "")] = Number($(ele).val());
                }else{
                    templateAreaModuleData.data[$(ele).attr("name").replace("data_", "")] = $(ele).val();
                }
            }else{
                var keySplit = $(ele).attr("name").split("_");
                var index = keySplit[1];
                if(keySplit.length == 3) {
                    // 对象
                    var keyObj = keySplit[2];
                    if(/^\d+(?=\.{0,1}\d+$|$)/.test($(ele).val())){
                        templateAreaModuleData.list[index][keyObj] = Number($(ele).val());
                    }else{
                        templateAreaModuleData.list[index][keyObj] = $(ele).val();
                    }
                }else{
                    // 普通
                    if(/^\d+(?=\.{0,1}\d+$|$)/.test($(ele).val())){
                        templateAreaModuleData.list[index] = Number($(ele).val());
                    }else{
                        templateAreaModuleData.list[index] = $(ele).val();
                    }
                }
            }
        }

        function selectColor(ele, color) {
            //开启全功能
            colorpicker.render({
                elem: '#test-all'
                ,color: color
                ,format: 'rgb'
                ,predefine: true
                ,alpha: true
                ,shadeClose: true
                ,done: function(color){
                    $(ele).val(color);
                    $(ele).next().css("background",color);
                    changeColor(ele);
                }
                ,change: function(color){
                    $(ele).val(color);
                    $(ele).next().css("background",color);
                    changeColor(ele);
                }
            });
            $('.layui-colorpicker').click();
        }

        $(document).on('click', '#showRemark', function() {
            layer.open({
                type: 1,
                title: areaData.bigdataModuleCode + "  " + areaData.bigdataModuleName,
                shadeClose: true,
                skin: 'layui-layer-rim', //加上边框
                area: ['95%', '50%'], //宽高
                content: '<textarea style="height:100%;width:100%">' + areaData.bigdataModuleRemark + '</textarea>'
            });
        });

        $(document).on('click', '#querySQL', function() {
            /**
             * 请求服务器, 校验
             */
            var querySql = $("#templateAreaServerData").val().trim();
            if(querySql.length < 10) {
                top.dialog.msg("语句不合法");
                return;
            }
            var loadIndex = top.layer.load(1,{shade:0.5});
            querySql = Encrypt(querySql);
            top.restAjax.get(top.restAjax.path('app/bigdatatemplate/querysqlrelease?querySql={querySql}', [querySql]), {}, null, function(code, data) {
               if(code == 200 && data) {
                   if(data.state == 200) {
                       top.dialog.msg("语句校验通过");
                   }else{
                       top.dialog.msg("语句校验未通过");
                   }
               }else{
                   top.dialog.msg("语句校验不通过");
               }
               top.layer.close(loadIndex);
            }, function(code, data) {
                top.dialog.msg(data.msg);
                top.layer.close(loadIndex);
            });

        });

        // 初始化内容
        function initData() {
            var loadLayerIndex;
            top.restAjax.get(top.restAjax.path('api/bigdatatemplatearea/getbigdatatemplateareabyid/{bigdataTemplateAreaId}', [bigdataTemplateAreaId]), {}, null, function(code, data) {
                areaData = data;
                templateAreaModuleData = eval("("+ data.templateAreaModuleData+")");
                laytpl(document.getElementById('templateAreaModuleDataScript').innerHTML).render(templateAreaModuleData, function(html) {
                    document.getElementById('templateAreaModuleDataDiv').innerHTML = html;
                    form.render();
                    checkBoxBind();
                });
                form.render(null, 'dataForm');
            }, 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);
            });
        }
        initData();

        // 提交表单
        form.on('submit(submitForm)', function(formData) {
            top.dialog.confirm(top.dataMessage.commit, function(index) {
                top.dialog.close(index);
                var loadLayerIndex;
                var fieldData = formData.field;
                var moduleMap = new Map();
                var templateAreaModuleJsonData = templateAreaModuleData;
                for(var key in fieldData) {
                    if(key == 'title') {
                        templateAreaModuleJsonData.title = fieldData[key];
                    }else if(key.startsWith("data_")) {
                        if(fieldData[key] == "true" || fieldData[key] == "false") {
                            templateAreaModuleJsonData.data[key.replace("data_", "")] = fieldData[key].indexOf("true") != -1 ? true : false;
                        } else if(/^\d+(?=\.{0,1}\d+$|$)/ .test(fieldData[key])){
                            templateAreaModuleJsonData.data[key.replace("data_", "")] = Number(fieldData[key]);
                        }else{
                            templateAreaModuleJsonData.data[key.replace("data_", "")] = fieldData[key];
                        }
                    }else if(key.startsWith("list_")) {
                        var keySplit = key.split("_");
                        var index = keySplit[1];
                        // 普通
                        if(keySplit.length == 2) {
                            if(fieldData[key] == "true" || fieldData[key] == "false") {
                                moduleMap.set(index, fieldData[key].indexOf("true") != -1 ? true : false);
                            } else if(/^\d+(?=\.{0,1}\d+$|$)/ .test(fieldData[key])){
                                moduleMap.set(index,  Number(fieldData[key]));
                            }else {
                                moduleMap.set(index, fieldData[key]);
                            }
                        }
                        // 对象
                        if(keySplit.length == 3) {
                           var obj = moduleMap.get(index);
                           if(obj) {
                               if(fieldData[key] == "true" || fieldData[key] == "false") {
                                   obj[keySplit[2]] = fieldData[key].indexOf("true") != -1 ? true : false;
                               } else if(/^\d+(?=\.{0,1}\d+$|$)/ .test(fieldData[key])){
                                   obj[keySplit[2]]  = Number(fieldData[key]);
                               } else {
                                   obj[keySplit[2]]  = fieldData[key];
                               }
                           }else {
                               obj = {};
                                var ke = keySplit[2];
                                if(fieldData[key] == "true" || fieldData[key] == "false") {
                                    obj[ke] = fieldData[key].indexOf("true") != -1 ? true : false;
                                } else if(/^\d+(?=\.{0,1}\d+$|$)/ .test(fieldData[key])){
                                    obj[ke] =  Number(fieldData[key]);
                                } else {
                                    obj[ke] = fieldData[key];
                                }
                           }
                            moduleMap.set(index, obj);
                        }
                    }
                }
                var dataList = new Array();// Array.from(moduleMap);
                var sortKey = new Array();
                moduleMap.forEach(function(value,key){
                    sortKey.push(Number(key));
                });
                sortKey.sort(function(a, b){return a - b});
                for(var i = 0 ; i < sortKey.length; i++) {
                    var data = moduleMap.get(sortKey[i] + "");
                    dataList.push(data);
                }
                templateAreaModuleJsonData.list = dataList;
                var newtTemplateAreaModuleData = JSON.stringify(templateAreaModuleJsonData).replace(/\"/g,"'");
                top.restAjax.put(top.restAjax.path('api/bigdatatemplatearea/updatebigdatatemplateareapointmoduledata/{bigdataTemplateAreaId}?templateAreaModuleData={newtTemplateAreaModuleData}', [bigdataTemplateAreaId]), newtTemplateAreaModuleData, null, function(code, data) {
                    top.dialog.close(index);
                    // window.location.reload();
                }, function(code, data) {
                    top.dialog.msg(data.msg);
                }, function() {
                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
                }, function() {
                    top.dialog.close(loadLayerIndex);
                });
            });
            return false;
        });

        $('.close').on('click', function() {
            closeBox();
        });

        // 校验
        form.verify({
        });
    });
</script>
</body>
</html>