<template>
  <div>
    <data-table ref="datatable"
                search-route="capec"
                @context-changed="onContextChanged"
    >
      <b-table ref="table"
               stacked="md"
               :fields="fields"
               :items="dataLoadProvider"
               :busy.sync="isBusy"
               empty-text="No records found"
      >
        <template v-slot:cell(_source.timestamp)="row">
          {{ formatDate(row.item._source.timestamp) }}
        </template>
        <template v-slot:cell(actions)="row">
          <b-button variant="info"
                    title="Paths"
                    class="mr-2"
                    @click.stop="row.toggleDetails"
          >
            <fa :icon="row.detailsShowing ? 'arrow-up' : 'arrow-down'" />
          </b-button>
        </template>
        <template slot="row-details" slot-scope="row">
          <div v-if="row.item._source.tree">
            <json-view
              :root-key="row.item._source.cve"
              :data="row.item._source.tree" />
          </div>
        </template>
      </b-table>
    </data-table>
  </div>
</template>

<script>
import { JSONView } from 'vue-json-component'
import DataTable from './DataTable'
export default {
  name: 'CapecList',
  components: {
    DataTable, 'json-view': JSONView
  },
  data () {
    return {
      isBusy: false,
      fields: [
        { key: '_source.timestamp', label: 'Timestamp' },
        { key: '_source.signature_id', label: 'Signature ID' },
        { key: '_source.signature', label: 'Signature' },
        { key: '_source.category', label: 'Category' },
        { key: '_source.cve', label: 'CVE' },
        { key: 'actions', label: 'Actions' }
      ]
    }
  },
  methods: {
    dataLoadProvider (ctx) {
      return this.$refs.datatable.loadData(ctx.sortBy, ctx.sortDesc)
    },
    onContextChanged () {
      return this.$refs.table.refresh()
    },
    formatDate (arg) {
      const tmp = new Date(arg).toString()
      return tmp.substring(0, tmp.length - 40)
    }
  }
}
</script>

<style scoped>

</style>