{{{ 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">
                    <a href="/task/create">
                        <i class="large add icon"></i>
                        <div class="content">
                           添加任务
                        </div>
                    </a>
                </h3>
            </div>
        </div>
        <form class="ui form">
            <div class="six fields search">
                <div class="one wide field">
                    <input type="text" placeholder="任务ID" name="id" value="{{{if gt .Params.Id 0}}}{{{.Params.Id}}}{{{end}}}">
                </div>
                <div class="field">
                    <input type="text" placeholder="任务名称" name="name" value="{{{.Params.Name}}}">
                </div>
                <div class="field">
                    <select name="host_id" id="hostId">
                        <option value="">选择主机</option>
                        {{{range $i, $v := .Hosts}}}
                        <option value="{{{.Id}}}" {{{if eq $.Params.HostId .Id }}} selected {{{end}}} >{{{.Alias}}}-{{{.Name}}}</option>
                        {{{end}}}
                    </select>
                </div>
                <div class="field">
                    <select name="protocol" id="protocol">
                        <option value="0">执行方式</option>
                        <option value="3" {{{if eq .Params.Protocol 3}}}selected{{{end}}}>系统命令</option>
                        <option value="2"  {{{if eq .Params.Protocol 2}}}selected{{{end}}} data-match="host_id" data-validate-type="selectProtocol">SSH</option>
                        <option value="1"  {{{if eq .Params.Protocol 1}}}selected{{{end}}}>HTTP</option>
                    </select>
                </div>
                <div class="field">
                    <select name="status">
                        <option value="0">状态</option>
                        <option value="1" {{{if eq .Params.Status 0}}}selected{{{end}}} >暂停</option>
                        <option value="2" {{{if eq .Params.Status 1}}}selected{{{end}}}>激活</option>
                    </select>
                </div>
                <div class="field">
                    <button class="ui linkedin submit button">搜索</button>
                </div>
            </div>
        </form>
    <div class="task-list">
        {{{range $i, $v := .Tasks}}}
                   <div class="ui device two column middle aligned vertical grid segment">
                       <div class="column verborder">
                           <div class="ui info segment">
                               <h5 class="ui header">{{{.Task.Name}}} {{{if eq .Status 1}}}<i class="large checkmark blue icon"></i> {{{else}}} <i class="large red minus icon"></i> {{{end}}}
                               </h5>
                               <p>任务ID： <span class="stress">{{{.Id}}}</span></p>
                               <p>状态： <span class="stress">{{{if eq .Status 1}}}激活{{{else}}}停止{{{end}}}</span></p>
                               <p>cron表达式： {{{.Spec}}}</p>
                               <p>执行方式: {{{if eq .Protocol 1}}} HTTP {{{else if eq .Protocol 2}}} SSH {{{else if eq .Protocol 3}}}本地命令{{{end}}}</p>
                               <p class="sensorStatus">命令：{{{.Command}}}</p>
                               <p class="sensorStatus">超时时间：{{{if eq .Timeout -1}}}后台运行{{{else if eq .Timeout 0}}}{{{.Timeout}}}秒{{{else}}}不限制{{{end}}}</p>
                               <p>重试次数: {{{.RetryTimes}}}</p>
                               <p class="sensorStatus">是否允许多实例运行：{{{if gt .Multi 0}}}是{{{else}}}否{{{end}}}</p>
                               {{{if eq .Protocol 2}}}
                               <p>主机: {{{.Alias}}}-{{{.Name}}}</p>
                               {{{end}}}
                               <p>备注: {{{.Remark}}}</p>
                           </div>
                       </div>
                       <div class="center aligned column">
                           <div class="ui buttons operation">
                               <a class="ui purple  button" href="/task/edit/{{{.Id}}}">编辑</a>
                               {{{if eq .Status 1}}}
                               <button class="ui primary button" @click="changeStatus({{{.Id}}},{{{.Status}}})">停止</button>
                               {{{else}}}
                               <button class="ui blue button" @click="changeStatus({{{.Id}}},{{{.Status}}})">激活 </button>
                               {{{end}}}
                               <button class="ui positive button" @click="remove({{{.Id}}})">删除</button> <br>
                               <button class="ui twitter button" @click="run({{{.Id}}})">手动运行</button>
                               <a class="ui instagram button" href="/task/log?task_id={{{.Id}}}">查看日志</a>
                           </div>
                       </div>
                   </div>
        {{{end}}}
    </div>
    {{{ template "common/pagination" .}}}
    </div>
</div>


<script type="text/javascript">
    $('.ui.checkbox').checkbox();

    var vue = new Vue(
            {
                el: '.task-list',
                methods: {
                    changeStatus: function (id ,status) {
                        var url = '';
                        if (status) {
                            url = '/task/disable';
                        } else {
                            url = '/task/enable';
                        }
                        url += '/' + id;
                        util.post(url,{}, function() {
                            location.reload();
                        });
                    },
                    remove: function(id) {
                        util.removeConfirm('/task/remove/' + id);
                    },
                    run: function(id) {
                        util.get("/task/run/" + id, function(code, message) {
                            swal('操作成功', message, 'success');
                        })
                    }
                }
            }
    );




</script>

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