<template>
  <div class="q-ma-sm">
    <div class="text-center">
      <q-spinner
        v-if="!loadpage"
        color="primary"
        size="3em"
        :thickness="2"
      />
    </div>
    <div
      v-if="loadpage"
      class="panel"
    >
      <div class="text-h6 text-bold text-blue text-center">Cerca un Titolo:</div>
      <div
        class="col"
        v-for="(item, index) in searchList"
        :key="index"
      >
        <CMySelect
          v-if="item.type === costanti.FieldType.select || item.type === costanti.FieldType.select_by_server"
          :col="fieldsTable.getColByColumns(mycolumns, item.key)"
          :label="item.value && item.value._id > 0 ? undefined : labelcombo(item)"
          v-model:value="item.value"
          :addall="item.addall"
          :addnone="item.addnone"
          :addlast="true"
          :tablesel="item.type === costanti.FieldType.select_by_server ? item.tablesel : ''"
          :pickup="item.type === costanti.FieldType.select_by_server"
          color="primary"
          myclass=""
          :icon_alternative="item.icon"
          :optval="fieldsTable.getKeyByTable(item.table)"
          :optlab="fieldsTable.getLabelByTable(item.table)"
          :options="valoriopt(item, false)"
          :filter="item.filter"
          :filter_extra="item.filter_extra"
          :useinput="item.useinput && item.type !== costanti.FieldType.select_by_server"
          @clear="item.value = ''"
        >
        </CMySelect>
      </div>

      <div
        v-if="myproduct?._id"
        class="row justify-center"
        style="height: 400px; text-align: center;"
      >
        <CContainerCatalogoCard
          :id="myproduct._id"
          :product="myproduct"
          :complete="false"
          :cosa="0"
          v-model="optcatalogo"
          :idPage="idPage"
          :options="{
            show_edit_book: tools.isEditor(),
          }"
          @selauthor="selauthor"
          :scheda="optcatalogo.arrSchede[0].scheda"
        />
      </div>
    </div>
  </div>
</template>

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

<style lang="scss">
@import './CSearchProduct.scss';
</style>
