<template>

<div>
  <div class="block">
    <el-pagination
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="pageSizes"
      :page-size="perPage"
      :total="totalJobs">
    </el-pagination>
  </div>

  <el-table
    :data="jobs"
    v-loading.body="loading"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="Job ID">
    </el-table-column>
    <el-table-column
      label="Status">
      <template scope="scope">
        <el-tag
          :type="filterTag(scope.row)">{{filterTagName(scope.row)}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="payload_object"
      label="Handler"
      :formatter="formatter"
      width="400">
    </el-table-column>
    <el-table-column
      prop="priority"
      label="Priority">
    </el-table-column>
    <el-table-column
      prop="attempts"
      label="Attempts">
    </el-table-column>
    <el-table-column
      prop="run_at"
      label="Run At"
      width="180"
      :formatter="runAtFormatter">
    </el-table-column>
    <el-table-column
      prop="created_at"
      label="Created At"
      :formatter="createdAtFormatter">
    </el-table-column>

    <el-table-column
      label="Actions"
      width="120">
      <template scope="scope">
        <el-button type="info" size="mini" @click.native.prevent="handleClickDialog(scope.$index, jobs)">
          Show
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="block">
    <el-pagination
      layout="total, sizes, prev, pager, next"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="pageSizes"
      :page-size="perPage"
      :total="totalJobs">
    </el-pagination>
  </div>

  <el-dialog title="Object Payload" v-model="dialogVisible" size="small">
    <pre>{{jobDetailHandler}}</pre>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">Ok!</el-button>
    </span>
  </el-dialog>
</div>

</template>

<script>

const moment = require('moment');

export default {
  data () {
    return {
      jobs: [],
      dialogVisible: false,
      jobDetailHandler: "",
      jobDetailId: "",
      loading: true,
      currentPage: 0,
      perPage: 10,
      totalJobs: 0,
      totalPages: 0,
      pageSizes: [10, 20, 30, 50]
    }
  },

  created () {
    this.loadPageInfo();
    this.loadJobsForCurrentPage();
  },

  methods: {
    getJobType() {
      const path = window.location.pathname;
      if (path.includes("pending")) {
        return "pending"
      } else if (path.includes("failed")) {
        return "failed"
      } else if (path.includes("working")) {
        return "working"
      } else if (path.includes("enqueued")) {
        return "enqueued"
      }
      else {
        return ""
      }
    },

    loadJobsForCurrentPage() {
      const filter = this.getJobType();
      this.loadJobs({
        params: {
          filter: filter,
          page: this.currentPage,
          per_page: this.perPage
        }
      });
    },

    loadPageInfo(){
      const queries = { params: { filter: this.getJobType(), r_page: this.perPage } };
      this.$http.get("/delayed_job/jobs_info.json", queries).then(response => {
        const res = response.body;
        this.totalPages = res.total_pages;
        this.totalJobs = res.total_jobs;
      }, response => {
      });
    },

    handleSizeChange(val){
      this.perPage = val;
      this.loadPageInfo();
      this.loadJobsForCurrentPage();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadJobsForCurrentPage();
    },

    handleClickDialog(index, jobs){
      this.jobDetailHandler = jobs[index].payload_object;
      this.jobDetailId = jobs[index].id;
      this.dialogVisible = true;
    },

    formatter(row, column){
      return row.handler.substring(0,300)
    },

    filterTag(row){
      if (row.failed_at !== null) {
        return "danger"
      } else if (row.locked_at !== null) {
        return "warning"
      } else {
        return "gray"
      }
    },

    filterTagName(row) {
      if (row.failed_at !== null) {
        return "Failed"
      } else if (row.locked_at !== null) {
        return "Running"
      } else {
        return "Queued"
      }
    },

    runAtFormatter(row, column){
      return moment(row.run_at).format('MMMM Do YYYY, h:mm:ss a');
    },

    createdAtFormatter(row, column){
      return moment(row.created_at).format('MMMM Do YYYY, h:mm:ss a');
    },

    loadJobs(queries) {
      this.$http.get("/delayed_job/jobs.json", queries).then(response => {
        this.jobs = response.body;
        this.loading = false;
      }, response => {
        this.loading = false;
      });
    }
  }
}

</script>