<template>
  <BaseCard>
    <template #header-title>
      {{ title }}
    </template>
    <template #header-icon>
      <OrchestratorOperationsList />

      <!-- <b-dropdown aria-role="list" class="mode-dropdown" label="Mode">
        <b-button slot="trigger" size="is-small" type="is-light" class="system-background">
          <span class="mode-title">
            Run new operation
          </span>
          <span class="icon">
            <i class="fas fa-plus" aria-hidden="true"></i>
          </span>
        </b-button>

        <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-1')">
          Analytical operation 1
        </b-dropdown-item>
        <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-2')">
          Analytical operation 2
        </b-dropdown-item>
        <b-dropdown-item aria-role="listitem" @click="$emit('run-operation-3')">
          Analytical operation 3
        </b-dropdown-item>
      </b-dropdown> -->
    </template>
    <template #content>
      <b-table :data="jobs" narrowed hoverable>
        <template slot-scope="props">
          <template v-for="column in columns">
            <b-table-column
              :key="column.id"
              v-bind="column"
              default-sort="jobs.id"
              default-sort-direction="asc"
              sort-icon="arrow-up"
              sort-icon-size="is-small"
            >
              <!-- <template slot="header" slot-scope="{ column }" class="header-text">
                {{ column.id }}
              </template> -->
              <template
                v-if="column.searchable && !column.numeric"
                slot="searchable"
                slot-scope="props"
              >
                <b-input
                  v-model="props.filters[props.column.field]"
                  placeholder="Search..."
                  icon="magnify"
                  size="is-small"
                />
              </template>
              {{ props.row[column.field] }}
              <b-button
                v-if="column.field === 'progress' && props.row[column.field] < 50"
                size="is-small"
                type="is-text"
              >
                Stop
              </b-button>
            </b-table-column>
          </template>
        </template>
      </b-table>

      <!-- <JobItem v-for="job in jobs" :key="job.id" v-bind="job" /> -->
    </template>
  </BaseCard>
</template>

<script>
import OrchestratorOperationsList from '@/components/shared/OrchestratorOperationsList.vue'
// import JobItem from './Item/index.vue'
export default {
  components: { OrchestratorOperationsList },
  props: {
    jobs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: 'Analytical operations'
    }
  },
  computed: {
    columns: function() {
      // let colObj = []
      // if (this.jobs.length > 0) {
      //   for (let property in this.jobs[0]) {
      //     colObj.push({ field: property, label: property, searchable: true })
      //   }
      // }
      // return colObj

      return [
        {
          field: 'id',
          label: 'ID',
          searchable: false,
          width: '30',
          // sortable: true,
          numberic: true
        },
        {
          field: 'title',
          label: 'Operation type',
          width: '150',
          searchable: true
        },
        {
          field: 'state',
          label: 'Launched',
          searchable: true
        },
        {
          field: 'progress',
          label: 'Status',
          width: '90',
          searchable: true,
          numberic: true
          // sortable: true
        }
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
table td
  font-size: 0.9em

.header-text
  font-size: .5rem !important
</style>
