<template>
  <Page
    :extra-filters="extraFilters"
    :extra-fields="extraFields"
    :extra-headers="extraHeaders"
    :extra-rows="extraRows"
  />
</template>

<script>
import Page from '@inside-users/components/pages/DirectoryPage'

export default {
  name: 'DirectoryPage',
  $_i18nRootPath: 'users.LISTING',
  components: { Page },
  computed: {
    extraFilters() {
      return [
        {
          modelName: 'business',
          type: 'selectbox',
          reference: 'business',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.business'),
          async: { contentType: 'business', fields: ['uuid', 'title'] }
        },
        {
          modelName: 'activity_domain',
          type: 'selectbox',
          reference: 'activity_domain',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.activityDomain'),
          async: { contentType: 'activity_domain', fields: ['uuid', 'title'] }
        },
        {
          modelName: 'service',
          type: 'selectbox',
          reference: 'service',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.service'),
          async: { contentType: 'service', fields: ['uuid', 'title'] }
        }
      ]
    },
    extraFields() {
      return [
        'service',
        'function',
        { business: ['uuid', 'title'] },
        { activity_domain: ['uuid', 'title'] }
      ]
    },
    extraHeaders() {
      return [
        { value: this.$_tr('headers.business') },
        { value: this.$_tr('headers.activityDomain') },
        { value: this.$_tr('headers.service') }
      ]
    }
  },
  methods: {
    extraRows(fields) {
      return [
        {
          id: 'business',
          class: 'business',
          value: this.getCheckedData(fields, ['business', 'data', 0, 'title'])
        },
        {
          id: 'activity_domain',
          class: 'activity_domain',
          value: this.getCheckedData(fields, [
            'activity_domain',
            'data',
            0,
            'title'
          ])
        },
        {
          id: 'service',
          class: 'service',
          value: this.getCheckedData(fields, ['service', 'data', 0, 'title'])
        }
      ]
    }
  }
}
</script>
