<div>
    <div class="modal fade" id="id_table_model_new" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="static">
        <div class="modal-dialog" 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="sdada">添加</h4>
                </div>
                <div class="modal-body">
                    <form id="id_table_model_form_new">
                        <#list pageTemplate.tableModel.addBlocks as block>
                        <#if block.blockType =="InputBlock">
                        <div class="form-group" style="display:${block.show};">
                            <label class="control-label">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </label>
                            <input type="text" value="${block.value!}" name="${block.name!}" class="form-control" id="${block.id!}_new"
                                   placeholder="${block.placeholder!}"
                                   maxlength="${block.maxlength!}"
                                   onkeyup="this.value=this.value.replace(${block.limit!},'')"
                                   ${block.disabled} >
                        </div>
                        <#elseif block.blockType =="DateBlock">
                        <div class="form-group" style="display:${block.show};">
                            <label class="control-label">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </label>
                            <input type="text" class="form-control" value="${block.value!}" name="${block.name!}"  id="${block.id!}_new" placeholder="${block.placeholder!}">
                        </div>
                        <script>
                            laydate.render({
                                elem: '#${block.id!}_new',
                                type:'${block.type}',
                                calendar: true
                            });
                        </script>
                        <#elseif block.blockType=="TextBlock">
                        <div class="form-group" style="display:${block.show};">
                            <label class="control-label">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </label>
                            <textarea value="${block.value!}" name="${block.name!}" class="form-control" id="${block.id!}_new" placeholder="${block.placeholder!}" maxlength="${block.maxlength?c}" ></textarea>
                        </div>
                        <#elseif block.blockType=="SelectBlock">

                        <div class="form-group" style="display:${block.show};">
                            <label class="control-label">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </label>
                            <#if block.selectType=="select">
                            <select id="${block.id!}_new" class="form-control" name="${block.name!}">
                                <option value="" selected="selected">未选择</option>
                                <#list block.options as option>
                                <option value="${option.key}">${option.value!}</option>
                            </#list>
                            </select>
                            <#else>
                            <select id="${block.id!}_new" class="form-control selectpicker" data-live-search="true">
                                <option value="" selected="selected">未选择</option>
                            </select>
                            <input type="hidden" id="shows_${block.id!}_new" value="${block.toShowNameStr()}">
                            <script>
                                $("#${block.id!}_new").on('shown.bs.select',function(e){
                                    let dataJson = jQuery.parseJSON('${block.toJsonStr()}');
                                    dataJson.searchKey=$("#searchInput_${block.id!}_new").val();
                                    //没有下拉选择项触发自动搜索
                                    if($("#${block.id!}_new option").length<=1){
                                        $.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!}_new").val().split(",");
                                                $("#${block.id!}_new").empty();
                                                if (data.body.length>0){
                                                    $("#${block.id!}_new").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!}_new").append(tempId);
                                                    });
                                                }
                                                $('#${block.id!}_new').selectpicker('refresh');
                                            }
                                        });
                                    }
                                    //上次搜索记录
                                    let lastInput;
                                    $("#${block.id!}_new").next().next().find('input').attr('id',"searchInput_${block.id!}_new").bind('input propertychange',function(){
                                        setTimeout(function () {
                                            //重复搜索，直接return
                                            if (lastInput==$("#searchInput_${block.id!}_new").val()){
                                                return;
                                            }
                                            lastInput=$("#searchInput_${block.id!}_new").val()
                                            dataJson.searchKey=lastInput;
                                            $.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!}_new").val().split(",");
                                                    $("#${block.id!}_new").empty();
                                                    if (data.body.length>0){
                                                        $("#${block.id!}_new").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!}_new").append(tempId);
                                                        });
                                                    }
                                                    $('#${block.id!}_new').selectpicker('refresh');
                                                }
                                            });
                                        },2000);

                                    });
                                });
                                //输入事件监听
                                $("#${block.id!}_new").bind("input propertychange",function(e,keyId){
                                    if(keyId==null){
                                        console.log("外键没有值，结束。");
                                        return;
                                    }
                                    $.ajax({
                                        data:{keyTableName:"${block.keyTableName!}",id:keyId},
                                        type: 'post',
                                        url: "${ctx}/block/select/search/back/id",
                                        success: function (data) {
                                            if (data.status!=200){
                                                lightyear.notify("系统繁忙，请尝试重新登陆。", 'danger');
                                                return;
                                            }
                                            let showStr="";
                                            let showsArry=$("#shows_${block.id!}_new").val().split(",");
                                            //$("#${block.id!}_new").append('<option value="" selected="selected">未选择</option>');
                                            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>';
                                            $("#${block.id!}_new").append(tempId);
                                            $('#${block.id!}_new').selectpicker('refresh');
                                        }
                                    });
                                });
                            </script>
                        </#if>
                </div>
                <#elseif block.blockType=="FileBlock">
                <div class="form-group" style="display:${block.show};">
                    <label class="control-label">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </label>
                    <input type="hidden" id="${block.id!}_new" name="${block.name!}" value="${block.value!}">
                    <input id="tmp_${block.id!}_new" type="file" class="filepond" name="files" multiple data-max-file-size="5MB" data-max-files="15">
                    <script>
                        ${block.id!}_new_pond=FilePond.create(document.querySelector("#tmp_${block.id!}_new"), {
                            labelIdle: "请上传小于5M的文件，点击上传，或拖动文件到此处,最多支持15个文件。",
                        });
                        /**
                         * 插件上传文件监听
                         * */
                        ${block.id!}_new_pond.on('processfile', function(error, file){
                            //console.log(file)
                            if (error){
                                lightyear.notify("文件上传失败，请检查网络连接。", 'danger');
                                return;
                            }
                            else{
                                $("#${block.id!}_new").val($("#${block.id!}_new").val()+file.serverId+";");
                                lightyear.notify("上传成功!", 'success');
                                return;
                            }
                        });
                        /**
                         * 插件文件删除监听
                         * **/
                        ${block.id!}_new_pond.on('removefile', function(error, file){
                            if (error){
                                lightyear.notify("文件删除失败，请检查网络连接。", 'danger');
                                return;
                            }
                            else{
                                $("#${block.id!}_new").val($("#${block.id!}_new").val().replace("http://oss.bhynm.net/"+file.source+";",""));
                            }
                            console.log(file);
                        });
                    </script>
                </div>
                <#elseif block.blockType=="AddressBlock">
                <div class="form-group" style="display:${block.show};">
                    <label class="control-label">${block.title!}
                                <#if block.required>
                                    <span style="color: red">*</span>
                                </#if>
                            </label>
                    <input type="hidden" id="${block.id!}_new">
                    <input type="text" value="${block.value!}"
                           name="${block.name!}"
                           class="form-control typeahead"
                           id="${block.id!}_new_show" autocomplete="off" spellcheck="false"
                           placeholder="${block.placeholder!}"
                           maxlength="${block.maxlength!}"
                           ${block.disabled} >
                    <div  style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                </div>
                <script>
                    $(document).ready(function(){
                        //加载高德输入提示插件
                        AMap.plugin('AMap.Autocomplete', function(){
                            let autoComplete= new AMap.Autocomplete({});
                            $("#${block.id!}_new_show").typeahead({
                                //设置输入提示数据源
                                source: function(query, process) {
                                    let locationStr=$("#${block.id!}_new").val();
                                    if(locationStr){
                                        let address=JSON.parse(locationStr).address;
                                        if(address.length>query.length){
                                            $("#${block.id!}_new").val("");
                                            return ;
                                        }
                                        //如输入地址中不包含pio地址，清除定位信息
                                        if(query.indexOf(address)<0){
                                            $("#${block.id!}_new").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!}_new").val( JSON.stringify(pio));
                                    return item.district+item.name;
                                },
                                //延迟查询
                                delay:300
                            });
                        });
                        //失去焦点时候更新地址
                        $("#${block.id!}_new_show").blur(function(){
                            let pioStr=$("#${block.id!}_new").val();
                            let inputStr=$("#${block.id!}_new_show").val();
                            //输入为空，则删除位置信息
                            if(!inputStr){
                                $("#${block.id!}_new").val("");
                                return;
                            }
                            let pio={}
                            if(!pioStr){
                                pio.address=inputStr;
                            }
                            else{
                                pio=JSON.parse(pioStr);
                                pio.address=inputStr;
                            }
                            $("#${block.id!}_new").val(JSON.stringify(pio));
                        });
                    });
                </script>
                <#else>
            </#if>
        </#list>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button id="table_model_new_submit_id" type="button" data-loading-text="处理中..." class="btn btn-primary" onclick="okSend('new')">确认提交</button>
    </div>
</div>
</div>
</div>
</div>
</div>
<#include "/include/table/table-model-key.html">