<template>
  <div class="q-pa-none flex column col-grow no-scroll">
    <pn-scroll-list>
      <template #card-body-header>
        <div class="flex row q-ma-md justify-between">
          <q-input
            v-model="search"
            clearable
            clear-icon="close"
            :placeholder="$t('project_persons__search')"
            dense
            class="col-grow"
            >
            <template #prepend>
              <q-icon name="mdi-magnify" />
            </template>
          </q-input>
        </div>
      </template>

      <q-list separator>
        <q-item
          v-for="item in displayPersons"
          :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.company.name +', ' + item.role }}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </pn-scroll-list>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  defineOptions({ inheritAttrs: false })

  const router = useRouter()
  const search = ref('')

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

  const displayPersons = computed(() => {
    if (!search.value || !(search.value && search.value.trim())) return persons
    const searchValue = search.value.trim().toLowerCase()
    const arrOut = persons
      .filter(el =>
        el.name.toLowerCase().includes(searchValue) ||
        el.tname && el.tname.toLowerCase().includes(searchValue) ||
        el.tusername && el.tusername.toLowerCase().includes(searchValue) ||
        el.role && el.role.toLowerCase().includes(searchValue) ||
        el.company.name && el.company.name.toLowerCase().includes(searchValue)
      )
    return arrOut
  })

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

</script>

<style>
</style>
