<template>
  <div v-if="!!myrec">
   <q-bar dense class="bg-blue text-white">
    {{ label }}
    </q-bar>
    <div class="row">
      <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        rounded
        style="width: 150px"
        outlined
        v-model="myrec.name"
        :options="tools.SelectListAnimation"
        @update:model-value="updateClass"
        dense
        label="Tipo:"
        emit-value
        map-options
      >
      </q-select>

      <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        rounded
        style="width: 150px"
        outlined
        v-model="myrec.timingtype"
        :options="tools.SelectListTimingType"
        @update:model-value="updateClass"
        dense
        label="Timing:"
        emit-value
        map-options
      >
      </q-select>
    </div>

    <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
      rounded
      style="width: 150px"
      outlined
      v-model="myrec.clduration"
      :options="tools.SelectListSpeed"
      @update:model-value="updateClass"
      dense
      label="Speed:"
      emit-value
      map-options
    >
    </q-select>

    <q-select
          :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
      rounded
      style="width: 150px"
      outlined
      v-model="myrec.cldelay"
      :options="tools.SelectListDelay"
      @update:model-value="updateClass"
      dense
      label="Ritardo:"
      emit-value
      map-options
    >
    </q-select>
  </div>
</template>

<script lang="ts" src="./CSelectAnimation.ts">
</script>
<style lang="scss" scoped>
@import './CSelectAnimation.scss';
</style>
