{% init xnote_form_var = "form" %}
{% set _xnote_form = globals()[xnote_form_var] %}

<div class="form-body {{_xnote_form.form_type_css}}">
    <form id="xnoteForm{{_xnote_form.id}}" class="x-form" method="{{_xnote_form.form_method}}">
        {% for row in _xnote_form.rows %}
            <div class="form-row {{row.css_class}}">
                {% if row.title %}
                    <label>{{row.title}}</label>
                {% end %}
                {% if row.type == "input" %}
                    <input type="text" name="{{row.field}}" class="form-row-value" placeholder="{{row.placeholder}}" value="{{row.value}}" {% raw row.html_attr %}>
                {% end %}
                {% if row.type == "textarea" %}
                    <textarea name="{{row.field}}" class="form-row-value" placeholder="{{row.placeholder}}" {% raw row.html_attr %}>{{row.value}}</textarea>
                {% end %}
                {% if row.type == "select" %}
                    {% render row %}
                {% end %}
                {% if row.type == "date" %}
                    <input id="{{row.id}}" name="{{row.field}}" class="form-row-value form-date" data-date-type="{{row.date_type}}" 
                        placeholder="{{row.placeholder}}" value="{{row.value}}" autocomplete="off">
                {% end %}
                {% if row.type == "html" %}
                    {% raw row.html %}
                {% end %}
            </div>
        {% end %}
    </form>
</div>

<div class="form-footer {{_xnote_form.form_type_css}}">
    {% if _xnote_form.footer_html %}
        {% raw _xnote_form.footer_html %}
    {% elif _xnote_form.is_edit_form %}
    <div class="{{_xnote_form.footer_btn_group_css}}">
        <button class="btn large {{_xnote_form.save_btn_css}}" onclick="xnote.submitFormSave(this)" data-form-id="xnoteForm{{_xnote_form.id}}">保存</button>
        <button class="btn large btn-default {{_xnote_form.close_btn_css}}" onclick="xnote.dialog.closeByElement(this)" data-form-id="xnoteForm{{_xnote_form.id}}">关闭</button>
    </div>
    {% elif _xnote_form.is_query_form %}
        <button type="button" class="btn" onclick="xnote.submitFormQuery(this)" data-form-id="xnoteForm{{_xnote_form.id}}">查询数据</button>
        <a class="btn btn-default" href="?">重置查询</a>
    {% elif _xnote_form.is_page_edit_form %}
    <div class="form-row {{_xnote_form.footer_btn_group_css}}">
        <label>&nbsp;</label>
        <div class="form-row-value">
            <button class="btn large {{_xnote_form.save_btn_css}}" onclick="xnote.submitFormSave(this)" data-form-id="xnoteForm{{_xnote_form.id}}">保存</button>
            <button class="btn large btn-default {{_xnote_form.delete_btn_css}}" 
                data-message="{{_xnote_form.delete_confirm_msg}}"
                data-url="{{_xnote_form.delete_url}}"
                onclick="xnote.submitFormDelete(this)" data-form-id="xnoteForm{{_xnote_form.id}}">删除</button>
        </div>
    </div>
    {% end %}
</div>

<script>
    // 刷新默认值
    $(function() {
        xnote.refresh();
    });
    // 自动计算textarea的高度
    $(".x-form textarea").each(function (index, elem) {
        var height = xnote.layout.getTextareaTextHeight(elem);
        height = Math.min(height + 100, 200);
        $(elem).height(height);
    });

    xnote.submitFormSave = function(target) {
        var request = {};
        var formId = $(target).attr("data-form-id");
        var data = $("#"+formId).formData();
        request.data = JSON.stringify(data);
        console.log("request:", request);
    
        xnote.http.post("{{_xnote_form.path}}?model={{_xnote_form.model_name}}&action={{_xnote_form.save_action}}", request, function (resp) {
            if (resp.success) {
                xnote.toast("保存成功");
                setTimeout(function() {
                    if (resp.redirect_url) {
                        window.location.href = resp.redirect_url;
                    } else {
                        window.location.reload();
                    }
                }, 500);
            } else {
                xnote.toast(resp.message);
            }
        });
    };

    xnote.submitFormDelete = function(target) {
        var request = {};
        var formId = $(target).attr("data-form-id");
        var confirmMsg = $(target).attr("data-message");
        var data = $("#"+formId).formData();
        request.data = JSON.stringify(data);
        console.log("request:", request);
        var deletePostURL = $(target).attr("data-url");

        if (deletePostURL == "") {
            xnote.alert("delete_url is empty");
            return;
        }

        var callback = function() {
            xnote.http.post(deletePostURL, request, function (resp) {
                if (resp.success) {
                    xnote.toast("删除成功");
                    setTimeout(function() {
                        window.location.href = "{{_xnote_form.delete_reload_href}}";
                    }, 500);
                } else {
                    xnote.toast(resp.message);
                }
            });
        }

        xnote.confirm(confirmMsg, callback);
    };

    // 别名
    xnote.handleFormSubmit = xnote.submitFormSave;

    xnote.submitFormQuery = function(target) {
        var formId = $(target).attr("data-form-id");
        $("#" + formId).submit();
    }

    $(".form-date").click(function(event) {
        var elem = event.target;
        if ($(elem).attr("data-laydate-bind")) {
            return;
        }

        laydate.render({
            elem: elem,
            type: $(elem).attr("data-date-type"),
            change: function(value, date, endDate) {
                // 数据变化就更新
                $(elem).val(value);
                // 自动关闭日期选择器
                $(elem).remove(".layui-date");
            },
            show: true
        });
        
        $(elem).attr("data-laydate-bind", true);
    });

    // 初始化select2组件
    xnote.initSelect2();
</script>