<template>
  <Page
    :extraRows="extraRows"
    :extraFields="extraFields"
    :extraHeaders="extraHeaders"
    :extraFilters="extraFilters"
  >
    <template #default="{ item }">
      <UserCard
        v-bind="item"
        :key="item.uuid"
        :image="$_getContentImage(item.image, 'avatar')"
      />
    </template>
  </Page>
</template>

<script>
import { Link } from 'inside-collection/components'

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

import UserCard from '@inside-customs/components/UserCard'

export default {
  name: 'DirectoryPage',
  $_i18nRootPath: 'users.LISTING',
  components: {
    Page,
    UserCard,
    Link
  },
  computed: {
    extraFields() {
      return ['function', { locations: ['title'] }, 'mobile_phone']
    },
    extraHeaders() {
      return [
        { value: this.$_tr('headers.function') },
        { value: this.$_tr('headers.location') },
        { value: this.$_tr('headers.phone') }
      ]
    },
    extraFilters() {
      return [
        {
          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')
        },
        {
          modelName: 'is_mery_21',
          type: 'checkbox',
          filterOn: 'is_mery_21',
          inputData: [
            {
              label: this.$_tr('filters.isMery21'),
              value: true
            }
          ]
        }
      ]
    }
  },
  methods: {
    extraRows(fields) {
      return [
        {
          id: 'function',
          class: 'function',
          value: fields.function
        },
        {
          id: 'locations',
          class: 'locations',
          value: this.getCheckedData(fields, ['locations', 'data', 0, 'title'])
        },
        {
          id: 'phone',
          class: 'phone',
          value: fields.mobile_phone
        }
      ]
    }
  }
}
</script>

<!-- Code CSS pour ambassadeur RSE ? -->
