<!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">
    <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
    <style>
        .layui-form-select dl{
            z-index: 99999 !important;
        }
    </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="configTableId" name="configTableId"/>
                <div class="layui-form-item" id="actionDiv" style="display:none; text-align: center;width:100% !important;font-size: 17px">
                    <b> 激活后可以修改 字段名称、字段排序、是否必填、列表显示、提示引导、默认值、字段描述。</b></br>
                    <b>不支持修改 列名、字段类型、存储限制数量。</b>
                </div>
                <div class="layui-form-item layui-row" >
                    <div class="layui-col-md6 layui-col-lg6" >
                        <label class="layui-form-label">列名<span style="color: red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" id="configTableFieldCode" name="configTableFieldCode" class="layui-input" value="" placeholder="请输入列名例如 name、age、sex"  maxlength="50">
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-lg6" >
                        <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="50">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">字段类型<span style="color: red">*</span></label>
                    <div class="layui-input-block layui-form" >
                        <input type="radio" name="configTableFieldType" checked value="1" title="文字" lay-filter="configTableFieldTypeFilter">
                        <input type="radio" name="configTableFieldType" value="2" title="照片" lay-filter="configTableFieldTypeFilter">
                        <input type="radio" name="configTableFieldType" value="3" title="音频" lay-filter="configTableFieldTypeFilter">
                        <input type="radio" name="configTableFieldType" value="4" title="视频" lay-filter="configTableFieldTypeFilter">
                        <input type="radio" name="configTableFieldType" value="5" title="链接" lay-filter="configTableFieldTypeFilter">
                        <input type="radio" name="configTableFieldType" value="6" title="定位" lay-filter="configTableFieldTypeFilter">
                        <input type="radio" name="configTableFieldType" value="7" title="文章" lay-filter="configTableFieldTypeFilter">
                        <input type="radio" name="configTableFieldType" value="8" title="单选" lay-filter="configTableFieldTypeFilter">
                        <input type="radio" name="configTableFieldType" value="9" title="多选" lay-filter="configTableFieldTypeFilter">
                    </div>
                </div>
                <div class="layui-form-item layui-row" >
                    <div class="layui-col-md6 layui-col-lg6" >
                        <label class="layui-form-label">字段排序<span style="color: red">*</span></label>
                        <div class="layui-input-block">
                            <input type="number" id="configTableFieldOrder" name="configTableFieldOrder" class="layui-input" value="1" placeholder="请输入字段排序" lay-verify="required">
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-lg6" >
                        <label class="layui-form-label">存储限制<span style="color: red">*</span></label>
                        <div class="layui-input-block">
                            <input type="number" id="configTableFieldNumber" name="configTableFieldNumber" class="layui-input" value="1" placeholder="请输入允许存储数量" lay-verify="required">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row" pane>
                    <div class="layui-col-md6 layui-col-lg6" >
                        <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" checked lay-skin="switch" lay-text="必填|非必填">
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-lg6" >
                        <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" checked lay-skin="switch" lay-text="显示|不显示">
                        </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>
                <div class="layui-form-item layui-row" pane>
                    <div class="layui-col-md6 layui-col-lg6" >
                        <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-col-md6 layui-col-lg6">
                        <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>
                <div class="layui-form-item">
                    <label class="layui-form-label">字段描述</label>
                    <div class="layui-input-block layui-text">
                        <input type="text" id="configTableFieldRemark" name="configTableFieldRemark" class="layui-input" value="" placeholder="请输入字段描述"  maxlength="50">
                    </div>
                </div>
                <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>
                        </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>
    layui.config({
        base: 'assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'laydate', 'laytpl'], function(){
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var configTableFieldId = top.restAjax.params(window.location.href).configTableFieldId;

        var wangEditor = window.wangEditor;
        var wangEditorObj = {};
        var viewerObj = {};

        // 每种展示方式的数据字典父节点ID
        var typeMode = {"照片" : "879bd85d-2c3d-4ab3-b2bc-ceefb53955e5" ,
            "音频" : "b2120dae-d605-47fd-a396-53fe5824f6de" ,
            "视频" : "f5368346-035a-42b5-a790-c648580a737b" ,
            "定位" : "c91b2d31-0a12-4b06-8fa7-f20d59d6b8f7" ,
            "单选" : "8b53eba7-3020-4cc3-ad6d-9a9ea104e628" ,
            "多选" : "a14634d2-5af7-49c1-99f6-ca3e5f5b25a2"};
        form.on('radio(configTableFieldTypeFilter)', function (data) {
            $("#configTableFieldModeDiv").hide();
            $("#configTableFieldDictionariesDiv").hide();
            $("#configTableFieldMode").empty();
            $("#configTableFieldDictionaries").empty();
            // 图片/音频/视频/定位制定展示方式
            if(typeMode[data.elem.title]) {
                initConfigTableFieldMode(typeMode[data.elem.title]);
                $("#configTableFieldModeDiv").show();
            }
            // 单选/多选制定选项字典
            if(data.value == 8 || data.value == 9) {
                initConfigTableFieldDictionaries();
                $("#configTableFieldDictionariesDiv").show();
            }
        });

        // 初始化展示方式
        function initConfigTableFieldMode(parentId, configTableFieldMode) {
            top.restAjax.get(top.restAjax.path('api/data/listbyparentid/' + parentId, []), {}, null, function(code, data, args) {
                laytpl(document.getElementById('configTableFieldModeSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('configTableFieldModeSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'configTableFieldModeSelectTemplateBox');

                var selectObj = {};
                selectObj['configTableFieldMode'] = configTableFieldMode;
                form.val('dataForm', selectObj);
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

        // 初始化选项字典
        function initConfigTableFieldDictionaries(configTableFieldDictionaries) {
            top.restAjax.get(top.restAjax.path('api/data/listallbyparentid/4139b571-af9b-4ad2-8a62-e13a4af81201', []), {}, null, function(code, data, args) {
                for (var i = 0 ; i < data.length; i++) {
                    var subData = data[i].subData;
                    var subStr = "";
                    for (var j = 0 ; j < subData.length; j++) {
                        if(subStr.length < 1) {
                            subStr = subStr + subData[j].dataName;
                        }else{
                            subStr = subStr + "&nbsp;&nbsp;/&nbsp;&nbsp;" + subData[j].dataName;
                        }
                    }
                    data[i].dataName = " 【 " + data[i].dataName + " 】"+ "&nbsp;&nbsp;" + subData.length + "个选项&nbsp;&nbsp;:&nbsp;&nbsp;" + (subStr.length > 1 ? subStr : '暂无' );
                }
                laytpl(document.getElementById('configTableFieldDictionariesSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('configTableFieldDictionariesSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'configTableFieldDictionariesSelectTemplateBox');

                var selectObj = {};
                selectObj['configTableFieldDictionaries'] = configTableFieldDictionaries;
                form.val('dataForm', selectObj);
            }, function(code, data) {
                top.dialog.msg(data.msg);
            });
        }

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

        // 初始化内容
        function initData() {
            var loadLayerIndex;
            top.restAjax.get(top.restAjax.path('api/configtablefield/get/{configTableFieldId}', [configTableFieldId]), {}, null, function(code, data) {
                var dataFormData = {};
                for(var i in data) {
                    dataFormData[i] = data[i] +'';
                }
                dataFormData.configTableFieldMust  = dataFormData.configTableFieldMust == 1 ?  true : false;
                top.restAjax.get(top.restAjax.path('api/configtable/get/{configTableId}', [dataFormData.configTableId]), {}, dataFormData, function(code, data, dataFormData) {
                    if(data.configTableActivation == 1) {
                        // $("#configTableFieldCode").attr("readonly", "readonly");
                        // $("#configTableFieldNumber").attr("readonly", "readonly");
                        $("#actionDiv").show();
                    }
                    var typeModeData = {"2" : "879bd85d-2c3d-4ab3-b2bc-ceefb53955e5" ,
                        "3" : "b2120dae-d605-47fd-a396-53fe5824f6de" ,
                        "4" : "f5368346-035a-42b5-a790-c648580a737b" ,
                        "6" : "c91b2d31-0a12-4b06-8fa7-f20d59d6b8f7" ,
                        "8" : "8b53eba7-3020-4cc3-ad6d-9a9ea104e628" ,
                        "9" : "a14634d2-5af7-49c1-99f6-ca3e5f5b25a2"} ;
                    console.log(dataFormData);
                    // 图片/音频/视频/定位制定展示方式
                    if(typeModeData[dataFormData.configTableFieldType +""]) {
                        initConfigTableFieldMode(typeModeData[dataFormData.configTableFieldType +""], dataFormData.configTableFieldMode);
                        $("#configTableFieldModeDiv").show();
                    }
                    // 单选/多选制定选项字典
                    if(dataFormData.configTableFieldType == 8 || dataFormData.configTableFieldType == 9) {
                        initConfigTableFieldDictionaries(dataFormData.configTableFieldDictionaries);
                        $("#configTableFieldDictionariesDiv").show();
                    }
                    form.val('dataForm', dataFormData);
                    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);
                });
            }, 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;
                console.log(formData.field['configTableFieldMust']);
                console.log(formData.field['configTableFieldDisplay']);
                formData.field['configTableFieldMust'] = formData.field['configTableFieldMust'] == "1" ? "1" : "0";
                formData.field['configTableFieldDisplay'] = formData.field['configTableFieldDisplay'] == "1" ? "1" : "0";
                top.restAjax.put(top.restAjax.path('api/configtablefield/update/{configTableFieldId}', [configTableFieldId]), formData.field, null, function(code, data) {
                    var layerIndex = top.dialog.msg(top.dataMessage.updateSuccess, {
                        time: 0,
                        btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
                        shade: 0.3,
                        yes: function(index) {
                            top.dialog.close(index);
                            window.location.reload();
                        },
                        btn2: function() {
                            closeBox();
                        }
                    });
                }, 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>