{% extends 'base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block head %}
  <style>
  </style>
{% endblock %}


{% block body %}
<h2>
  <a class="link" target="_blank" href="{{ url }}">
  Directory listing for /{{ title }}/{% if project %}{{ project }}/{% endif %}{% if spider %}{{ spider }}/{% endif %}
  </a>
</h2>

<div id="app">
<template>
  <el-col :span="5">
    <el-button-group>
      <el-button type="primary" onclick="window.history.back();" icon="el-icon-arrow-left" size="medium">Back</el-button>
      <el-button type="primary" onclick="window.history.forward();" size="medium">Forward<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
  </el-col>

{% if project and spider and rows %}
  <el-button-group>
    {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
    <el-button type="success" onclick="window.location='{{ url_multinode_run }}';" size="small">{{ g.multinode|safe }}</el-button>
    {% endif %}
    <el-button type="success" onclick="window.location='{{ url_schedule }}';" size="medium">Run Spider ({{ spider }})</el-button>
  </el-button-group>
{% endif %}

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

    <el-table-column prop="index" label="Index" sortable width="70" align="center"></el-table-column>
    <!-- stats.json.bak [application/x-trash] -->
    <el-table-column prop="content_type" label="Content type" sortable width="135" align="center"></el-table-column>
    <el-table-column prop="content_encoding" label="Encoding" sortable width="95" align="center"></el-table-column>
    <el-table-column prop="size" label="Size" sortable width="100" align="center" :sort-method="sortSize" :sort-orders=['descending','ascending',null]></el-table-column>

    {% if project and spider %}
    <el-table-column prop="stats" label="Stats" sortable width="{% if SCRAPYD_SERVERS_AMOUNT > 1 %}105{% else %}65{% endif %}" align="center">
      <template slot-scope="scope">
        {% if SCRAPYD_SERVERS_AMOUNT > 1 %}
        <a class="state multinode" :href="scope.row.url_clusterreports" target="_blank">{{ g.multinode|safe }}</a>
        {% endif %}
        <a :class="scope.row.stats_class" :href="scope.row.url_stats" target="_blank">Stats</a>
      </template>
    </el-table-column>
    <el-table-column prop="log" label="Log" sortable width="60" align="center">
      <template slot-scope="scope"><a class="state normal" :style="{ display: scope.row.display }" :href="scope.row.url_utf8" target="_blank">{{scope.row.log}}</a></template>
    </el-table-column>
    {% endif %}

    <el-table-column prop="filename" label="Filename" sortable min-width="90" align="left" show-overflow-tooltip>
      <template slot-scope="scope"><a class="link" :href="scope.row.href" :target="scope.row.target">{{scope.row.filename}}</a></template>
    </el-table-column>

  </el-table>
</template>
</div>


<script>
var Main = {
  data() {
    return {
      size: {% if rows|length > 10 %}'mini'{% else %}'—'{% endif %},
      maxHeight: window.innerHeight - 200,

      tableData: [
    {% for row in rows %}
      {
        index: {{ loop.index }},
        content_type: '{{ row["content_type"] }}',
        content_encoding: '{{ row["content_encoding"] }}',
        size: '{{ row["size"] }}',

        {% if project and spider %}
        url_clusterreports: '{{ row["url_clusterreports"] }}',
        url_stats: '{{ row["url_stats"] }}',
        stats_class: {% if row['url_utf8'] %}'state normal'{% else %}'state warning'{% endif %},
        url_utf8: '{{ row["url_utf8"] }}',
        log: {% if row['url_utf8'] %}'Log'{% else %}''{% endif %},
        display: {% if row['url_utf8'] %}''{% else %}'none'{% endif %},
        {% endif %}

        href: '{{ row["href"] }}',
        filename: '{{ row["filename"] }}',
        target: {% if project and spider %}'_blank'{% else %}'_self'{% endif %},
      },
    {% endfor %}
      ],

    }
  },

  methods: {
    calcSize(size) {
      var size_M_re = size.match(/(\d+)M/);
      var size_K_re = size.match(/(\d+)K/);  // 1K
      var size_B_re = size.match(/(\d+)B/);  // 208B or ''
      if (size_M_re) {
        size = parseInt(size_M_re[1]) * 1000 * 1000;
      } else if (size_K_re) {
        size = parseInt(size_K_re[1]) * 1000;
      } else if (size_B_re) {
        size = parseInt(size_B_re[1]);
      } else {
        size = 0;
      }
      // console.log(size);
      return size;
    },
    sortSize(a, b) {
      return this.calcSize(a.size) > this.calcSize(b.size) ? 1 : -1;
    },
  }
}
var Ctor = Vue.extend(Main);
vm = new Ctor().$mount('#app');
</script>
{% endblock %}
