<template>

<el-row>
  <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
    <el-menu-item index="1"><a href="/delayed_job/overview">DELAYED JOB DASHBOARD</a></el-menu-item>
    <el-menu-item index="2"><a href="/delayed_job/enqueued">Enqueued</a></el-menu-item>
    <el-menu-item index="3"><a href="/delayed_job/working">Working</a></el-menu-item>
    <el-menu-item index="4"><a href="/delayed_job/pending">Pending</a></el-menu-item>
    <el-menu-item index="5"><a href="/delayed_job/failed">Failed</a></el-menu-item>
  </el-menu>

  <el-col :span="24">
    <jobs-list></jobs-list>
  </el-col>
</el-row>

</template>

<script> import JobsList from './JobsList.vue'

export default {

data () {
  return {
    activeIndex: '1'
  }
},

created () {
  let path = window.location.pathname;
  if (path.includes("overview")) {
    this.activeIndex = '1'
  } else if (path.includes("enqueued")) {
    this.activeIndex = '2'
  } else if (path.includes("working")) {
    this.activeIndex = '3'
  } else if (path.includes("pending")) {
    this.activeIndex = '4'
  } else if (path.includes("failed")) {
    this.activeIndex = '5'
  }
},

components: {
  jobsList: JobsList
}

} </script>

<style scoped> a {

text-decoration: none;

} </style>