<template>
  <v-col
    :cols="xs"
    :sm="sm || xs"
    :md="md || sm || xs"
    :lg="lg || md || sm || xs"
    :xl="xl || lg || md || sm || xs"
    :xxl="xxl || xl || lg || md || sm || xs"
    :class="$attrs.class + ' px-2'"
    align-self="stretch"
  >
    <v-skeleton-loader
      :min-height="cardViewHeight"
      :max-height="height"
      :type="type"
      v-if="loading"
    ></v-skeleton-loader>
    <v-card v-else class="align-self-stretch" height="100%" ref="cardView">
      <slot></slot>
    </v-card>
  </v-col>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";

const props = defineProps({
  name: {
    type: String
  },
  label: {
    type: String
  },
  height: {
    type: String,
    default: "180px"
  },
  type: {
    type: String,
    default: "paragraph"
  },
  modelValue: {
    type: String
  },
  xs: { type: String, default: 12 },
  sm: { type: String, default: 6 },
  md: { type: String, default: 3 },
  lg: { type: String, default: 2 },
  xl: { type: String },
  xxl: { type: String },
  readonly: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
});

const cardView = ref(null);
const cardViewHeightLocal = ref(props.height);
const cardViewHeight = computed(() => {
  if (cardViewHeightLocal.value < cardView.value?.$el?.clientHeight) {
    cardViewHeightLocal.value = cardView.value?.$el?.clientHeight;
  }
  return cardViewHeightLocal.value;
});
</script>

<style></style>
