<template lang="pug">
  base-input-container.gap-y-2(:label="label")
    q-input(
      v-model="value",
      :class="{'circle': circle, 'font-input': true}",
      :input-style="{ color: textColor, width: width + 'px' , borderColor: borderColor}",
      :borderless="borderless",
      :placeholder="placeholder",
      :outlined="outlined",
      :dense="dense",
      :type="type",
      :filled="filled",
      :bg-color="filled || standout ? '' : 'white'",
      :disable="disabled",
      :rules="rule",
      :lazy-rules="lazyRule",
      :item-aligned="itemAligned",
      :no-error-icon="noErrorIcon",
      :mask="mask",
      :maxlength="maxLength",
      :autogrow="autogrow",
      :square="square",
      :standout="standout"
      :accept="accept"
      hide-bottom-space
    )
      slot.cursor-pointer
</template>

<script>
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";

export default {
  name: "BaseInput",
  components: { BaseInputContainer },
  props: {
    circle: Boolean,
    dense: {
      type: Boolean,
      default: true,
    },
    outlined: {
      type: Boolean,
      default: false,
    },
    square: {
      type: Boolean,
      default: false,
    },
    filled: {
      type: Boolean,
      default: false,
    },
    borderless: {
      type: Boolean,
      default: false,
    },
    autogrow: {
      type: Boolean,
      default: false,
    },
    type: {
      default: "text",
    },
    standout: {
      type: [Boolean, String],
      default: false,
    },
    accept: {
      type: String,
      default: "",
    },
    mask: String,
    width: Number,
    maxLength: Number,
    textColor: String,
    borderColor: String,
    rule: Array,
    lazyRule: [Boolean, String],
    noErrorIcon: Boolean,
    itemAligned: Boolean,
    modelValue: [String, Date, Number],
    placeholder: String,
    disabled: Boolean,
    label: String,
  },
  emits: ["update:modelValue"],
  computed: {
    value: {
      get() {
        return this.type === "date"
          ? this.modelValue?.toISOString().split("T")[0]
          : this.modelValue;
      },
      set(value) {
        this.type === "date"
          ? this.$emit("update:modelValue", value ? new Date(value) : null)
          : this.$emit("update:modelValue", value);
      },
    },
  },
};
</script>

<style lang="sass" scoped>
.font-input
  font-feature-settings: 'pnum' on, 'lnum' on

.circle
  width: 100%
  height: 100%
  border-radius: 50%
  z-index: 5
  opacity: 0
  cursor: pointer
</style>
