{{{ template "common/header" . }}}
<div class="ui grid">
    {{{template "task/menu" .}}}
    <div class="twelve wide column">
        <div class="pageHeader">
            <div class="segment">
                <h3 class="ui dividing header">
                    <div class="content">
                        {{{.Title}}}
                    </div>
                </h3>
            </div>
        </div>
    <form class="ui form fluid vertical segment">
        <input type="hidden" name="id" value="{{{.Task.Id}}}">
        <div class="two fields">
            <div class="field">
                <label>
                    <div class="content">任务名称</div>
                </label>
                <div class="ui small input">
                    <input type="text" name="name" placeholder="任务名称" value="{{{.Task.Name}}}">
                </div>
            </div>

            <div class="field">
                <label>
                    <div class="content">标签名称</div>
                </label>
                <div class="ui small input">
                    <input type="text" name="tag" placeholder="标签用于任务分类" value="{{{.Task.Tag}}}">
                </div>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <label>
                    <div class="content">任务类型</div>
                    <div class="ui message">
                        主任务可以配置多个子任务, 当主任务执行完成后，自动执行子任务<br>
                        任务类型新增后不能变更
                    </div>
                </label>
                <select name="level" id="level" {{{if .Task}}}disabled="disabled"{{{end}}}>
                    <option value="1" {{{if .Task}}} {{{if eq .Task.Level 1}}}selected{{{end}}} {{{end}}}>主任务</option>
                    <option value="2" {{{if .Task}}} {{{if eq .Task.Level 2}}}selected{{{end}}} {{{end}}}>子任务</option>
                </select>
            </div>
        </div>
        <div id="parent-task">
            <div class="two fields">
                <div class="field">
                    <label>
                        <div class="content">依赖关系</div>
                        <div class="ui message">
                            强依赖: 主任务执行成功，才会运行子任务 <br>
                            弱依赖: 无论主任务执行是否成功，都会运行子任务
                        </div>
                    </label>
                    <select name="dependency_status" id="dependency_status">
                        <option value="1" {{{if .Task}}} {{{if eq .Task.DependencyStatus 1}}}selected{{{end}}} {{{end}}}>强依赖</option>
                        <option value="2" {{{if .Task}}} {{{if eq .Task.DependencyStatus 2}}}selected{{{end}}} {{{end}}}>弱依赖</option>
                    </select>
                </div>
                <div class="field">
                    <label>
                        <div class="content">子任务ID</div>
                        <div class="ui message">
                            多个任务ID逗号分隔 <br>
                            子任务并发执行
                        </div>
                    </label>
                    <div class="ui small input">
                        <input type="text" name="dependency_task_id" placeholder="可选" value="{{{.Task.DependencyTaskId}}}">
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>
                        <div class="content">
                            crontab表达式
                        </div>
                    </label>
                    <div class="ui small input">
                        <input type="text" name="spec" value="{{{.Task.Spec}}}" placeholder="秒 分 时 天 月 周"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="three fields">
            <div class="field">
                <label>执行方式</label>
                <select name="protocol" id="protocol">
                    <option value="2" {{{if .Task}}} {{{if eq .Task.Protocol 2}}}selected{{{end}}} {{{end}}}
                            data-validate-type="selectProtocol">SHELL</option>
                    <option value="1" {{{if .Task}}} {{{if eq .Task.Protocol 1}}}selected{{{end}}} {{{end}}}>HTTP</option>
                </select>
            </div>
        </div>
        <div class="fields" id="hostField">
            <div class="field">
                <label>选择任务节点</label>
                <div id="hostId">
                    {{{range $i, $v := .Hosts}}}
                        <label>
                            <input type="checkbox" value="{{{.Id}}}" {{{if $.Task}}}{{{if $v.Selected}}} checked {{{end}}}{{{end}}}  style="width:25px;height: 25px;">{{{.Alias}}}-{{{.Name}}}
                            {{{if  (HostFormat $i) }}}<br>{{{end}}}
                        </label>
                    {{{end}}}
                 </div> &nbsp; <br> <a class="ui blue button" href="/host/create" target="_blank">添加节点</a>

            </div>
        </div>
        <div class="two fields" id="http-method" style="display: none">
            <div class="field">
                <label>请求方法</label>
            <select name="http_method">
                    <option value="1" {{{if .Task}}} {{{if eq .Task.HttpMethod 1}}}selected{{{end}}} {{{end}}}>GET</option>
                    <option value="2" {{{if .Task}}} {{{if eq .Task.HttpMethod 2}}}selected{{{end}}} {{{end}}}
                            data-validate-type="selectProtocol">POST</option>
            </select>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <label>命令</label>
                <textarea rows="5" name="command" placeholder="请输入系统命令" id="command">{{{.Task.Command}}}</textarea>
            </div>
        </div>
        <div class="two fields">
            <div class="field">
                <label>任务超时时间(秒, 0-86400)</label>
                <input type="text"  name="timeout" placeholder="默认0, 不限制" value="{{{if .Task}}} {{{.Task.Timeout}}} {{{else}}}0{{{end}}}">
            </div>
            <div class="field">
                <label>允许多实例同时运行</label>
                <select name="multi">
                    <option value="2" {{{if .Task}}} {{{if eq .Task.Multi 0}}}selected{{{end}}} {{{end}}}>否</option>
                    <option value="1"{{{if .Task}}} {{{if eq .Task.Multi 1}}}selected{{{end}}} {{{end}}}>是</option>
                </select>
            </div>
        </div>

        <div class="two fields">
