<template>
  <pn-page-card>
    <template #title>
      <div class="col-grow">
        {{$t('company__mask')}}
      </div>
    </template>
    <pn-scroll-list>
      <template #card-body-header>
        <div style="min-height: var(--top-raduis);"/>
      </template>
      <q-list
        separator
        >
        <q-item>
          <q-item-section>
            <div>
              <q-btn flat round color="primary" icon="mdi-help-circle-outline" @click="showDialogHelp = true" />
            </div>
          </q-item-section>
          <q-item-section></q-item-section>
          <q-item-section align="end" class="col-grow">
            {{ $t('mask__title_table') }}
          </q-item-section>
        </q-item>
        <q-item
          v-for = "company in companies"
          :key="company.id"
          class="w100"
          >
          <q-item-section>
            <q-checkbox
              v-model="company.masked"
              :label="company.name"
              unchecked-icon="mdi-drama-masks"
              checked-icon="mdi-drama-masks"
              :class="company.masked ? 'masked' : 'unmasked'"
            />
          </q-item-section>
          <q-item-section>
            <q-select
              v-if="company.masked"
              v-model="company.unmasked"
              multiple
              :options="companiesSelect(company.id)"
              dense
              borderless
              dropdown-icon="mdi-plus"
              class="fix-select"
              >
              <template #selected>
                <div
                  v-for="(comp, idx) in company.unmasked"
                  :key=idx
                  class="q-pa-xs"
                  >
                  <q-avatar rounded size="md">
                    <img v-if="comp['logo']" :src="comp['logo']"/>
                    <pn-auto-avatar v-else :name="comp['name']"/>
                  </q-avatar>
                </div>
              </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>
            </q-select>
          </q-item-section>
        </q-item>
        <q-item 
          class="q-pa-none q-ma-none"
          style="min-height: 18px"
          >
          <div class="q-py-none flex column w100"/>
        </q-item>
      </q-list>
    </pn-scroll-list>
    
    <q-dialog v-model="showDialogHelp">
      <q-card class="q-ma-sm w100">
        <q-card-section class="row items-center q-pb-none">
          <span class="text-h6">
            <q-icon name="mdi-drama-masks"/>
            {{ $t('mask__help_title')}}
          </span>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup />
        </q-card-section>
        <q-card-section class="q-pt-sm">
          {{ $t('mask__help_message')}}
        </q-card-section>
      </q-card>
    </q-dialog>
  </pn-page-card>
</template>
    
<script setup lang="ts">
  import { ref } from 'vue'
  // import { useCompaniesStore } from 'src/stores/companies'

  const showDialogHelp = ref<boolean>(false)
  // const companiesStore =  useCompaniesStore()

  // const companies = computed(() => companiesStore.companies)

  const companies = ref([
    {id: "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: [] },
  ])

  function companiesSelect (id :string) {
    return  companies.value
      .map(el => ({
        id: el.id,
        name: el.name,
        logo: el.logo 
      }))
      .filter(el => el.id !== id)
  }

</script>

<style scoped lang="scss">

  :deep(.fix-select .q-field__control) {
    align-items: center;
  }

  :deep(.fix-select .q-icon) {
    color: $green-14 !important;
  }

  :deep(.masked .q-icon) {
    color: red;
    opacity: 1;
  }

  :deep(.unmasked .q-icon) {
    color: grey;
    opacity: 0.5;
  }
</style>

