57 lines
2.1 KiB
Vue
57 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import Card from 'primevue/card';
|
|
import { computed } from 'vue';
|
|
import type { FixedAssetStructure } from '../../types/fixedAssetStructure';
|
|
|
|
interface Props {
|
|
structure: FixedAssetStructure;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const contentsTotal = computed(() =>
|
|
props.structure.contents.reduce((sum, item) => sum + item.value, 0)
|
|
);
|
|
|
|
const totalStructureValue = computed(() => props.structure.containerValue + contentsTotal.value);
|
|
|
|
const formatCurrency = (value: number) =>
|
|
`$${value.toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="summary-card border-0 shadow-lg">
|
|
<template #content>
|
|
<div class="space-y-4 text-white">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.2em] opacity-90">
|
|
Resumen de valoracion
|
|
</p>
|
|
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="opacity-90">Valor de contenedor</span>
|
|
<strong class="text-xl">{{ formatCurrency(structure.containerValue) }}</strong>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="opacity-90">Valor de contenidos ({{ structure.contents.length }})</span>
|
|
<strong class="text-xl">{{ formatCurrency(contentsTotal) }}</strong>
|
|
</div>
|
|
|
|
<div class="border-t border-white/20 pt-4">
|
|
<p class="text-xs uppercase tracking-wide opacity-80">Valor total de estructura</p>
|
|
<p class="mt-1 text-4xl font-black leading-none">{{ formatCurrency(totalStructureValue) }}</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg bg-white/12 p-3 text-xs leading-relaxed opacity-95">
|
|
El valor total se calcula sumando el activo base mas todos los elementos vinculados.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.summary-card {
|
|
background: linear-gradient(145deg, #1f7ae0 0%, #0b60c2 100%);
|
|
}
|
|
</style>
|