<!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>
        .showButton{
            background-color: #5FB878;
        }


    </style>

</head>
<body onbeforeunload="goodbye()">





    <form class="layui-form layui-form-pane" lay-filter="dataForm">
       <!-- <div class="layui-form-item" style="text-align: center;width:100% !important;font-size: 17px">
            <b>附加配置</b>
        </div>-->
        <fieldset class="layui-elem-field layui-field-title site-title">
            <legend style="margin-left: 209px;padding: 0 23px;" font-size: 18px;><a name="method">选项</a></legend>
        </fieldset>
        <div class="layui-form-item" style="margin-left: 20px;margin-top: 5px">
            <label class="layui-form-label">数据类型</label>
            <div class="layui-input-block">
                <div class="layui-btn-group buttonDiv"  style="margin-top: 5px;">
                    <button type="button" class="layui-btn layui-btn-sm showButton" data-value="1">自定义</button>
                    <button type="button" class="layui-btn layui-btn-sm" data-value="2">数据字典</button>
                    <button type="button" class="layui-btn layui-btn-sm" data-value="3">接口数据</button>
                </div>
            </div>
        </div>
        <hr class="layui-border-blue">

        <div class="layui-form-item" id="dataValue1">
            <div class="layui-row" id="optionDataDiv">

            </div>
            <div class="layui-row" style="margin-left: 20px;margin-top: 15px">
                <a id="addOption" style="color: #2e6da4;cursor: pointer"> <i class="fa fa-lg fa-plus-circle"></i>&nbsp;添加选项 </a>
            </div>
        </div>

        <div class="layui-form-item" id="dataValue2">
            <div class="layui-row" >
                <div class="layui-row" style="margin-left: 20px;margin-top: 5px">
                    <div class="layui-col-md6 layui-col-lg6" >
                        <label class="layui-form-label">数据字典</label>
                        <div class="layui-input-block layui-form" id="dataDictIdSelectTemplateBox" lay-filter="dataDictIdSelectTemplateBox"></div>
                        <script id="dataDictIdSelectTemplate" type="text/html">
                            <select id="dataDictId" name="dataDictId">
                                <option value="">请选择数据字典</option>
                                {{# for(var i = 0, item; item = d[i++];) { }}
                                <option value="{{item.dataId}}">{{item.dataName}}</option>
                                {{# } }}
                            </select>
                        </script>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item" id="dataValue3">
            <div class="layui-row" >
                <div class="layui-row" style="margin-left: 20px;margin-top: 5px">
                    <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="optionPath" name="optionPath" class="layui-input" value="" placeholder="请输入列名例如 name、age、sex"  maxlength="50">
                        </div>
                    </div>
                </div>
            </div>
        </div>








    </form>



<script type="text/html" id="optionTemplate">
    <div class="layui-row" style="margin-left: 20px;margin-top: 5px">
        <div class="layui-col-xs5">
            <input type="text" name="optionKey" class="layui-input" value="[optionKeyValue]" placeholder="选项名">
        </div>
        <div class="layui-col-xs5">
            <input type="text" name="optionValue" class="layui-input" value="[optionValueValue]" placeholder="选项值">
        </div>
        <div class="layui-col-xs2">
            <button type="button" class="layui-btn layui-btn-primary optionRemove"><i class="layui-icon"></i></button>
        </div>
    </div>
</script>


<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', 'table','element'], function(){
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var element = layui.element
        var id = top.restAjax.params(window.location.href).id;


        // 初始化数据字典下拉选择
        function initDataDictIdSelect(selectValue) {
            top.restAjax.get(top.restAjax.path('api/data/listbyparentid/0', []), {}, null, function(code, data, args) {
                laytpl(document.getElementById('dataDictIdSelectTemplate').innerHTML).render(data, function(html) {
                    document.getElementById('dataDictIdSelectTemplateBox').innerHTML = html;
                });
                form.render('select', 'dataDictIdSelectTemplateBox');

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

       /* $('.attr').change(function () {

        })*/


        //数据类型
        $('.buttonDiv .layui-btn').on('click', function(){
            $('.buttonDiv .layui-btn').removeClass('showButton')
            $(this).addClass('showButton')
            var optionType = $(this).attr("data-value");

            if(optionType === '1'){
                $("#dataValue1").show();
                $("#dataValue2").hide()
                $("#dataValue3").hide()
            }
            if(optionType === '2'){
                $("#dataValue1").hide();
                $("#dataValue2").show()
                $("#dataValue3").hide()
            }
            if(optionType === '3'){
                $("#dataValue1").hide()
                $("#dataValue2").hide()
                $("#dataValue3").show()
            }
        });



        //填加选项
        $("#addOption").on('click',function(){
            optionTemplate();
        });

        function optionTemplate(optionData){
            var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
            var  template = document.getElementById("optionTemplate").innerHTML;
            var html = template.replace(reg, function (node, key) {
                if(typeof(optionData) == "undefined"){
                    return { 'optionKeyValue': '选项一', 'optionValueValue': '1'}[key];
                }else{
                    return { 'optionKeyValue': optionData.optionKey, 'optionValueValue': optionData.optionValue}[key];
                }
            });
            $("#optionDataDiv").append(html)
        }



        //删除选项
        $(document).on('click','.optionRemove',function () {
            $(this).parent().parent().remove()
        })


        //获取选项数据
        function getOptionData(){
            var option = {};
            var type = $(".buttonDiv .showButton").attr('data-value');
            option['type'] = type;
            option['data'] = '';
            if(type === '1'){
                var data = []
                $($("#optionDataDiv .layui-row")).each(function (i,e) {
                    var optionData = {}
                    $($(e).find("input")).each(function (i,e) {
                        var name = e.name;
                        if(name === 'optionKey'){
                            optionData['optionKey']  = e.value
                        }
                        if(name === 'optionValue'){
                            optionData['optionValue']  = e.value
                        }
                    });
                    data.push(optionData)
                })
                option['data'] = data
            }
            if(type === '2'){
                option['data'] = $("#dataDictId").val()
            }
            if(type === '3'){
                option['data'] = $("#optionPath").val()
            }
            return option
        }




        // 初始化内容
        initData();
        function initData() {
            var custom = window.parent.getMapCustomData(id);
            console.log(custom)
            var optionData = custom.optionData;
            if(optionData == undefined){
                $("#dataValue2").hide()
                $("#dataValue3").hide()
                initDataDictIdSelect("");
            } else {
                var optionType = optionData.type;
                if(optionType === '1'){
                    $("#dataValue1").show();
                    $("#dataValue2").hide()
                    $("#dataValue3").hide()
                    $(optionData.data).each(function (i,e) {
                        optionTemplate(e);
                    })
                }
                if(optionType === '2'){
                    $("#dataValue1").hide();
                    $("#dataValue2").show()
                    $("#dataValue3").hide()
                    initDataDictIdSelect(optionData.data)
                }
                if(optionType === '3'){
                    $("#dataValue1").hide()
                    $("#dataValue2").hide()
                    $("#dataValue3").show()
                    $("#optionPath").val(optionData.data)
                }

            }
        }


        function saveConfig(){
            window.parent.setMapCustomData(id,'optionData',getOptionData());
        }







        // 校验
        form.verify({

        });


        window.onbeforeunload=function(e){
            saveConfig();
        }

    })

</script>



</body>
</html>