<template>
  <div class="q-pt-md">
    <span class="q-pl-md text-h6">
      {{ $t('company_info__persons') }}
    </span>

    <q-list separator>
      <q-item
        v-for="item in persons"
        :key="item.id"
        v-ripple
        clickable
        @click="goPersonInfo()"
        >
        <q-item-section avatar>
          <q-avatar>
            <img v-if="item.logo" :src="item.logo"/>
            <pn-auto-avatar v-else :name="item.name"/>
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label lines="1" class="text-bold">
            {{item.name}}
          </q-item-label>
          <q-item-label caption lines="2">
            <span>{{item.tname}}</span>
            <span class="text-blue q-ml-sm">{{item.tusername}}</span>
          </q-item-label>
          <q-item-label lines="1">
            {{item.role}}
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>

<script setup lang="ts">
 import { useRouter } from 'vue-router'

  const router = useRouter()

  const persons = [
    {id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps' },
    {id: "p2", name: 'Пупкин Василий Александрович', logo: '', tname: 'Pupkin', tusername: '@super_pupkin', role: 'Руководитель проекта' },
    {id: "p3", name: 'Макарова Полина', logo: 'https://cdn.quasar.dev/img/avatar6.jpg', tname: 'Unikorn', tusername: '@unicorn_stars', role: 'Администратор' },
    {id: "p4", name: 'Жабов Максим', logo: '', tname: 'Zhaba', tusername: '@Zhabchenko', role: 'Аналитик' },
  ]

  async function goPersonInfo () {
    console.log('update')
    await router.push({ name: 'person_info' })
  }
</script>

<style scoped>
</style>
