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

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

import UserCard from '../../components/users/UserCard'

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