<template lang="pug">
  base-input-container.gap-y-2(:label="label")
    q-input(
      v-model="value",
      :class="{'circle': circle}",
      :input-style="{ color: textColor, width: width + 'px' }",
      :borderless="borderless",
      :placeholder="placeholder",
      :outlined="outlined",
      :dense="dense",
      :type="type",
      :filled="filled",
      :disable="disabled",
      :rules="rule",
      :mask="mask",
      :maxlength="maxLength",
      :autogrow="autogrow",
      :square="square",
      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: true,
    },
    square: {
      type: Boolean,
      default: false,
    },
    filled: {
      type: Boolean,
      default: false,
    },
    borderless: {
      type: Boolean,
      default: false,
    },
    autogrow: {
      type: Boolean,
      default: false,
    },
    type: {
      default: "text",
    },
    mask: String,
    width: Number,
    maxLength: String,
    textColor: String,
    rule: Array,
    modelValue: [String, Date],
    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>
.circle
  width: 100%
  height: 100%
  border-radius: 50%
  z-index: 5
  opacity: 0
</style>
