{% extends 'base.html' %}

{% block title %}timer task results with job{% endblock %}

{% block head %}
  <style>
  .status_warn {
    color: red;
    font-weight: bold;
  }
  </style>
{% endblock %}


{% block body %}
<script>
// Fire would jump with flash
//window.onload = function(){
  //if (location.search.indexOf('flash=') != -1) {
//    var timestamp = Math.floor(Date.now() / 1000);
//    history.pushState(null, '', [location.protocol, '//', location.host, location.pathname, '?t=', timestamp].join(''));
  //}
//};
</script>


<h2>
  <a class="button normal" href="{{ url_tasks }}">Tasks</a>
  <a class="button warning forbid" href="javascript:;">Task #{{ task_id }} {% if task and task.name %}({{ task.name }}){% endif %}</a>
  {% if task %}{{ task.project }}/{{ task.version }}/{{ task.spider }}/{{ task.jobid }}{% endif %}
</h2>
{% if task_results.items %}
<h2 style="margin: 0;">[node {{ task_results.items[0].node }}] {{ task_results.items[0].server }}</h2>
{% endif %}

<div id="app">
<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    empty-text="There is nothing to display."
    :max-height="maxHeight"
    :default-sort="{prop: 'run_time', order: 'descending'}"
    style="width: 100%;"
    :size="size"

    highlight-current-row
    @current-change="handleSelectRow"
  >
    <el-table-column prop="index" label="Index" sortable align="center" width="70"></el-table-column>
    <!-- <el-table-column prop="id" label="task_result #" sortable align="center" width="80"></el-table-column> -->
    <!-- <el-table-column prop="task_job_result_id" label="task_job_result #" sortable align="center" width="80"></el-table-column> -->
    <el-table-column prop="run_time" label="Run time" sortable align="center" width="145"></el-table-column>
    <el-table-column prop="status_code" label="Status code" sortable align="center" width="110">
      <template slot-scope="scope"><span :class="scope.row.status_code_class">{{scope.row.status_code}}</span></template>
    </el-table-column>
    <el-table-column prop="status" label="Status" sortable align="center" width="75">
      <template slot-scope="scope"><span :class="scope.row.status_class">{{scope.row.status}}</span></template>
    </el-table-column>
    <el-table-column prop="stats" label="Stats" sortable :sort-method="sortStatus" align="center" width="65">
      <template slot-scope="scope"><a :class="scope.row.stats_class" :href="scope.row.url_stats" target="_blank">{{scope.row.stats_button}}</a></template>
    </el-table-column>
    <el-table-column prop="action" label="Action" sortable :sort-method="sortStatus" align="center" width="75">
      <template slot-scope="scope"><a class="state delete" @click="deleteRow(scope.$index, tableData)">Delete</a></template>
    </el-table-column>
    <el-table-column prop="result" label="Result" sortable :sort-method="sortStatus" align="left" min-width="215" show-overflow-tooltip></el-table-column>
  </el-table>

  <el-pagination
    background
    :total='{{ task_results.total }}'
    :page-sizes="[10, 100, 1000]"
    :page-size='{{ task_results.per_page }}'
    :page-count='{{ task_results.pages }}'
    :current-page.sync="currentPage"

    :pager-count="11"
    layout="total, sizes, prev, pager, next"

    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
  </el-pagination>
</template>
</div>


<script>
var Main = {
  data() {
    return {
      size: {% if task_results.per_page > 10 %}'mini'{% else %}'—'{% endif %},
      maxHeight: window.innerHeight - 228,
      currentPage: {{ task_results.page }},
      tableData: [
    {% for task_result in task_results.items %}
      {
        index: {{ task_result.index }},
        id: {{ task_result.id }},
        task_job_result_id: {{ task_result.task_job_result_id }},
        run_time: '{{ task_result.run_time }}',
        status_code: {{ task_result.status_code }},
        status: '{{ task_result.status }}',
        status_code_class: {% if task_result.status_code != 200 %}'status_warn'{% else %}''{% endif %},
        status_class: {% if task_result.status != 'ok' %}'status_warn'{% else %}''{% endif %},

        url_action: '{{ task_result.url_action }}',
        url_stats: '{{ task_result.url_stats or "javascript:;" }}',
        stats_button: {% if task_result.url_stats %}'Stats'{% else %}'N/A'{% endif %},
        stats_class:  {% if task_result.url_stats %}'state safe'{% else %}'state danger forbid'{% endif %},

        result: '{{ task_result.result|replace("&", "&amp;")|replace("<", "&lt;")|replace(">", "&gt;")|replace("\\", "/")|replace("'", "\\'")|replace("\r", " ")|replace("\n", " ")|safe }}',
      },
    {% endfor %}
      ],

    }
  },

  methods: {
    handleSelectRow(val) {
      this.currentRow = val;
    },
    deleteRow(index, rows) {
      deleteRowXHR(rows[index].url_action);
      rows.splice(index, 1);
    },
    handleCurrentChange(val) {
      console.log(val);
      location.href = '.?page=' + val;
    },
    handleSizeChange(val) {
      console.log(`perpage ${val}`);
      location.href = '.?per_page=' + val;
    },
    sortStatus(a, b) {
      return a.status < b.status ? -1 : 1;
    },
  }
}
var Ctor = Vue.extend(Main);
vm = new Ctor().$mount('#app');
</script>
{% endblock %}
