<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">
        <div class="flex column items-center col-grow q-pa-lg">
          <q-avatar size="100px">
            <q-img :src="person.logo"/>
          </q-avatar>
          <div class="flex row items-start justify-center no-wrap">

            <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>

          <q-input
            v-model="person.name"
            dense
            filled
            class = "q-my-sm w100"
            :label = "$t('person_card__name')"
          />

          <q-select
            v-if="companies"
            v-model="person.company"
            :options="companies"
            dense
            filled
            class="q-my-sm 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 v-slot:selected>
                {{ JSON.parse(JSON.stringify(person.company)).name }}
            </template>
          </q-select>

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

          <q-input
            v-model="person.role"
            dense
            filled
            class = "q-my-sm 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 lang="scss">
</style>
