{% extends "framework/base.html" %}

{% block header %}
    <title>{{ _('${model_desc} 编辑') }}</title>
{% endblock %}


{% block content %}
    <div id="vue-container" v-cloak>
        <div class="row header">
            <div class="col-sm-5">
                <h1>{{ _('${model_desc}') }}
                    <small>{{ _('编辑') }}</small>
                </h1>
            </div>
        </div>

        <hr>
        <br>

        <form class="form-horizontal"
              role="form">
            <div class="row edit-form-container">
                <div class="col-sm-12">
                % for f in fields:
                <%include file="model_field.htm" args="f=f"/>
                % endfor
                </div>
            </div>


            <div class="row pane edit-save-bar">
                <div class="col-sm-offset-3 col-sm-9">
                    <input id="reset-btn" class="btn btn-default" type="reset" value="{{ _('重 置') }}">
                    <button @click="saveModel(true)" :disabled="isExecuting" class="btn btn-primary " type="button">
                        {{ _('保 存') }}
                    </button>

                    <div class="pull-right">
                        <button @click="saveModel(false)" :disabled="isExecuting" class="btn btn-info " type="button">
                            {{ _('保存并继续编辑') }}
                        </button>
                        <button @click="saveModelAddOther" :disabled="isExecuting" class="btn btn-info " type="button">
                            {{ _('保存并增加另一个') }}
                        </button>
                    </div>
                </div>
            </div>


        </form>
    </div>
    <script>
        var modelData = Object({{ data|json_dumps|safe }}) || Object(${ model(id=1).to_json() })
        
        var modelShema = Object({{ data.serializer.to_schema()|json_dumps|safe }})


        var vue_app = new Vue({
            el: '#vue-container',
            delimiters: ['((', '))'],
            data() {
                return {
                    model: modelData,
                    isExecuting: false,
                };
            },
            watch: {},
            methods: {
                ajaxPostData: function (post_data, callback) {
                    clearHelpText()
                    this.isExecuting = true
                    $.ajax({
                        async: true,
                        type: "POST",
                        url: "{{ url('${app_name}.${model_lower_name}.save') }}?{% if data.id %}id={{ data.id }}{% endif %}{% if request.query_params.is_copy %}&is_copy=1{% endif %}",
                        dataType: 'json',
                        data: JSON.stringify(post_data),
                        contentType: 'application/json',
                        success: (rsp) => {
                            if (rsp.code == 0) {
                                this.$message.success(rsp.msg, 1)
                                clearHelpText()
                                callback ? callback(rsp) : null

                            } else {
                                rsp.data ? addHelpText(rsp.data) : alertMsg(rsp.msg)
                            }
                        },
                        error: (jqXHR, statusText, errorMsg) => {
                            ajaxError(jqXHR, statusText, errorMsg)

                        },
                        complete: (jqXHR, statusText) => {
                            this.isExecuting = false
                        }

                    })
                },
                saveModel: function (isCloseDialog) {
                    this.ajaxPostData(this.model, (rsp) => {
                        if (rsp.code == 0) {
                            this.model = rsp.data
                            refreshParentTable()
                            customDispatchEvent('saveModel',this.model,true)
                            if (isCloseDialog) closeSelfDialog()
                        }
                    })
                },
                saveModelAddOther: function () {
                    this.ajaxPostData(this.model, (rsp) => {
                        if (rsp.code == 0) {
                            window.location.href = window.location.pathname
                        }
                    })
                },

            },
            mounted: function () {


            }
        })


    </script>
{% endblock %}
