<template>
  <div style="width: 380px">
    <q-banner
      rounded
      dense
      class="bg-blue-1 text-red"
      color="primary q-title"
      style="text-align: center"
    >
      {{ label }}
    </q-banner>

    <div v-if="internalModel" class="sfondo_margine row">
      <CMySize
        v-if="showDim"
        label="Dimensioni:"
        v-model="internalModel.size"
        @update:model-value="modifSize"
      ></CMySize>
      <CBorders
        label="Margini:"
        v-model="internalModel.margini"
        @update:model-value="modifMargini"
      ></CBorders>
      <CBorders
        label="Padding:"
        v-model="internalModel.padding"
        @update:model-value="modifPadding"
      ></CBorders>

      <div v-if="show_imgsfondo">
        {{ internalModel.imgsfondo?.imagefile }}<br />
        <q-select
          v-model="internalModel.imgsfondo.fit"
          :options="tools.SelectListFit"
          label="Dimensione Img"
          options-dense
          dense
          emit-value
          map-options
          style="width: 100px"
          @update:model-value="modifElem"
          fill-input
          text-color="white"
        >
        </q-select>

        <CMyFieldRec
          title="Immagine Sfondo:"
          table="imgs"
          :rec="internalModel.imgsfondo"
          field="imagefile"
          :path="path"
          @update:model-value="modifElem"
          :canEdit="true"
          :canModify="true"
          :fieldtype="costanti.FieldType.image"
          @save="saveFielDim"
        >
        </CMyFieldRec>
      </div>
    </div>
  </div>
</template>

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

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