<!doctype html>
<html 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">
    <style>
        .type1{
            background-color: rgba(153, 153, 153, 0.4);
        }
        .type2{
            background-color: rgba(255, 87, 34, 0.4);
        }
        .type3{
            background-color: rgba(95, 184, 120, 0.4);
        }
        .type4{
            background-color: rgba(30, 144, 255, 0.4);
        }
        .type5{
            background-color: rgba(250, 212, 0, 0.4);
        }
        .type6{
            background-color: #ef5619;
        }
        .type7{
            background-color: #ef9919;
        }
        #container{
            float:left;
            width:100%;
            border-right:1px dashed #000;
        }
        #rightContainer {
            border-left:1px dashed #000;
        }
        .module1:hover{
            border:2px solid  rgba(153, 153, 153, 0.7);
        }
        .module1 {
            background-color: #fff;
        }
        .mustField {
            color: red;
        }
        .clearOut {
            clear: none !important;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane" action="javascript:void(0);" lay-filter="dataForm">
    <div class="layui-row" style="height:30px;text-align: left;margin-bottom: 40px;">
        <div class="layui-col-lg12">
            <button type="button" class="saveEvent layui-btn " lay-event="saveEvent">
                <i class="fa fa-lg fa-save"></i> 保存布局配置
            </button>
            <button type="button" class="saveAndCreateEvent layui-btn " lay-event="saveAndCreateEvent">
                <i class="fa fa-lg fa-download"></i> 保存布局并生成H5自适应页面
            </button>
            <button type="button" class="saveAndCreateEvent layui-btn " lay-event="saveAndCreateEvent">
                <i class="fa fa-lg fa-download"></i> 保存布局并生成移动端页面
            </button>
        </div>
    </div>
    <div class="layui-row" >
        <div class="layui-col-lg9">
            <div class="layui-row layui-container"  id="container">
            </div>
        </div>
        <div class="layui-col-lg3" id="rightContainer">
            <div class="layui-form-item" pane >
                <input type="hidden" id="configTableFieldId" name="configTableFieldId">
            </div>
            <div class="layui-form-item" style="text-align: center;width:100% !important;font-size: 17px">
                <b>基础配置</b>
            </div>
            <div class="layui-form-item" pane >
                <label class="layui-form-label">字段列名<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" id="configTableFieldCode" readonly name="configTableFieldCode" class="layui-input" value="" placeholder="请输入字段列名"  maxlength="500">
                </div>
            </div>
            <div class="layui-form-item"  pane >
                <label class="layui-form-label">字段名称<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" id="configTableFieldName" name="configTableFieldName" class="layui-input" value="" placeholder="请输入字段名称"  maxlength="500">
                </div>
            </div>
            <div class="layui-form-item"  pane >
                <label class="layui-form-label">限制个数<span style="color: red">*</span></label>
                <div class="layui-input-block">
                    <input  type="text" value="1" id="configTableFieldNumber" name="configTableFieldNumber"  class="layui-input" readonly >
                </div>
            </div>
            <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" value="1" id="configTableFieldMust" name="configTableFieldMust" lay-filter="configTableFieldMust" lay-skin="switch" lay-text="必填|非必填">
                </div>
            </div>
            <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" value="1" id="configTableFieldDisplay" name="configTableFieldDisplay" lay-filter="configTableFieldDisplay" lay-skin="switch" lay-text="显示|不显示">
                </div>
            </div>
            <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="configTableFieldPlaceholder" name="configTableFieldPlaceholder" class="layui-input" placeholder="输入提示引导" value="" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label">默认值</label>
                <div class="layui-input-block">
                    <input type="text" id="configTableFieldDefault" name="configTableFieldDefault" class="layui-input" placeholder="请输入默认值" >
                </div>
            </div>
        <!--    <div class="layui-form-item" >
                <label class="layui-form-label">宽度</label>
                <div class="layui-collapse layui-input-block" lay-accordion id="widthChange">
                    <div class="layui-input-block">
                        <div style="margin-left:-35px;padding-top: 50px;width:100%;" id="widthChangeDiv"></div>
                    </div>
                </div>
            </div>-->
            <div class="layui-form-item" pane>
                <label class="layui-form-label">宽度比</label>
                <div class="layui-input-block">
                    <div lay-accordion class="layui-collapse" style="padding: 20px 10px 0 10px; width:100%;box-sizing: border-box" id="widthChangeDiv"></div>
                </div>
            </div>
            <!--<div class="layui-form-item" id="configTableFieldModeDiv" style="display: none;">
                <label class="layui-form-label">展示方式<span style="color: red">*</span></label>
                <div class="layui-input-block layui-form" id="configTableFieldModeSelectTemplateBox" lay-filter="configTableFieldModeSelectTemplateBox"></div>
                <script id="configTableFieldModeSelectTemplate" type="text/html">
                    <select id="configTableFieldMode" name="configTableFieldMode">
                        <option value="">请选择展示方式</option>
                        {{# for(var i = 0, item; item = d[i++];) { }}
                        <option value="{{item.dataId}}">{{item.dataName}}</option>
                        {{# } }}
                    </select>
                </script>
            </div>
            <div class="layui-form-item" id="configTableFieldDictionariesDiv" style="display: none;">
                <label class="layui-form-label">选项字典<span style="color: red">*</span></label>
                <div class="layui-input-block layui-form" id="configTableFieldDictionariesSelectTemplateBox" lay-filter="configTableFieldDictionariesSelectTemplateBox"></div>
                <script id="configTableFieldDictionariesSelectTemplate" type="text/html">
                    <select id="configTableFieldDictionaries" name="configTableFieldDictionaries">
                        <option value="">请选择选项字典</option>
                        {{# for(var i = 0, item; item = d[i++];) { }}
                        <option value="{{item.dataId}}">{{item.dataName}}</option>
                        {{# } }}
                    </select>
                </script>
            </div>-->
            <iframe src="" id="attribute" style="width: 100%;" frameborder="0" ></iframe>
        </div>
    </div>
</form>
<!--
<div class="layui-collapse" lay-accordion style="display: none" id="widthChange">
    <div class="layui-input-block">
        <div style="margin-left:-35px;padding-top: 50px;width:250px;" id="widthChangeDiv"></div>
    </div>
</div>-->

<script id="type1" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block">
                <input type="text" id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}" class="layui-input" value="" placeholder="{{ d.configTableFieldPlaceholder }}"  maxlength="500">
            </div>
        </div>
    </div>
</script>

<script id="type2" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-text layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block">
                <input type="hidden" id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}">
                <div class="layui-btn-container" id="{{ d.configTableFieldCode }}FileTemplateBox" style="border: 1px solid #e6e6e6;"></div>
            </div>
        </div>
    </div>
</script>

<script id="type3" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-text layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block">
                <input type="hidden" id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}">
                <div class="layui-btn-container" id="{{ d.configTableFieldCode }}FileTemplateBox" style="border: 1px solid #e6e6e6;"></div>
            </div>
        </div>
    </div>
</script>

<script id="type4" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-text layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block">
                <input type="hidden" id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}">
                <div class="layui-btn-container" id="{{ d.configTableFieldCode }}FileTemplateBox" style="border: 1px solid #e6e6e6;"></div>
            </div>
        </div>
    </div>
</script>

<script id="type5" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block">
                <input type="text" id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}" class="layui-input" value="" placeholder="{{ d.configTableFieldPlaceholder }}"  maxlength="500">
            </div>
        </div>
    </div>
</script>

<script id="type6" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block">
                <input type="text" id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}" class="layui-input" value="" placeholder="{{ d.configTableFieldPlaceholder }}" style="width:75%;float:left;"  maxlength="500">
                <div type="button" onclick="javascript:void(0);" class="layui-btn layui-btn-sm" style="height:36px;width:25%;">
                    <i class="fa fa-sm fa-map-marker" style="margin-top: 10px;"></i>&nbsp;地图选点
                </div>
            </div>
        </div>
    </div>
</script>

<script id="type7" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-text layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block">
                <textarea id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}" class="layui-btn-container layui-textarea" placeholder="{{ d.configTableFieldPlaceholder }}"></textarea>
            </div>
        </div>
    </div>
</script>

<script id="type8" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  pane class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block layui-form" id="{{ d.configTableFieldCode }}TemplateBox"  lay-filter="{{ d.configTableFieldCode }}TemplateBox" ></div>
        </div>
    </div>
</script>

<script id="type9" type="text/html">
    <div row-col="{{ d.configTableFieldRowCol }}"  class="{{ d.configTableFieldRow ? 'clearOut' : '' }} layui-col-lg{{ d.configTableFieldRowCol }} layui-col-md{{ d.configTableFieldRowCol }} layui-col-sm{{ d.configTableFieldRowCol }} layui-form-item module1 js_module_{{ d.configTableFieldId }}" id="{{ d.configTableFieldId }}" >
        <div class=""  pane="" >
            <label class="layui-form-label" >{{ d.configTableFieldName }}{{ d.configTableFieldMust == 1 ? '<span class="mustField">*</span>' : '' }}</label>
            <div class="layui-input-block layui-form" id="{{ d.configTableFieldCode }}TemplateBox"  lay-filter="{{ d.configTableFieldCode }}TemplateBox" ></div>
        </div>
    </div>
</script>


<!-- 文件上传 -->
<script id="fileTemplate" type="text/html">
    <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
        <a href="javascript:void(0);" lay-form-button data-explain="{{d.configTableFieldName}}" data-name="{{d.configTableFieldCode}}" lay-filter="{{d.configTableFieldCode}}UploadFile">
            <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
        </a>
    </div>
</script>
<!-- 下拉多选框 -->
<script id="multipleSelctTemplate" type="text/html">
    <select multiple="multiple" lay-search="" id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}">
        <option value="">{{ d.configTableFieldPlaceholder }}</option>
        {{# for(var i = 0, item; item = d.configTableFieldDictionariesList[i++];) { }}
        <option value="{{item.dataId}}">{{item.dataName}}</option>
        {{# } }}
    </select>
</script>
<!-- 按钮多选框 -->
<script id="multipleRadioTemplate" type="text/html">
        {{# for(var i = 0, item; item = d.configTableFieldDictionariesList[i++];) { }}
        <input type="checkbox" lay-verify="required" name="{{ d.configTableFieldCode }}[{{item.dataId}}]" value="{{ item.dataId }}"  title="{{item.dataName}}">
        {{# } }}
</script>
<!-- 下拉单选框 -->
<script id="singleSelctTemplate" type="text/html">
    <select lay-search="" id="{{ d.configTableFieldCode }}" name="{{ d.configTableFieldCode }}">
        <option value="">{{ d.configTableFieldPlaceholder }}</option>
        {{# for(var i = 0, item; item = d.configTableFieldDictionariesList[i++];) { }}
        <option value="{{item.dataId}}">{{item.dataName}}</option>
        {{# } }}
    </select>
</script>
<!-- 按钮单选框 -->
<script id="singleRadioTemplate" type="text/html">
    {{# for(var i = 0, item; item = d.configTableFieldDictionariesList[i++];) { }}
        <input type="radio" lay-verify="required" name="{{ d.configTableFieldCode }}" value="{{ item.dataId }}"  title="{{item.dataName}}">
    {{# } }}
</script>

<script src="assets/layuiadmin/layui/layui.js"></script>
<script  type="text/javascript" src="assets/js/vendor/ueditor/third-party/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/sortable/moduleSet.js"></script>
<script type="text/javascript" src="assets/js/vendor/sortable/Sortable.min.js"></script>
<script>

    /*  var configArray = [{id:'',type:'', baseConfig:{name:'姓名',code:'name'},customConfig:{}}];*/
    var configMap = new Map();

    initMap();
    //初始化配置
    function initMap(id, value){
        configMap.set(id,value);
    }

    //根据id获取基础配置
    function getMapBaseConfig(id){
        return configMap.get(id).baseConfig;
    }
    //根据id获取扩展配置
    function getMapCustomData(id){
        return configMap.get(id).customConfig;
    }


    //根据id获取配置
    function getMapById(id){
        return configMap.get(id);
    }

    //设置扩展属性
    function setMapCustomData(id,key,value){
        configMap.get(id).customConfig[key] = value;
    }

    //设置基础属性
    function setMapBaseData(id,key,value){
        configMap.get(id).baseConfig[key] = value;
    }

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

        var height = $win.height() - 60
        //iframe height
        document.getElementById("attribute").height = height;

        // 通过ID获取某个字段对象
        function getField(fieldId) {
            for(var i = 0 ; i < fieldList.length ; i++ ) {
                if(fieldId == fieldList[i].configTableFieldId) {
                    return fieldList[i];
                }
            }
        }

        function closeBox() {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        }

        $('.saveEvent').on('click', function () {
            $("#container .module1").each(function(v, e) {
                /**
                 * 保存宽度比 / 保存排序 / 保存行
                 */
                setMapBaseData(e.id, "configTableFieldRowCol",  $(e).attr("row-col"));
                setMapBaseData(e.id, "configTableFieldOrder",  v + 1);
                setMapBaseData(e.id, "configTableFieldRow",  $(e).hasClass("clearOut"));
            });
            var requestArray = new Array();
            configMap.forEach(function(value,key){
                if(value) {
                    requestArray.push(value);
                }
            });
            var fieldConfig = {"configArray" : requestArray};
            var loadLayerIndex;
            top.restAjax.put(top.restAjax.path('api/configtablefield/updateorder/{configTableId}/{createPage}', [configTableId, 'notCreate']), fieldConfig, null, function(code, data) {
                top.layer.msg("保存布局设置成功");
            }, 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);
            });
        });

        $('.saveAndCreateEvent').on('click', function () {
            $("#container .module1").each(function(v, e) {
                /**
                 * 保存宽度比 / 保存排序 / 保存行
                 */
                setMapBaseData(e.id, "configTableFieldRowCol",  $(e).attr("row-col"));
                setMapBaseData(e.id, "configTableFieldOrder",  v + 1);
                setMapBaseData(e.id, "configTableFieldRow",  $(e).hasClass("clearOut"));
            });
            var requestArray = new Array();
            configMap.forEach(function(value,key){
                if(value) {
                    requestArray.push(value);
                }
            });
            var fieldConfig = {"configArray" : requestArray};
            var loadLayerIndex;
            top.restAjax.put(top.restAjax.path('api/configtablefield/updateorder/{configTableId}/{createPage}', [configTableId, 'createH5']), fieldConfig, null, function(code, data) {
                top.layer.msg("保存布局并生成静态文件成功");
            }, 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);
            });
        });

        // 改变宽度
        function widthChange(data) {
            slider.render({
                elem: '#widthChangeDiv'
                ,setTips: function(value){ //自定义提示文本
                    return value ;
                },
                value:$("#" + data.configTableFieldId).attr("row-col"),
                min:1,
                max:12,
                change: function(value){
                    if($("#" + data.configTableFieldId).hasClass("layui-form-text")) {
                        $("#" + data.configTableFieldId).attr("class", "layui-form-text layui-form-item module1 js_module_" + data.configTableFieldId);
                    }else{
                        $("#" + data.configTableFieldId).attr("class", "layui-form-item module1 js_module_" + data.configTableFieldId);
                    }
                    $("#" + data.configTableFieldId).addClass("layui-col-lg" + value);
                    $("#" + data.configTableFieldId).addClass("layui-col-md" + value);
                    $("#" + data.configTableFieldId).addClass("layui-col-sm" + value);
                    $("#" + data.configTableFieldId).attr("row-col", value + "");
                }
            });
        }

        // 初始化文件上传
        function initFile(data) {
            var template = "fileTemplate";
            laytpl(document.getElementById(template).innerHTML).render(data, function (html) {
                document.getElementById(data.configTableFieldCode + 'FileTemplateBox').innerHTML = html;
            });
            form.render(null, "dataForm");
        }

        // 初始化数据字典下拉框
        function initDictionaries(data) {
            // 单选下拉框
            var template = "";
            if (data.configTableFieldMode == "7cfb8eb5-6faf-40c3-9fe2-3e2583847d83") {
                template = "singleSelctTemplate";
            // 单选按钮
            } else if (data.configTableFieldMode == "cd22f984-07e8-4031-aed3-1145c0333e31") {
                template = "singleRadioTemplate";
            // 多选按钮
            } else if (data.configTableFieldMode == "8f191d76-0c5f-4d2e-8463-3d591a0d0cbb") {
                template = "multipleRadioTemplate";
            // 多选下拉
            } else if (data.configTableFieldMode == "c6e000cd-9800-4802-93d5-38921bfa8a86") {
                template = "multipleSelctTemplate";
            }
            // 加载数据字典数据
            top.restAjax.get(top.restAjax.path('api/data/listbyparentid/' + data.configTableFieldDictionaries, []), {}, data, function (code, data, args) {
                args.configTableFieldDictionariesList = data;
                laytpl(document.getElementById(template).innerHTML).render(args, function (html) {
                    document.getElementById(args.configTableFieldCode + 'TemplateBox').innerHTML = html;
                });
                form.render(null, "dataForm");
            }, function (code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 创建字段区域块
        function createDiv(data) {
            var type = data.configTableFieldType;
            laytpl(document.getElementById("type" + type ).innerHTML).render(data, function (html) {
                $("#container").append(html);
            });
            // 绑定调整和合并按钮
            $(".js_module_" + data.configTableFieldId).moduleSet({
                background:'rgba(0, 0, 0, 0.7)',
                button:[
                    /*{text:'调整', value:data.configTableFieldId, callback:function(data){
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            area: ["400px" , "100px"],
                            shadeClose: true,
                            anim: 2,
                            content: $("#widthChange"),
                            end: function() {
                            },success:function() {
                                widthChange(getField(data.value));
                            }
                        });
                    },iconfont:'fa-arrows-h'},*/
                    {text:'合并', value:data.configTableFieldId, callback:function(data){
                        // 开启合并
                        if(!$("#" + data.value).hasClass("clearOut")) {
                            // 判断上一行是否能放得下
                            var prevArray = $("#" + data.value).prevAll(".module1");
                            if(prevArray.length < 1) {
                                top.layer.msg("当前是第一个");
                                return;
                            }
                            var rowColSize = Number($("#" + data.value).attr("row-col"));
                            for(var i = 0 ; i < prevArray.length; i++) {
                                var rowCol = Number($(prevArray[i]).attr("row-col"));
                                rowColSize = rowColSize + rowCol;
                                if(!$(prevArray[i]).hasClass("clearOut")) {
                                    break;
                                }
                            }
                            if(rowColSize > 12) {
                                top.layer.msg("宽度超出无法合并");
                                return;
                            }
                        }
                        $("#" + data.value).toggleClass("clearOut");
                    },iconfont:'fa-cube'}
                ],
            });
            // 数据字典初始化
            if(type == 8 || type == 9 ) {
                initDictionaries(data);
            }
            // 文件上传初始化
            if(type == 2 || type == 3 || type == 4 ) {
                initFile(data);
            }
        }

        // 初始化内容
        function initData() {
            var loadLayerIndex;
            top.restAjax.get(top.restAjax.path('api/configtablefield/list?configTableId={configTableId}', [configTableId]), {}, null, function(code, data) {
                // $("#container").empty();
                fieldList = data;
                for(var i = 0; i < data.length; i++) {
                   createDiv(data[i]);
                   var initData = {
                       baseConfig:{
                           configTableFieldCode:data[i].configTableFieldCode,
                           configTableFieldName:data[i].configTableFieldName,
                           configTableFieldMust:data[i].configTableFieldMust,
                           configTableFieldPlaceholder:data[i].configTableFieldPlaceholder,
                           configTableFieldDefault:data[i].configTableFieldDefault,
                           configTableFieldId:data[i].configTableFieldId,
                           configTableFieldDisplay:data[i].configTableFieldDisplay,
                           configTableFieldType:data[i].configTableFieldType,
                           configTableFieldNumber:data[i].configTableFieldNumber
                       },
                       customConfig: data[i].configTableFieldConfig ? eval('(' + data[i].configTableFieldConfig + ')') : {}
                   };
                   initMap(data[i].configTableFieldId, initData);
                }
                // 排序
                var container = document.getElementById("container");
                var sort = Sortable.create(container, {
                    animation: 250, // ms, animation speed moving items when sorting, `0` — without animation
                    handle: ".module1", // Restricts sort start click/touch to the specified element
                    draggable: ".module1", // Specifies which items inside the element should be sortable
                    onUpdate: function (evt){
                        //console.log(evt);
                        //console.log(evt.item);
                        //console.log(evt.nextSibling);
                    },
                    onChoose: function (evt) {
                        setFieldAttributeHtml(evt.item.id)
                        // 初始化基础数据
                        var dataFormData = getMapBaseConfig(evt.item.id);
                        dataFormData.configTableFieldMust  = dataFormData.configTableFieldMust == 1 ?  true : false;
                        dataFormData.configTableFieldDisplay = dataFormData.configTableFieldDisplay == 1 ?  true : false;
                        widthChange(getField(evt.item.id));
                        form.val('dataForm', getMapBaseConfig(evt.item.id));
                        form.render(null, 'dataForm');
                    },
                });
                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();

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

        form.on('switch(configTableFieldDisplay)', function(obj){
            var value = obj.elem.checked ? "1" : "0";
            var configTableFieldId = $("#configTableFieldId").val();
            if(configTableFieldId) {
                setMapBaseData($("#configTableFieldId").val(), "configTableFieldDisplay" , value);
            }
        });

        form.on('switch(configTableFieldMust)', function(obj){
            var value = obj.elem.checked ? "1" : "0";
            var configTableFieldId = $("#configTableFieldId").val();
            if(configTableFieldId) {
                setMapBaseData($("#configTableFieldId").val(), "configTableFieldMust" , value);
                var configTableFieldName = getMapBaseConfig(configTableFieldId).configTableFieldName;
                $("#" + configTableFieldId + " label:first-child").html(configTableFieldName + (value == 1 ? '<span class="mustField">*</span>' : ''));
            }
        });

        $('#configTableFieldName').bind('input propertychange', function(e) {
            var value = $(this).val();
            var configTableFieldId = $("#configTableFieldId").val();
            if(configTableFieldId) {
                setMapBaseData($("#configTableFieldId").val(), "configTableFieldName" , value);
                var configTableFieldMust = getMapBaseConfig(configTableFieldId).configTableFieldMust;
                $("#" + configTableFieldId + " label:first-child").html(value + (configTableFieldMust == 1 ? '<span class="mustField">*</span>' : ''));
            }
        });

        $('#configTableFieldPlaceholder').bind('input propertychange', function(e) {
            var value = $(this).val();
            var configTableFieldId = $("#configTableFieldId").val();
            if(configTableFieldId) {
                setMapBaseData($("#configTableFieldId").val(), "configTableFieldPlaceholder" , value);
                var configTableFieldCode = getMapBaseConfig(configTableFieldId).configTableFieldCode;
                $("#" + configTableFieldCode).attr("placeholder", value);
            }
        });

        $('#configTableFieldDefault').bind('input propertychange', function(e) {
            var value = $(this).val();
            var configTableFieldId = $("#configTableFieldId").val();
            if(configTableFieldId) {
                setMapBaseData($("#configTableFieldId").val(), "configTableFieldDefault" , value);
            }
        });




        function setFieldAttributeHtml(id){
            var baseConfig = getMapBaseConfig(id);
            if(typeof(baseConfig) != "undefined" || baseConfig != null || baseConfig != ''){
               var type =  baseConfig['configTableFieldType'];
                if(type === '2' || type === '3' || type === '4'){
                    var path  =  top.restAjax.path('route/configtable/field-file?id={id}', [id,'file'])
                    $('#attribute').attr('src',path)

                }else if(type === '8' || type === '9'){
                    var path  =  top.restAjax.path('route/configtable/field-select?id={id}', [id,'select'])
                    $('#attribute').attr('src',path)
                }else{
                    $('#attribute').attr('src','');
                }
            }


        }

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