<template>
  <div>
    <v-text-field
      :style="
        isEventItem && !disabled
          ? 'display: inline-block; width: calc(100% - 44px)'
          : ''
      "
      :name="Math.random()"
      autocomplete="new-password"
      :min="min"
      :max="max ? max : '9999-12-31T23:59'"
      type="datetime-local"
      v-model="dateValue"
      :label="label || ''"
      :disabled="disabled"
      :size="isEventItem ? $t('DATE_FORMAT_SECONDS').length : undefined"
      :class="{
        cursorDefault: disabled,
        cursorPointer: !disabled,
        'pt-2': dense,
        datetimePicker: true,
      }"
      :hide-details="typeof hideDetails != 'undefined' ? !!hideDetails : true"
      :rules="isRequired ? [required] : []"
    >
      <template v-slot:label v-if="isRequired">
        {{ label }}
        <span class="error--text"><strong>(*)</strong></span>
      </template>
      <font-awesome-icon
        v-if="icon"
        slot="append-outer"
        class="fa-md"
        :icon="['fas', icon]"
      ></font-awesome-icon>
    </v-text-field>
    <v-btn
      @click="emitChangeDateTime(true)"
      v-if="isEventItem && !disabled"
      :disabled="!isDateValid"
      icon
      class="ml-2"
      color="primary"
    >
      <font-awesome-icon class="fa-lg" :icon="['fas', 'save']" />
    </v-btn>
  </div>
</template>

<script src="./datetimePicker.js"></script>
<style src="./datetimePicker.scss" lang="scss" scoped/>
