<template>
  <div>
    <q-select
      :options="options"
      v-model="model"
      fill-input
      v-bind="{ ...$props, ...$attrs }"
      ref="select"
      hide-selected
      use-input
      :error-message="errorMessage || fgErrorMessage"
      :error="!isFiasValid"
      @filter="filter"
      @input="input"
      :readonly="readonly"
    >
      <template v-if="showManualEnter" #prepend>
        <q-icon class="cursor-pointer" name="add_location" @click="edit">
          <q-tooltip>{{ $t('mAddress.manualEnter') }}</q-tooltip>
        </q-icon>
      </template>
      <template #option="scope">
        <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
          <q-item-section>
            <q-item-label v-html="scope.opt.highlight" />
            <q-item-label v-if="scope.opt.description" caption>{{
              scope.opt.description
            }}</q-item-label>
          </q-item-section>
        </q-item>
      </template>
      <template #no-option>
        <q-item>
          <q-item-section class="text-grey">
            {{ $t('mAddress.addressNotFoundInFIAS') }}
          </q-item-section>
        </q-item>
      </template>
      <template v-if="id" #append>
        <q-icon class="ClearBtn" name="cancel" @click.stop="reset" />
      </template>
    </q-select>

    <q-checkbox
      :label="$t('mAddress.noCity')"
      v-if="FiasLevel === 'region'"
      @input="noPlaceName()"
      v-model="noCity"
    />

    <q-checkbox
      :label="$t('mAddress.noHouse')"
      v-if="FiasLevel === 'street'"
      @input="noPlaceName()"
      v-model="noHouse"
    />

    <q-checkbox
      :label="$t('mAddress.noRoom')"
      v-if="FiasLevel === 'house'"
      @input="noPlaceName()"
      v-model="noRoom"
    />

    <q-dialog v-model="dialog" persistent>
      <q-card class="no-shadow">
        <q-card-section>
          <div class="text-h6">{{ $t('mAddress.address') }}</div>
        </q-card-section>
        <q-card-section>
          <base-address :id.sync="idCast" ref="address" />
        </q-card-section>
        <q-card-actions align="right">
          <q-btn
            v-close-popup
            color="negative"
            flat
            :label="$t('mAddress.cancel')"
          />
          <q-btn
            color="primary"
            flat
            :label="$t('mAddress.save')"
            @click="save"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss" scoped>
.ClearBtn {
  cursor: pointer;
  opacity: 0.6;
  &:hover {
    opacity: 1;
  }
}
</style>
