<template>
  <CMyFieldRec
    :title="label"
    table="text"
    :rec="internalModel"
    field="contenuto"
    @update:model-value="modifElem"
    :canEdit="true"
    :canModify="true"
    :fieldtype="costanti.FieldType.html"
    @save="saveFieldElem"
    @update_col="update_col"
  >
  </CMyFieldRec>
  <div v-if="internalModel">
    <q-select
      v-if="internalModel.font"
      v-model="internalModel.font.posiz_text"
      :options="tools.posizTextOptions"
      label="Posizione"
      options-dense
      dense
      emit-value
      map-options
      style="width: 100px"
      @update:model-value="modifElem"
      fill-input
      text-color="white"
    >
    </q-select>
    <CMySlider
      v-if="internalModel.font"
      label="Margine % tra l'immagine"
      v-model="internalModel.font.perc_text"
      :min="0"
      :max="100"
      color="blue"
      addstr="%"
      @update:model-value="modifElem"
    ></CMySlider>
    <CMySlider
      v-if="internalModel.font"
      label="Line Height:"
      v-model="internalModel.font.line_height"
      :min="0.5"
      :max="2"
      color="blue"
      @update:model-value="modifElem"
    ></CMySlider>
    <CMySlider
      v-if="show_maxlength"
      label="Max numero di caratteri:"
      v-model="internalModel.maxlength"
      :min="0"
      :max="1000"
      color="blue"
      addstr=""
      @update:model-value="modifElem"
    ></CMySlider>
    <CMySize
      v-if="show_dimensioni"
      label="Dimensioni:"
      v-model="internalModel.size"
      @update:model-value="modifElem"
    ></CMySize>

    <div>
      Parole Chiave: {autore} {titolo} {descrizione} {date_pub} {ranking} {sottotitolo} {prezzo} {prezzo_scontato}
      {descrizione_estesa}
    </div>

    <q-select
      v-if="internalModel.font"
      v-model="internalModel.font.size"
      :options="tools.fontSizeOptions"
      label="Size Titolo"
      options-dense
      dense
      emit-value
      map-options
      style="width: 120px"
      @update:model-value="modifElem"
      fill-input
      text-color="white"
    >
    </q-select>
  </div>
</template>

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

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