{{{ template "common/header" . }}}
<style type="text/css">
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
        padding:10px;
        background-color: #4C4C4C;
        color: white;
    }
</style>
<div class="ui grid">
    <!--the vertical menu-->
   {{{ template "task/menu" . }}}

    <div class="twelve wide column">
        <div class="pageHeader">
            <div class="segment">
                <h3 class="ui dividing header">
                    <div class="content">
                        <button class="ui small teal button" onclick="clearLog()">清空日志</button>
                    </div>
                </h3>
            </div>
        </div>
        <form class="ui form">
            <div class="six fields search">
                <div class="field">
                    <input type="text" placeholder="任务ID" name="task_id" value="{{{if gt .Params.TaskId 0}}}{{{.Params.TaskId}}}{{{end}}}">
                </div>
                <div class="field">
                    <select name="protocol" id="protocol">
                        <option value="0">执行方式</option>
                        <option value="2"  {{{if eq .Params.Protocol 2}}}selected{{{end}}} data-match="host_id" data-validate-type="selectProtocol">SHELL</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>
                        <option value="3" {{{if eq .Params.Status 2}}}selected{{{end}}}>成功</option>
                        <option value="4" {{{if eq .Params.Status 3}}}selected{{{end}}}>取消</option>
                    </select>
                </div>
                <div class="field">
                    <button class="ui linkedin submit button">搜索</button>
                </div>
            </div>
        </form>
        <table class="ui pink table">
            <thead>
            <tr>
                <th>任务ID</th>
                <th>任务名称</th>
                <th>cron表达式</th>
                <th>协议</th>
                <th>重试次数</th>
                <th>主机</th>
                <th>执行时长</th>
                <th>状态</th>
                <th>执行结果</th>
            </tr>
            </thead>
            <tbody>
            {{{range $i, $v := .Logs}}}
            <tr>
                <td><a href="/task?id={{{.TaskId}}}">{{{.TaskId}}}</a></td>
                <td>{{{.Name}}}</td>
                <td>{{{.Spec}}}</td>
                <td>{{{if eq .Protocol 1}}} HTTP {{{else if eq .Protocol 2}}} SHELL {{{end}}}</td>
                <td>{{{.RetryTimes}}}</td>
                <td>{{{.Hostname}}}</td>
                <td>
                    {{{if and (ne .Status 3) (ne .Status 4)}}}
                    {{{if gt .TotalTime 0}}}{{{.TotalTime}}}秒{{{else}}}1秒{{{end}}}<br>
                    开始时间: {{{.StartTime.Format "2006-01-02 15:04:05" }}}<br>
                    {{{if ne .Status 1}}}
                        结束时间: {{{.EndTime.Format "2006-01-02 15:04:05" }}}
                    {{{end}}}
                    {{{end}}}
                </td>
                <td>
                    {{{if eq .Status 2}}}
                        成功
                    {{{else if eq .Status 1}}}
                        <span style="color:green">执行中</span>
                    {{{else if eq .Status 0}}}
                        <span style="color:red">失败</span>
                    {{{else if eq .Status 3}}}
                        <span style="color:#4499EE">取消</span>
                    {{{end}}}
                </td>
                <td>
                    {{{if or (eq .Status 2) (eq .Status 0)}}}
                        <button class="ui small primary button"
                                onclick="showResult('{{{.Name}}}', '{{{.Command}}}', '{{{.Result}}}')"
                                >查看结果
                        </button>
                    {{{end}}}
                </td>
            </tr>
            {{{end}}}
            </tbody>
        </table>
        {{{ template "common/pagination" .}}}
    </div>
</div>

<div class="message">
    <result></result>
</div>

<script type="text/x-vue-template" id="task-result">
    <div class="ui modal">
        <i class="close icon"></i>
        <div class="header">
            {{name}}
        </div>
        <div>
            <pre style="background-color:#04477C;color:lightslategray">{{command}}</pre>
        </div>
        <div>
             <pre>{{result}}</pre>
        </div>
    </div>
</script>

<script type="text/javascript">
  function showTime(startTime, endTime, status) {

  }

  function  showResult(name, command,result) {
      $('.message').html($('#task-result').html());
      new Vue(
              {
                  el: '.message',
                  data: {
                      result: result.replace(/\\n/,"<br>"),
                      name: name,
                      command: command
                  }
              }
      );
      $('.ui.modal.transition').remove();
      $('.ui.modal').modal({
          detachable: false,
          observeChanges: true
      }).modal('refresh').modal('show');
  }

  function clearLog() {
      util.confirm("确定要删除所有日志吗？", function() {
          util.post("/task/log/clear",{}, function() {
              location.reload();
          });
      });
  }
</script>
{{{ template "common/footer" . }}}