<template>
  <div class="jobs-listing-container">
    <filters-container v-if="useFilters" :id="filtersId" :filters="filters" />

    <table-listing
      id="jobs-listing"
      :headers="headers"
      :rows="rows"
      :filter-id="filtersId"
      :on-row-click="openModal"
      :actions="['edit']"
      :staticData="jobs"
    />
  </div>
</template>

<script>
import DateUi from '@inside-ui/DateUi'

export default {
  name: 'JobsListing',
  $_i18nRootPath: 'customs.JOBS.LISTING',
  props: {
    jobs: Array,
    useFilters: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      filtersId: 'jobs-listing-filters'
    }
  },
  computed: {
    filters() {
      return [
        {
          modelName: 'search',
          type: 'text',
          label: this.$_tr('filters.search')
        },
        {
          modelName: 'services',
          type: 'selectbox',
          fetch: true,
          reference: 'services',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.services')
        },
        {
          modelName: 'locations',
          type: 'selectbox',
          fetch: true,
          reference: 'locations',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.locations')
        },
        {
          modelName: 'contracts',
          type: 'selectbox',
          fetch: true,
          reference: 'contracts',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.contracts')
        }
      ]
    },
    headers() {
      return [
        { value: this.$_tr('headers.title') },
        { value: this.$_tr('headers.services') },
        { value: this.$_tr('headers.locations') },
        { value: this.$_tr('headers.contracts') },
        {
          value: this.$_tr('headers.date'),
          sortable: true,
          key: 'published_at'
        }
      ]
    }
  },
  methods: {
    rows(fields) {
      return [
        { value: fields.title },
        { value: this.getCheckedData(fields, ['services', 'title']) },
        { value: this.getCheckedData(fields, ['locations', 'title']) },
        { value: this.getCheckedData(fields, ['contracts', 'title']) },
        { tag: DateUi, data: { date: fields.published_at } }
      ]
    },
    openModal(data) {
      this.triggerModal(
        'jobs',
        'fetch',
        { item: data, content: data.content_type },
        { layout: 'right', width: 760, transition: 'fadeInLeft' }
      )
    }
  }
}
</script>
