<template>
    <pn-page-card>
    <template #title>
      <div class="flex items-center justify-between col-grow">
        <div>
          {{ $t('person_card__title') }}
        </div>
        <q-btn
          @click = "goProject()"
          flat round
          icon="mdi-check"
        />
      </div>
    </template>

    <pn-scroll-list>
        <div class="flex column items-center q-ma-lg">
          
          <q-avatar size="100px">
            <q-img :src="person.logo"/>
          </q-avatar>
          
          <div class="flex row items-start justify-center no-wrap q-pb-lg">
            <div class="flex column justify-center">
              <div class="text-bold q-pr-xs text-center">{{ person.tname }}</div>
              <div caption class="text-blue text-caption">{{ person.tusername }}</div>
            </div>
          </div>

            <div class="q-gutter-y-lg w100">
              <q-input
                v-model.trim="person.name"
                dense
                filled
                class = "w100"
                :label = "$t('person_card__name')"
              />

              <q-select
                v-if="companies"
                v-model="person.company"
                :options="companies"
                dense
                filled
                class="w100"
                :label = "$t('person_card__company')"
                >
                <template #option="scope">
                  <q-item v-bind="scope.itemProps">
                    <q-item-section avatar>
                      <q-avatar rounded size="md">
                        <img v-if="scope.opt.logo" :src="scope.opt.logo"/>
                        <pn-auto-avatar v-else :name="scope.opt.name"/>
                      </q-avatar>   
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>{{ scope.opt.name }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </template>
                <template #selected>
                    {{ JSON.parse(JSON.stringify(person.company)).name }}
                </template>
              </q-select>

              <q-input
                v-model.trim="person.department"
                dense
                filled
                class = "w100"
                :label = "$t('person_card__department')"
              />

              <q-input
                v-model.trim="person.role"
                dense
                filled
                class = "w100"
                :label = "$t('person_card__role')"
              />
            </div>
      </div>
    </pn-scroll-list>
  </pn-page-card>
</template>

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

  const router = useRouter()

  const person = ref({id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps', company: '', department: 'test' })

  const companies = ref([
    {id: "com11", value: "com11", name: 'Рога и копытца1', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: [] },
    {id: "com21", name: 'ООО "Василек1"', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', qtyPersons: 2, masked: true, unmasked: [] },
    {id: "ch13", name: 'Откат и деньги1', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', description: 'Договариваются с администрацией',  qtyPersons: 5, masked: false, unmasked: [] },
    {id: "ch14", name: 'Откат и деньги2', logo: '', description: 'Договариваются о чем-то',  qtyPersons: 5, masked: false, unmasked: [] },
    {id: "com111", name: 'Рога и копытца2', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: []},
    {id: "com211", name: 'ООО "Василек2"', logo: '', qtyPersons: 2, masked: true, unmasked: [] },
    {id: "ch131", name: 'Откат и деньги3', logo: '', description: 'Договариваются с администрацией',  qtyPersons: 5, masked: false, unmasked: [] },
  ])


  async function goProject () {

    await router.push({ name: 'project' })
  }
</script>

<style>
</style>
