salix-front/src/components/ui/VnCurrency.vue

55 lines
1.5 KiB
Vue

<script setup>
import { toCurrency } from 'src/filters';
import { computed, onMounted, ref } from 'vue';
import { useArrayData } from 'src/composables/useArrayData';
const $props = defineProps({
model: {
type: Object,
required: true,
description: 'object to use foreignField and localField',
},
currencyCode: {
type: String,
default: undefined,
},
foreignField: {
type: String,
default: 'foreignPrice',
},
localField: {
type: String,
default: 'price',
},
arrayDataModel: {
type: String,
default: undefined,
description: 'find currency code in array data model',
},
});
const arrayData = $props.arrayDataModel && useArrayData($props.arrayDataModel);
const foreignValue = computed(() => $props.model?.[$props.foreignField]);
const localValue = computed(() => $props.model?.[$props.localField]);
const currency = computed(
() => $props.currencyCode ?? arrayData.store.data?.currency?.code
);
const toCurrencyLabel = computed(() =>
toCurrency(foreignValue.value ?? localValue.value, currency.value)
);
const currencyCodeModel = ref();
// onMounted(() => {
// if ($props.arrayDataModel) {
// currencyCodeModel.value = arrayData.store.data?.currency?.code;
// }
// });
</script>
<template>
<span :title="toCurrencyLabel" v-if="currency && localValue">
<span v-if="foreignValue">{{ toCurrencyLabel }} /</span>
{{ toCurrency(localValue) }}
</span>
<span v-else>-</span>
</template>