<template>
  <div class="q-pt-md" v-if="mapUsers.length !==0 ">
    <span class="q-pl-md text-h6">
      {{ $t('company_info__users') }}
    </span>

    <q-list separator>
      <q-item
        v-for="item in mapUsers"
        :key="item.id"
        v-ripple
        clickable
        @click="goPersonInfo(item.id)"
        >
        <q-item-section avatar>
          <pn-auto-avatar
            :img="item.photo"
            :name="item.section1"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label lines="1" class="text-bold" v-if="item.section1">
            {{item.section1}}
          </q-item-label>
          <q-item-label caption lines="2">
            <span v-if="item.section2_1" class="q-mr-sm">{{item.section2_1}}</span>
            <span class="text-blue" v-if="item.section2_2">{{'@' + item.section2_2}}</span>
          </q-item-label>
          <q-item-label lines="1" v-if="item.section3">
            {{item.section3}}
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { useUsersStore } from 'stores/users'
 import type { User } from 'types/Users'
 const usersStore = useUsersStore()
 const router = useRouter()
 const route = useRoute()

 const currentCompanyId = Number(route.params.companyId)
 
 const users = usersStore.users

 const mapUsers = users
  .filter(el => el.company_id === currentCompanyId)
  .map(el => ({...el, ...userSection(el)}))
 

  async function goPersonInfo (userId: number) {
    await router.push({ name: 'user_info', params: { id: route.params.id, userId }})
  }

  // copy from 'pages/project-page/ProjectPageUsers.vue' кроме company.name
  function userSection (user: User) {
    const tname = () => {
      return user.firstname
          ? user.lastname
            ? user.firstname + ' ' + user.lastname
            : user.firstname
          : user.lastname ?? ''
    }

    const section1 = user.name
      ? user.name
      : tname()

    const section2_1 = user.name
      ? tname()
      : ''

    const section2_2 = user.username ?? ''

    const section3 = (
    user.department
      ? user.department + ' '
      : ''
    ) + (
    user.role ?? ''
    ) 

    return {
      section1,
      section2_1, section2_2,
      section3
    }
  }
</script>

<style scoped>
</style>
