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

    <pn-scroll-list>
      <div class="flex column items-center q-ma-lg">
        <div class="q-gutter-y-lg w100">
          <q-input
            v-model.trim="task.name"
            dense
            filled
            autogrow
            :label = "$t('task_add__name')"
            class="bold-input w100"
          />

          <q-input
            v-model.trim="task.description"
            dense
            filled
            autogrow
            class = "w100"
            :label = "$t('task_add__description')"
          />

          <q-file
            v-model="task.files"
            :label="$t('task_add__attach_files')"
            outlined
            use-chips
            multiple
            dense
            class="file-input-fix"
            >
            <template #append>
              <q-icon name="attach_file"/>
            </template>
          </q-file>

          <q-select
            v-if="companies"
            v-model="task.company"
            :options="companies"
            dense
            filled
            class="w100"
            :label = "$t('task_add__assigned_to')"
            >
            <template #prepend>
              <q-icon name="mdi-account-arrow-left-outline"/>
            </template>
            <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(task.company)).name }}
            </template>
          </q-select>

          <q-select
            v-if="companies"
            v-model="task.company"
            :options="companies"
            dense
            filled
            class="w100"
            :label = "$t('task_add__watch')"
            >
            <template #prepend>
              <q-icon name="mdi-account-eye-outline"/>
            </template>
            <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(task.company)).name }}
            </template>
          </q-select>

          <q-input filled v-model="task.date" dense :label="$t('task_add__plan_date')">
            <template #prepend>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                  <q-date v-model="task.date" mask="YYYY-MM-DD HH:mm">
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="Close" color="primary" flat></q-btn>
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>

            <template #append>
              <q-icon name="access_time" class="cursor-pointer">
                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                  <q-time v-model="task.date" mask="YYYY-MM-DD HH:mm" format24h>
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="Close" color="primary" flat></q-btn>
                    </div>
                  </q-time>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>

          <div class="flex column">

            <q-item-label header class="q-py-none q-my-none">
              {{$t('task_add__priority')}}
            </q-item-label>  

            <q-btn-toggle
              v-model="task.priority"
              no-caps
              toggle-color="primary"
              spread
              unelevated
              :options="priority"
              class="q-mt-sm w100"
              >
              <template v-for="item in priority" :key="item.id" #[item.slot]>
                <div class="row items-center no-wrap gap-xs text-weight-regular">
                  <span>
                    {{ $t(item.translationKey) }}
                  </span>
                  <pn-task-priority-icon :priority="item.value"/>
                </div>
              </template>
            </q-btn-toggle>

          </div>

          <q-select
            v-if="companies"
            v-model="task.company"
            :options="companies"
            dense
            filled
            class="w100"
            :label = "$t('meeting_add__attached_chat')"
            >
            <template #prepend>
              <q-icon name="mdi-chat-outline"/>
            </template>
            <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(task.company)).name }}
            </template>
          </q-select>
        </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 task = ref({id: "p1", name: 'Кирюшкин Андрей', description: 'fdsfdsfsdfs', company: '', priority: 1, department: 'test', files: [], date: new Date(Date.now()).toLocaleString() })
const priority = [
  { id: 1, slot: 's1', label: '', translationKey: 'task_add__priority_normal', value: 0 },
  { id: 2, slot: 's2', label: '', translationKey: 'task_add__priority_important', value: 1 },
  { id: 3, slot: 's3', label: '', translationKey: 'task_add__priority_critical', value: 2 }
]

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 createMeeting () {
  await router.push({ name: 'meetings' })
}
</script>

<style scoped>
  .bold-input::v-deep .q-field__native {
    font-weight: bold;
  }

  .file-input-fix :deep(.q-field__append) {
    height: auto !important;
  }
</style>
