{extend name="layout:main" /}

{block name="main"}
<script src="__LIB__/jquery/jquery-1.11.0.min.js"></script>

<div class="layui-tab layui-tab-brief" lay-filter="tabBrief">
    {notempty name="tab_nav"}
    <ul class="layui-tab-title" style="margin-bottom: 15px;">
        {foreach $tab_nav['tab_list'] as $k => $vo}
        <li class='{if condition="$k eq $tab_nav.current_tab"} layui-this {/if}' >
            <a href="{$vo['href']}">{$vo['title']}</a>
        </li>
        {/foreach}
    </ul>
    {/notempty}
    <div class="layui-tab-content">
        <form class="layui-form" action="{$post_url ?? ''}" id="ajax-form" method="post">

            {if condition="!empty($tip)"}
            <blockquote class="layui-elem-quote">{$tip|raw}</blockquote>
            {/if}

            <input type="hidden" id="__token__" name="__token__" value="{:token()}" />

            {foreach $form_items as $k => $form}
            {switch name="form.type"}
            {case value="textwithemoji"}{include file="builder/formtype/textwithemoji" /}{/case}
            {case value="import_file"}{include file="builder/formtype/import_file" /}{/case}
            {case value="choose_media_multi"}{include file="builder/formtype/choose_media_multi" /}{/case}
            {case value="choose_picture"}{include file="builder/formtype/choose_picture" /}{/case}
            {case value="video_detail"}{include file="builder/formtype/video_detail" /}{/case}
            {case value="file_detail"}{include file="builder/formtype/file_detail" /}{/case}
            {case value="picture_detail"}{include file="builder/formtype/picture_detail" /}{/case}
            {case value="datetime_range"}{include file="builder/formtype/datetime_range" /}{/case}
            {case value="map_qq"}{include file="builder/formtype/map_qq" /}{/case}
            {case value="layarea"}{include file="builder/formtype/layarea" /}{/case}
            {case value="file_to_root"}{include file="builder/formtype/file_to_root" /}{/case}
            {case value="ueditor"}{include file="builder/formtype/ueditor" /}{/case}
            {case value="static"}{include file="builder/formtype/static" /}{/case}
            {case value="chosen_multi"}{include file="builder/formtype/chosen_multi" /}{/case}
            {case value="chosen"}{include file="builder/formtype/chosen" /}{/case}
            {case value="time"}{include file="builder/formtype/time" /}{/case}
            {case value="date"}{include file="builder/formtype/date" /}{/case}
            {case value="datetime"}{include file="builder/formtype/datetime" /}{/case}
            {case value="toggle_radio"}{include file="builder/formtype/toggle_radio" /}{/case}
            {case value="legend"}{include file="builder/formtype/legend" /}{/case}
            {case value="media_text"}{include file="builder/formtype/media_text" /}{/case}
            {case value="choose_media"}{include file="builder/formtype/choose_media" /}{/case}
            {case value="media_image"}{include file="builder/formtype/media_image" /}{/case}
            {case value="picture_url"}{include file="builder/formtype/picture_url" /}{/case}
            {case value="pictures_url"}{include file="builder/formtype/pictures_url" /}{/case}
            {case value="linkage"}{include file="builder/formtype/linkage" /}{/case}
            {case value="textarea"}{include file="builder/formtype/textarea" /}{/case}
            {case value="select"}{include file="builder/formtype/select" /}{/case}
            {case value="radio"}{include file="builder/formtype/radio" /}{/case}
            {case value="hidden"}{include file="builder/formtype/hidden" /}{/case}
            {case value="icon"}{include file="builder/formtype/icon" /}{/case}
            {default /}{include file="builder/formtype/text" /}
            {/switch}
            {/foreach}

        <div id="form-btn-group">
            {if $btn_submit['show']}
            <button class="layui-btn layui-btn-normal" type="submit">{$btn_submit['text']}</button>
            {/if}
            {if $btn_reset['show']}
            <button type="reset" class="layui-btn layui-btn-primary">{$btn_reset['text']}</button>
            {/if}
        </div>

        </form>
    </div>
</div>

<script src="__LIB__/jq-module/jquery-validation/jquery.validate.js"></script>
<script src="__LIB__/jq-module/jquery-validation/localization/messages_zh.js"></script>

<script>
    layui.use(['form','miniTab'], function(){
        var form = layui.form
        ,miniTab = layui.miniTab;

        var parent_index = parent.layer.getFrameIndex(window.name);

        //刷新界面 所有元素
        form.render();

        var loading_index;

        //增加扩展规则
        $.validator.addMethod("phone", function(value) {
            if(value.length){
                const pattern = /^1[2-9]\d{9}$/;
                return pattern.test(value);
            }
            return true;
        }, '手机号码格式错误');

        /**
         * 添加、修改的表单提交
         * @param form
         */
        $('#ajax-form').validate({
            errorClass: 'error-msg',
            submitHandler: function(form) {  //通过之后回调
                var param = $(form).serialize();
                $.ajax({
                    url : $(form).attr('action'),
                    method: 'post',
                    data: param,
                    beforeSend: function(){
                        loading_index = layer.load(1);
                    },
                    success : function(res) {
                        if(res.code === 1 ) {
                            layer.msg(res.msg, {time: 1500}, function(){
                                if(res.url === '/undefined'){
                                    if(parent_index){ //表单页为内页的情况
                                        parent.layer.close(parent_index);
                                        parent.location.reload();
                                    }else{
                                        miniTab.deleteCurrentByIframe();
                                    }
                                }else if(res.url.indexOf('/index/index') !== -1){
                                    top.location.href = res.url;
                                }else if(res.url){
                                    location.href = res.url;
                                }
                            });
                        } else{
                            $('#__token__').val(res.data.token);
                            layer.alert(res.msg);
                        }
                    },
                    error: function(request, textStatus){
                        layer.msg('500 Internal Server Error');
                    },
                    complete: function(){
                        layer.close(loading_index);
                    }
                });
            },
            invalidHandler: function(form, validator) {  //不通过回调
                return false;
            },
            //必要的话重写showErrors
            /*showErrors: function (errorMap, errorList) {
                $.each(errorList, function (i, v) {
                    layer.tips(v.message, v.element, { time: 2000 });
                    return false;
                });
            },
            // 失去焦点时不验证
            onfocusout: false*/
        });
    });
</script>

{/block}