<template>
  <div>
    <q-list v-if="managers.length">
      <managers-list-item
        v-for="manager in managers"
        @click="subscribeManagers(manager)"
        :key="manager.id"
        :manager="manager"
      />
    </q-list>
    <div v-else class="q-px-md">Сотрудники не найдены</div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { Manager } from '@/types/Manager'
import UiBtnIcon from '@/lib-components/buttons/UiBtnIcon.vue'
import UiList from '@/lib-components/UiList.vue'
import ManagersListItem from '@/widgets/base/components/managers-select/ManagersListItem.vue'
import { QList } from 'quasar'

@Component({
  components: { UiList, UiBtnIcon, ManagersListItem, QList },
})
export default class SearchResult extends Vue {
  @Prop({ type: Array, required: true })
  managers!: Manager[]

  @Emit()
  subscribeManagers(manager: Manager) {
    return [manager]
  }
}
</script>
