<template>
  <Parent
    :extra-filters="extraFilters"
    :extra-fields="extraFields"
    :extra-headers="extraHeaders"
    :extra-rows="extraRows"
  >
    <template #default="{ item }">
      <CardUser
        v-bind="item"
        :key="item.uuid"
        :image="$_getContentImage(item.image)"
      />
    </template>
  </Parent>
</template>

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

import CardUser from '../components/users/CardUser'

export default {
  name: 'DirectoryPage',
  $_i18nRootPath: 'users.LISTING',
  components: { Parent, CardUser },
  computed: {
    extraFilters() {
      return [
        {
          modelName: 'subsidiaries',
          type: 'selectbox',
          fetch: true,
          reference: 'subsidiaries',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.subsidiaries')
        },
        {
          modelName: 'services',
          type: 'selectbox',
          fetch: true,
          reference: 'services',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.services')
        },
        {
          modelName: 'locations',
          type: 'selectbox',
          fetch: true,
          reference: 'locations',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.locations')
        }
      ]
    },
    extraFields() {
      return [
        'email',
        'phone',
        'mobile_phone',
        'function',
        { subsidiaries: ['uuid', 'title'] },
        { services: ['uuid', 'title'] },
        { locations: ['uuid', 'title'] }
      ]
    },
    extraHeaders() {
      return [
        { value: this.$_tr('headers.subsidiaries') },
        { value: this.$_tr('headers.services') },
        { value: this.$_tr('headers.locations') },
        { value: this.$_tr('headers.phone') }
      ]
    }
  },
  methods: {
    extraRows(fields) {
      return [
        {
          id: 'subsidiaries',
          class: 'subsidiaries',
          value: this.getCheckedData(fields, ['subsidiaries', 'data'])
            .map(({ title }) => title)
            .join(', ')
        },
        {
          id: 'services',
          class: 'services',
          value: this.getCheckedData(fields, ['services', 'data'])
            .map(({ title }) => title)
            .join(', ')
        },
        {
          id: 'locations',
          class: 'locations',
          value: this.getCheckedData(fields, ['locations', 'data'])
            .map(({ title }) => title)
            .join(', ')
        },
        {
          id: 'phone',
          class: 'phone',
          value: fields.mobile_phone || fields.phone
        }
      ]
    }
  }
}
</script>
