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

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


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

        <hr>
        <br>

        <form class="form-horizontal"role="form">
            <div class="row edit-form-container">
                <div class="col-sm-12">
                <br>
                


        <div class="form-group" style="display:none">
            <label class="col-sm-3 control-label no-padding-right" for="id_id">
                
                {{ _('ID') }} </label>

            <div class="col-sm-8">
                 <input type="number" id="id_id" name="id" v-model="model.id"
                        class="form-control" value="{{ data.id or ""}}"
                        
                         >
                <div id="help_text_id" class="middle text-danger help_text"></div>
            </div>
        </div>
                


        <div class="form-group" style="">
            <label class="col-sm-3 control-label no-padding-right" for="id_clocked_time">
                <span class="text-danger">*</span>
                {{ _('Clock Time') }} </label>

            <div class="col-sm-8">
                    <input type="text" id="id_clocked_time" name="clocked_time" v-model="model.clocked_time"
                           class="form-control datetime " value="{{ data.clocked_time  or "" }}"
                           required=true >
                <span class="help-block">{{ _('Run the task at clocked time') }}</span>
                <div id="help_text_clocked_time" class="middle text-danger help_text"></div>
            </div>
        </div>
                </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({"id": 1, "clocked_time": null})
        
        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('celery_task.clocked_schedule.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 %}