<div class="field">
    <label>任务失败重试次数 (0-10)</label>
        <input type="text"  name="retry_times" placeholder="默认0, 不重试" value="{{{if .Task}}} {{{.Task.RetryTimes}}} {{{else}}}0{{{end}}}">
</div>
<div class="field">
    <label>任务失败重试间隔时间 (秒, 0-3600)</label>
        <input type="text"  name="retry_interval" placeholder="默认0, 执行默认重试策略" value="{{{if .Task}}} {{{.Task.RetryInterval}}} {{{else}}}0{{{end}}}">
</div>
        </div>

        <div class="three fields">
            <div class="field">
                <label>任务通知</label>
                <select name="notify_status" id="task-status">
                    <option value="1"{{{if .Task}}} {{{if eq .Task.NotifyStatus 0}}}selected{{{end}}} {{{end}}}>不通知</option>
                    <option value="2" {{{if .Task}}} {{{if eq .Task.NotifyStatus 1}}}selected{{{end}}} {{{end}}}>失败通知</option>
                    <option value="3" {{{if .Task}}} {{{if eq .Task.NotifyStatus 2}}}selected{{{end}}} {{{end}}}>执行结束通知</option>
                </select>
            </div>
        </div>
        <div class="two fields" style="display: none" id="task-notify-type">
            <div class="field" >
                <label>通知类型</label>
                <select name="notify_type">
                    <option value="1"{{{if .Task}}} {{{if eq .Task.NotifyType 0}}}selected{{{end}}} {{{end}}}>请选择</option>
                    <option value="2" {{{if .Task}}} {{{if eq .Task.NotifyType 1}}}selected{{{end}}} {{{end}}}>邮件</option>
                    <option value="3" {{{if .Task}}} {{{if eq .Task.NotifyType 2}}}selected{{{end}}} {{{end}}}>Slack</option>
                </select>
            </div>
        </div>
        <div class="inline fields" style="display: none" id="receiver-id"></div>
        <div class="two fields">
            <div class="field">
                <label>备注</label>
                <textarea rows="5" name="remark" placeholder="任务备注信息">{{{.Task.Remark}}}</textarea>
            </div>
        </div>
        <div class="ui primary submit button">保存</div>   <a class="ui button" onclick="location.href='/task';">取消</a>
    </form>
    </div>
</div>

