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

{% render _xnote_form.action_bar %}

<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}}">
                {% render row %}
            </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>
            {% if _xnote_form.delete_url %}
            <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>
            {% end %}
        </div>
    </div>
    {% end %}
</div>

<script>
    // 表单图片/文件上传组件的前端逻辑（与评论、随手记上传交互一致）
    if (!xnote.formUpload) {
        xnote.formUpload = {
            pick: function (pickerId) {
                $(pickerId).click();
            },
            addItem: function (rowEl, webpath, kind) {
                var name = webpath.split("/").pop();
                var $row = $(rowEl);
                var $list = $row.find(".form-upload-preview");
                if (kind == "image") {
                    var div = $("<div>").addClass("form-upload-thumb").attr("data-src", webpath);
                    var img = $("<img>").attr("src", webpath + "?mode=thumbnail").attr("data-src", webpath);
                    var del = $("<a>").addClass("form-upload-del")
                        .attr("onclick", "xnote.formUpload.removeItem(this)").text("删除");
                    div.append(img).append(del);
                    $list.append(div);
                } else {
                    var div = $("<div>").addClass("form-upload-file").attr("data-src", webpath);
                    var link = $("<a>").attr("href", webpath).attr("target", "_blank").text(name);
                    var del = $("<a>").addClass("form-upload-del")
                        .attr("onclick", "xnote.formUpload.removeItem(this)").text("删除");
                    div.append(link).append(del);
                    $list.append(div);
                }
                xnote.formUpload.syncValue($row);
            },
            removeItem: function (target) {
                var $item = $(target).closest("[data-src]");
                var $row = $item.closest(".form-upload-row");
                $item.remove();
                xnote.formUpload.syncValue($row);
            },
            syncValue: function ($row) {
                var values = [];
                // 只统计每个附件的容器节点（.form-upload-thumb / .form-upload-file），
                // 其内部 <img> 也带 data-src，若一并统计会导致同一附件被重复计数
                $row.find(".form-upload-thumb, .form-upload-file").each(function (index, ele) {
                    values.push($(ele).attr("data-src"));
                });
                $row.find("input[type=hidden][name]").val(values.join(","));
            }
        };
    }

    // 初始化表单内的图片/文件上传组件（依赖 WebUploader，按需动态加载）
    function initFormUploaders() {
        $("#xnoteForm{{_xnote_form.id}} .form-upload-row").each(function () {
            var $row = $(this);
            var kind = $row.attr("data-upload-kind");
            var picker = $row.attr("data-picker");
            xnote.createUploaderEx({
                fileSelector: picker,
                chunked: false,
                successFn: function (resp) {
                    xnote.formUpload.addItem($row, resp.webpath, kind);
                },
                fixOrientation: true,
                fileName: "auto"
            });
        });
    }

    // WebUploader 未随全局打包加载时（如弹窗表单），动态引入后再初始化
    function ensureWebUploader(callback) {
        if (typeof WebUploader !== "undefined") {
            callback();
            return;
        }
        // 避免同一页面多个表单重复加载脚本
        if (xnote._webuploader_loading) {
            var timer = setInterval(function () {
                if (typeof WebUploader !== "undefined") {
                    clearInterval(timer);
                    callback();
                }
            }, 50);
            return;
        }
        xnote._webuploader_loading = true;

        var serverHome = xnote.config.serverHome;
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = serverHome + "/_static/lib/webuploader/webuploader.css";
        document.head.appendChild(link);

        var script = document.createElement("script");
        script.src = serverHome + "/_static/lib/webuploader/webuploader.nolog.min.js";
        script.onload = function () {
            xnote._webuploader_loading = false;
            callback();
        };
        script.onerror = function () {
            xnote._webuploader_loading = false;
            xnote.alert("上传组件加载失败");
        };
        document.head.appendChild(script);
    }

    // 刷新默认值
    $(function() {
        xnote.refresh();
        ensureWebUploader(initFormUploaders);
    });
    // 自动调整textarea的高度（随输入内容变化）
    xnote.layout.initAutoResizeTextarea("#xnoteForm{{_xnote_form.id}} textarea");

    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) {
                        if (resp.redirect_url == "internal://back") {
                            history.back();
                        } else {
                            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组件
    if (xnote.initSelect2) {
        xnote.initSelect2();
    }

    // 初始化tag风格选择器
    if (xnote.initTagSelect) {
        xnote.initTagSelect();
    }

    // 初始化开关组件
    if (xnote.initSwitch) {
        xnote.initSwitch();
    }
</script>