80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<template>
|
|
<Card padding="md" interactive @click="$emit('select')">
|
|
<!-- Header: Location + Price -->
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div>
|
|
<Text weight="semibold">{{ locationName || 'Локация' }}</Text>
|
|
<Text v-if="productName" tone="muted" size="sm">{{ productName }}</Text>
|
|
</div>
|
|
<Text v-if="priceDisplay" weight="semibold" class="text-primary text-lg">
|
|
{{ priceDisplay }}
|
|
</Text>
|
|
</div>
|
|
|
|
<!-- Supplier info -->
|
|
<SupplierInfoBlock v-if="kycProfileUuid" :kyc-profile-uuid="kycProfileUuid" class="mb-3" />
|
|
|
|
<!-- Route stepper -->
|
|
<RouteStepper
|
|
v-if="stages.length > 0"
|
|
:stages="stages"
|
|
:start-name="startName"
|
|
:end-name="endName"
|
|
/>
|
|
</Card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RouteStage } from './RouteStepper.vue'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
locationName?: string
|
|
productName?: string
|
|
pricePerUnit?: number | null
|
|
currency?: string | null
|
|
unit?: string | null
|
|
stages?: RouteStage[]
|
|
startName?: string
|
|
endName?: string
|
|
kycProfileUuid?: string | null
|
|
}>(), {
|
|
stages: () => []
|
|
})
|
|
|
|
defineEmits<{
|
|
select: []
|
|
}>()
|
|
|
|
const priceDisplay = computed(() => {
|
|
if (!props.pricePerUnit) return null
|
|
const currSymbol = getCurrencySymbol(props.currency)
|
|
const unitName = getUnitName(props.unit)
|
|
const formattedPrice = props.pricePerUnit.toLocaleString()
|
|
return `${currSymbol}${formattedPrice}/${unitName}`
|
|
})
|
|
|
|
const getCurrencySymbol = (currency?: string | null) => {
|
|
switch (currency?.toUpperCase()) {
|
|
case 'USD': return '$'
|
|
case 'EUR': return '€'
|
|
case 'RUB': return '₽'
|
|
case 'CNY': return '¥'
|
|
default: return '$'
|
|
}
|
|
}
|
|
|
|
const getUnitName = (unit?: string | null) => {
|
|
switch (unit?.toLowerCase()) {
|
|
case 'т':
|
|
case 'ton':
|
|
case 'tonne':
|
|
return 'тонна'
|
|
case 'кг':
|
|
case 'kg':
|
|
return 'кг'
|
|
default:
|
|
return 'тонна'
|
|
}
|
|
}
|
|
</script>
|