<script type="x-handlerbar-template" id="mail-template">
    {{#each MailUsers}}
    <div class="field">
        <div class="ui checkbox">
            <input type="checkbox" name="receiver[]"  {{#if checked}}checked{{/if}} value="{{Id}}" />
            <label>{{Username}}-{{Email}}</label>
        </div>
    </div>
    {{else}}
    <a class="ui blue button" href="/manage/mail/edit" target="_blank">邮箱配置</a><br><br>
    {{/each}}
</script>

<script type="x-handlervar-template" id="slack-template">
    {{#each Channels}}
    <div class="field">
        <div class="ui  checkbox">
            <input type="checkbox" name="receiver[]" {{#if checked}}checked{{/if}} value="{{Id}}" />
            <label>{{Name}}</label>
        </div>
    </div>
    {{else}}
        <a class="ui blue button" href="/manage/slack/edit" target="_blank">Slack配置</a>
    {{/each}}
</script>

<script type="text/javascript">
    $(function() {
        changeCommandPlaceholder();
        changeLevel();
        changeProtocol();
        showNotify();
    });

    $('#protocol').change(function() {
        changeCommandPlaceholder();
        changeProtocol();
    });

    $('#level').change(function() {
        changeLevel();
    });

    $('#task-status').change(function() {
        var selected = $(this).val();
        if (selected == 1) {
            $('#task-notify-type').hide();
            $('#receiver-id').hide();
            $('#task-notify-type').find('select').val('1');
            return;
        }
        $('#task-notify-type').show();
    });

    $('#task-notify-type').change(function() {
      changeNotify();
    });

    function changeCommandPlaceholder() {
        var selectedId = $('#protocol').val();
        switch (selectedId) {
            case '1':
                $('#command').attr('placeholder', '请输入URL地址');
                break;
            case '2':
                $('#command').attr('placeholder', '请输入shell命令');
                break;
        }
    }

    function showNotify() {
        var notifyStatus = {{{.Task.NotifyStatus}}};
        if (notifyStatus > 0) {
            $('#task-notify-type').show();
        }
        var notifyReceiverIds = '{{{.Task.NotifyReceiverId}}}'.split(',');
        changeNotify(notifyReceiverIds);
    }

    function changeNotify(notifyReceiverIds) {
        var selectedId = $('#task-notify-type').find('select').val();
        if (selectedId == 1) {
            $('#receiver-id').hide();
            $('#receiver-id').html('');
            return;
        }
        if (selectedId == 2) {
            showMail(notifyReceiverIds);
        } else if (selectedId == 3) {
            showSlack(notifyReceiverIds);
        }
        $('#receiver-id').show();
    }

    function showMail(notifyReceiverIds) {
        util.get("/manage/mail", function(code, message, data) {
            renderReceiver(notifyReceiverIds, $('#mail-template'), data, 'MailUsers');
        })
    }

    function showSlack(notifyReceiverIds) {
        util.get("/manage/slack", function(code, message, data) {
            renderReceiver(notifyReceiverIds, $('#slack-template'), data, 'Channels');
        })
    }

    function renderReceiver(notifyReceiverIds, $element, data, key) {
        if (notifyReceiverIds !== undefined && notifyReceiverIds) {
            console.log(data[key]);
            for (i in data[key]) {
                if ($.inArray(data[key][i].Id + '', notifyReceiverIds) != -1) {
                    data[key][i].checked = true;
                }
            }
        }
        var html = util.renderTemplate($($element), data);
        $('#receiver-id').html(html);
        $('.ui.checkbox').checkbox();
    }

    function changeProtocol() {
        var protocol = $('#protocol').val();
        if (protocol == 2) {
            $('#hostField').show();
            $('#http-method').hide();
            return;
        }

        $('#hostField').hide();
        $('#http-method').show();
    }

    $('.ui.checkbox')
            .checkbox()
    ;

    function validateNotify() {
        var selectedId = $('#task-status').val();
        if (selectedId == 1) {
            return true;
        }

        var checkedLength = $('#receiver-id input:checked').length;
        if (checkedLength == 0) {
            return false;
        }

        return true;
    }

    function parseNotifyReceiver() {
        var receivers = [];
        $('#receiver-id input:checked').each(function() {
           receivers.push($(this).val());
        });

        return receivers.join(",");
    }

    function parseHostId() {
        var hostIds = [];
        $('#hostId input:checked').each(function () {
           hostIds.push($(this).val());
        });

        return hostIds.join(",");
    }

    function changeLevel() {
        var selected = $('#level').val();
        if (selected == 1) {
            // 主任务
            $('#parent-task').show();
            $('#child-task').hide();
        } else {
            // 子任务
            $('#parent-task').hide();
            $('#child-task').show();
        }
    }

    var $uiForm = $('.ui.form');
    registerSelectFormValidation("selectProtocol", $uiForm, $('#protocol'), 'protocol');
    $($uiForm).form(
            {
                onSuccess: function(event, fields) {
                    if (!validateNotify()) {
                        swal('错误提示', '请至少选择一个接收者', 'error');
                        return false;
                    }
                    fields.notify_receiver_id = parseNotifyReceiver();
                    fields.host_id = parseHostId();
                    if (fields.protocol == 2 && fields.host_id == "") {
                        swal('错误提示', '请选择任务节点');
                        return false;
                    }

                    util.post('/task/store', fields, function(code, message) {
                        location.href = "/task"
                    });

                    return false;
                },
                fields: {
                    name: {
                        identifier  : 'name',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入任务名称'
                            },
                            {
                                type : 'maxLength[32]',
                                prompt : '长度不能超过32'
                            }
                        ]
                    },
                    command: {
                        identifier  : 'command',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入任务命令'
                            },
                            {
                                type : 'maxLength[256]',
                                prompt : '长度不能超过256'
                            }
                        ]
                    },
                    hosts: {
                        identifier  : 'host_id',
                        rules: [
                            {
                                type   : 'selectProtocol',
                                prompt : '请选择主机'
                            }
                        ]
                    },
                    timeout: {
                        identifier  : 'timeout',
                        rules: [
                            {
                                type   : 'integer[0..86400]',
                                prompt : '超时范围0-86400'
                            }
                        ]
                    },
                    retryTimes: {
                        identifier  : 'retry_times',
                        rules: [
                            {
                                type   : 'integer[0..10]',
                                prompt : '重试次数0-10'
                            }
                        ]
                    },
                    retryInterval: {
                        identifier  : 'retry_interval',
                        rules: [
                            {
                                type   : 'integer[0..3600]',
                                prompt : '重试间隔时间0-3600'
                            }
                        ]
                    },
                    remark: {
                        identifier  : 'remark',
                        rules: [
                            {
                                type   : 'maxLength[100]',
                                prompt : '长度不能超过100'
                            }
                        ]
                    }
                },
                inline : true
            });
</script>

{{{ template "common/footer" . }}}