<template>
  <v-col
    :cols="12"
    :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"
  >
    <div
      :style="`font-size: ${fontSize}px`"
      class="d-flex align-center"
      v-if="title != undefined || icon != undefined"
    >
      <slot name="icon-title-preppend" />
      <v-icon :color="colorIcon" class="mr-2" v-if="!!icon">{{ icon }}</v-icon>
      <slot name="title">
        <span>
          {{ props.title }}
        </span>
      </slot>
      <slot name="icon-title-append" />
    </div>
    <div class="d-flex mt-1" v-if="content != undefined">
      <p
        style="font-size: 0.9m;"
        class="font-weight-bold"
        v-if="type == 'date'"
      >
        {{
          moment(content).isValid()
            ? moment(content)
                .utc()
                .format("DD/MM/YYYY")
            : !!content
            ? content
            : "-"
        }}
      </p>
      <p
        style="font-size: 0.9m;"
        class="font-weight-bold"
        v-else-if="type == 'datetime'"
      >
        {{
          moment(content).isValid()
            ? moment(content)
                .utc()
                .format("DD/MM/YYYY HH:mm")
            : !!content
            ? content
            : "-"
        }}
      </p>
      <p
        style="font-size: 0.9m;"
        class="font-weight-bold"
        v-else-if="type == 'icontruefalse'"
      >
        <v-icon :color="content ? 'success' : 'error'">{{
          !content ? "mdi-close-thick" : "mdi-check-bold"
        }}</v-icon>
      </p>
      <p
        style="font-size: 0.9m;"
        class="font-weight-bold"
        v-else-if="type == 'active'"
      >
        {{ content ? "Ativado" : "Desativado" }}
      </p>
      <p
        style="font-size: 0.9m;"
        class="font-weight-bold"
        v-else-if="type == 'blocked'"
      >
        {{ content ? "Bloqueado" : "Desbloqueado" }}
      </p>
      <p
        style="font-size: 0.9m;"
        class="font-weight-bold"
        v-else-if="type == 'currency'"
      >
        {{
          !!content
            ? Number.parseFloat(content).toLocaleString("pt-BR", {
                style: "currency",
                currency: "BRL",
              })
            : "-"
        }}
      </p>
      <p
        style="font-size: 0.9m;"
        class="font-weight-bold"
        v-else-if="type == 'substring'"
      >
        <v-tooltip :text="content">
          <template v-slot:activator="{ props }">
            <span v-bind="props">
              {{ content.substring(0, 14) + "..." }}
            </span>
          </template>
        </v-tooltip>
      </p>
      <p style="font-size: 0.9m;" class="font-weight-bold" v-else>
        {{ !!content ? content : onlyTitle ? content : "" }}
      </p>
    </div>
    <div class="w-100 font-weight-bold">
      <slot></slot>
    </div>
    <v-divider v-if="showDivider" :thickness="thickness" />
  </v-col>
</template>

<script setup lang="ts">
import moment from "moment";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "",
  },
  xs: { type: String, default: "12" },
  sm: { type: String },
  md: { type: String },
  lg: { type: String },
  xl: { type: String },
  xxl: { type: String },
  icon: {
    type: String,
    default: "",
  },
  colorIcon: {
    type: String,
    default: "",
  },
  thickness: {
    type: Number,
    default: 1,
  },
  showDivider: {
    type: Boolean,
    default: false,
  },
  onlyTitle: {
    type: Boolean,
    default: false,
  },
  fontSize: {
    type: String,
    default: "14",
  },
});
</script>
