<div>
    <div class="modal fade bs-example-modal-lg" id="id_table_model" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">详情/编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                    <div class="row">
                        <form id="id_table_model_form">
                        <#list Model.inputBlocks as block>
                    <#if block.blockType =="InputBlock">
                    <div class="col-lg-6" style="display:${block.show};padding-top: 10px">
                        <div class="input-group">
                            <span class="input-group-addon">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </span>
                            <input type="text" value="${block.value!}" name="${block.name!}" class="form-control" id="${block.id!}"
                                   placeholder="${block.placeholder!}"
                                   maxlength="${block.maxlength!}"
                                   onkeyup="this.value=this.value.replace(${block.limit!},'')"
                                   <#if block.disabled!="">
                                        readOnly
                                    </#if>

                            >
                        </div>
                    </div>
                    <#elseif block.blockType =="DateBlock">
                    <div class="col-lg-6" style="padding-top: 10px">
                        <div class="input-group">
                            <span class="input-group-addon">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </span>
                            <input type="text" class="form-control" value="${block.value!}" name="${block.name!}"  id="${block.id!}" placeholder="${block.placeholder!}"
                                <#if block.disabled!="">
                                    disabled
                                </#if>
                            >
                        </div>
                    </div>
                    <script>
                        laydate.render({
                            elem: '#${block.id!}',
                            type:'${block.type}',
                            calendar: true
                        });
                    </script>
                    <#elseif block.blockType=="TextBlock">
                    <div class="col-lg-12" style="display:${block.show};padding-top: 10px">
                        <div class="input-group">
                            <span class="input-group-addon">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </span>
                            <textarea value="${block.value!}" name="${block.name!}" class="form-control" id="${block.id!}" placeholder="${block.placeholder!}" maxlength="${block.maxlength?c}"
                                <#if block.disabled!="">
                                    readOnly
                                </#if>
                            ></textarea>
                        </div>
                    </div>
                    <#elseif block.blockType=="SelectBlock">
                    <div class="col-lg-6" style="display:${block.show};padding-top: 10px">
                        <div class="input-group">
                            <span class="input-group-addon">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </span>
                            <#if block.selectType=="select">
                            <select id="${block.id!}" class="form-control" name="${block.name!}" ${block.disabled}>
                                <option value="" selected="selected">未选择</option>
                                <#list block.options as option>
                                    <option value="${option.key}">${option.value!}</option>
                                </#list>
                            </select>
                            <#elseif block.disabled=="disabled">
                                <input type="hidden" id="shows_${block.id!}" value="${block.toShowNameStr()}">
                                <input type="hidden" id="${block.id!}" value="${block.value!}">
                                <input type="text" value="" name="${block.name!}" class="form-control" id="text_${block.id!}"
                                       placeholder="${block.placeholder!}"
                                       maxlength="${block.maxlength!}"
                                       onkeyup="this.value=this.value.replace(${block.limit!},'')"
                                        <#if block.disabled!="">readOnly</#if>
                                >
                                <script>
                                    $("#${block.id!}").bind("input propertychange",function(e,keyId){
                                        //console.log(keyId);
                                        if(keyId==null){checkLoading();return;}
                                        $.ajax({
                                            data:{keyTableName:"${block.keyTableName!}",id:keyId},
                                            type: 'post',
                                            url: "${ctx}/block/select/search/back/id",
                                            success: function (data) {
                                                //console.log(data);
                                                if (data.status!=200){checkLoading();return;}
                                                let showStr="";
                                                let showsArry=$("#shows_${block.id!}").val().split(",");
                                                for (let i=0,size=showsArry.length;i<size;i++){
                                                    showStr=showStr+data.body[showsArry[i]];
                                                }
                                                //console.log(showStr)
                                                $("#text_${block.id!}").val(showStr);
                                                checkLoading();
                                            }
                                        });
                                    });
                                </script>

                                <#else>
                                <select id="${block.id!}" class="form-control selectpicker" data-live-search="true" ${block.disabled}></select>
                                <input type="hidden" id="shows_${block.id!}" value="${block.toShowNameStr()}">
                                <script>
                                    $("#${block.id!}").on('shown.bs.select',function(e){
                                    let dataJson = jQuery.parseJSON('${block.toJsonStr()}');
                                    dataJson.searchKey=$("#searchInput_${block.id!}").val();
                                    //没有下拉选择项触发自动搜索
                                    if($("#${block.id!} option").length<=10){
                                        $.ajax({
                                            data:JSON.stringify(dataJson),
                                            type: 'post',
                                            url: "${ctx}/block/select/search",
                                            dataType:'json',
                                            contentType:'application/json;charset=UTF-8',
                                            success: function (data) {
                                                if (data.status!=200){
                                                    lightyear.notify("系统繁忙，请尝试重新登陆。", 'danger');
                                                    return;
                                                }
                                                let showsArry=$("#shows_${block.id!}").val().split(",");
                                                let lastVal=$("#${block.id!}").val();
                                                $("#${block.id!}").empty();
                                                if (data.body.length>0){
                                                    $("#${block.id!}").append('<option value="" selected="selected">未选择</option>');
                                                    $.each(data.body, function (i, item) {
                                                        let showStr="";
                                                        for (let i=0,size=showsArry.length;i<size;i++){
                                                            showStr=showStr+item[showsArry[i]];
                                                        }
                                                        let tempId = '<option  value="' + item.id + '">' +showStr + '</option>';
                                                        $("#${block.id!}").append(tempId);
                                                        if(lastVal==item.id){
                                                            $('#${block.id!}').selectpicker('val', [item.id,showStr]);
                                                        }
                                                    });
                                                }
                                                $('#${block.id!}').selectpicker('refresh');
                                            }
                                        });
                                    }
                                    $("#${block.id!}").next().next().find('input').attr('id',"searchInput_${block.id!}").bind('input propertychange',function(){
                                        setTimeout(function () {
                                            dataJson.searchKey = $("#searchInput_${block.id!}").val();
                                            $.ajax({
                                                data:JSON.stringify(dataJson),
                                                type: 'post',
                                                url: "${ctx}/block/select/search",
                                                dataType:'json',
                                                contentType:'application/json;charset=UTF-8',
                                                success: function (data) {
                                                    if (data.status!=200){
                                                        lightyear.notify("系统繁忙，请尝试重新登陆。", 'danger');
                                                        return;
                                                    }
                                                    let showsArry=$("#shows_${block.id!}").val().split(",");
                                                    $("#${block.id!}").empty();
                                                    if (data.body.length>0){
                                                        $("#${block.id!}").append('<option value="" selected="selected">未选择</option>');
                                                        $.each(data.body, function (i, item) {
                                                            let showStr="";
                                                            for (let i=0,size=showsArry.length;i<size;i++){
                                                                showStr=showStr+item[showsArry[i]];
                                                            }
                                                            let tempId = '<option  value="' + item.id + '">' +showStr + '</option>';
                                                            $("#${block.id!}").append(tempId);
                                                        });
                                                    }
                                                    $('#${block.id!}').selectpicker('refresh');
                                                }
                                            });
                                        },2000);

                                    });
                                });
                                    $("#${block.id!}").bind("input propertychange",function(e,keyId){
                                    if(keyId==null){
                                        console.log("外键没有值，结束。");
                                        $('#${block.id!}').selectpicker('refresh');
                                        //加载动画检查
                                        checkLoading();
                                        return;
                                    }
                                    $.ajax({
                                        data:{keyTableName:"${block.keyTableName!}",id:keyId},
                                        type: 'post',
                                        url: "${ctx}/block/select/search/back/id",
                                        success: function (data) {
                                            if (data.status!=200){
                                                $('#${block.id!}').selectpicker('refresh');
                                                //加载动画检查
                                                checkLoading();
                                                return;
                                            }
                                            $("#${block.id!}").html("");
                                            let showStr="";
                                            let showsArry=$("#shows_${block.id!}").val().split(",");
                                            for (let i=0,size=showsArry.length;i<size;i++){
                                                //console.log(showsArry[i]);
                                                showStr=showStr+data.body[showsArry[i]];
                                            }
                                            let tempId = '<option  value="' + data.body.id + '">' +showStr + '</option>';
                                            console.log(tempId);
                                            $("#${block.id!}").append(tempId);
                                            $('#${block.id!}').selectpicker('refresh');
                                            //加载动画检查
                                            checkLoading();
                                            //console.log("剩余执行数量：",modelAjaxCount);
                                        }
                                    });
                                });
                                </script>
                            </#if>
                        </div>
                    </div>
                <#elseif block.blockType=="FileBlock">
                <div class="col-lg-12" style="display:${block.show};padding-top: 10px">
                    <div class="input-group">
                        <span class="input-group-addon">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                        </span>
                        <input type="hidden" id="${block.id!}" name="${block.name!}" value="${block.value!}">
                        <input id="tmp_${block.id!}" type="file" class="filepond" name="files" multiple data-max-file-size="5MB" data-max-files="15">
                        <script>
                            ${block.id!}_pond=FilePond.create(document.querySelector("#tmp_${block.id!}"), {
                                labelIdle: "请上传小于5M的文件，点击上传，或拖动文件到此处,最多支持15个文件。",
                            });
                            /**
                             * 插件上传文件监听
                             * */
                            ${block.id!}_pond.on('processfile', function(error, file){
                                //console.log(file)
                                if (error){
                                    lightyear.notify("文件上传失败，请检查网络连接。", 'danger');
                                    return;
                                }
                                else{
                                    $("#${block.id!}").val($("#${block.id!}").val()+file.serverId+";");
                                    lightyear.notify("上传成功!", 'success');
                                    return;
                                }
                            });
                            /**
                             * 文件点击监听
                             * 放大打开新页面
                             * **/
                            ${block.id!}_pond.on('activatefile', function(file){
                                window.open("https://oss.bhynm.com/"+file.source);
                            });
                            /**
                             * 输入框监听事件
                             */
                            $("#${block.id!}").bind("input propertychange",function() {
                                let urls = $("#${block.id!}").val().split(";");
                                ${block.id!}_pond.files=null;
                                let files = [];
                                //console.log(urls);
                                for (let i = 0; i < urls.length; i++) {
                                    if (urls[i]=="")continue;
                                    files.push({
                                        source:urls[i].replace("https://oss.bhynm.com/",""),
                                        options: {
                                            type: 'local'
                                        }
                                    })
                                }
                                ${block.id!}_pond.addFiles(files);
                            });
                        </script>
                    </div>
                </div>
                <#elseif block.blockType=="AddressBlock">
                <div class="col-lg-12" style="display:${block.show};padding-top: 10px">
                    <div class="input-group">
                        <span class="input-group-addon">${block.title!}
                            <#if block.required>
                                <span style="color: red">*</span>
                             </#if>
                        </span>
                        <input id="${block.id!}" type="hidden">
                        <input type="text" value="${block.value!}"
                               name="${block.name!}"
                               data-provide="typeahead"
                               class="form-control typeahead" autocomplete="off" spellcheck="false"
                               id="${block.id!}_show"
                               placeholder="${block.placeholder!}"
                               maxlength="${block.maxlength!}"
                        <#if block.disabled!="">
                            readOnly
                        </#if>
                        >
                        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                    </div>
                </div>
                <script>
                    $(document).ready(function(){
                        //加载高德输入提示插件
                        AMap.plugin('AMap.Autocomplete', function(){
                            let autoComplete= new AMap.Autocomplete();
                            $("#${block.id!}_show").typeahead({
                                //设置输入提示数据源
                                source: function(query, process) {
                                    if(document.activeElement!=document.getElementById('${block.id!}_show')){
                                        return;
                                    }
                                    let locationStr=$("#${block.id!}").val();
                                    if(locationStr){
                                        let address=JSON.parse(locationStr).address;
                                        if(address.length>query.length){
                                            console.log("地址：",address);
                                            $("#${block.id!}").val("");
                                            return ;
                                        }
                                        //如输入地址中不包含pio地址，清除定位信息
                                        if(query.indexOf(address)<0){
                                            $("#${block.id!}").val("");
                                        }
                                    }
                                    return autoComplete.search(query, function(status, result) {
                                        if("complete"!=status){
                                            return;
                                        }
                                        //格式化返回数据
                                        return process(result.tips);
                                    });
                                },
                                //搜索匹配规则，在这里直接返回true，展示高德查询到的所有数据
                                matcher:function(item){
                                    return true;
                                },
                                //格式化输入数据源
                                displayText:function(item){
                                    return item.district+item.name;
                                },
                                //选择选中项目触发
                                updater:function(item){
                                    //使用高德pio构建地址对象
                                    let pio={};
                                    pio.location={};
                                    pio.address=item.district+item.name;
                                    pio.location=item.location;
                                    //设置到hidden输入框
                                    $("#${block.id!}").val( JSON.stringify(pio));
                                    return item.district+item.name;
                                },
                                //延迟查询
                                delay:300
                            });
                        });
                        //绑定地址输入框焦点丢失事件
                        $("#${block.id!}_show").blur(function(){
                            let pioStr=$("#${block.id!}").val();
                            let inputStr=$("#${block.id!}_show").val();
                            //输入为空，则删除位置信息
                            if(!inputStr){
                                $("#${block.id!}").val("");
                                return;
                            }
                            let pio={}
                            if(!pioStr){
                                pio.address=inputStr;
                            }
                            else{
                                pio=JSON.parse(pioStr);
                                pio.address=inputStr;
                            }
                            $("#${block.id!}").val(JSON.stringify(pio));
                        });
                    });
                </script>
                    <#else>
                </#if>
            </#list>
                </form>
            </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button id="table_model_edit_submit_id" type="button" data-loading-text="处理中..." class="btn btn-primary" onclick="okSend()">确认提交</button>
        </div>
</div>
</div>
</div>