85 lines
2.0 KiB
Vue
85 lines
2.0 KiB
Vue
<template>
|
|
<a-select
|
|
:value="modelValue || undefined"
|
|
:disabled="disabled"
|
|
:loading="loading"
|
|
allow-clear
|
|
show-search
|
|
placeholder="انتخاب محصول زرباکس"
|
|
class="w-full"
|
|
option-filter-prop="label"
|
|
@update:value="onSelectChange"
|
|
>
|
|
<a-select-option
|
|
v-for="item in allOptions"
|
|
:key="item.key"
|
|
:value="item.key"
|
|
:label="`${item.name} ${item.key}`"
|
|
>
|
|
<div class="leading-snug">
|
|
<div>
|
|
{{ item.name }}
|
|
<span v-if="item.price > 0" class="text-gray-500">({{ formatPrice(item.price) }} ریال)</span>
|
|
<span v-else class="text-gray-400">(بدون قیمت)</span>
|
|
</div>
|
|
<div class="text-xs text-gray-400 direction-ltr text-right">{{ item.key }}</div>
|
|
</div>
|
|
</a-select-option>
|
|
</a-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { getZaarboxProducts, type ZaarboxProductOption } from '@/api/price'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue: string
|
|
disabled?: boolean
|
|
}>(),
|
|
{ disabled: false }
|
|
)
|
|
|
|
const emit = defineEmits<{ 'update:value': [value: string] }>()
|
|
|
|
const loading = ref(false)
|
|
const options = ref<ZaarboxProductOption[]>([])
|
|
|
|
const allOptions = computed(() => {
|
|
const current = (props.modelValue ?? '').trim()
|
|
if (!current || options.value.some((item) => item.key === current)) {
|
|
return options.value
|
|
}
|
|
|
|
return [
|
|
{ key: current, name: current, id: '', category: '', active: true, price: 0 },
|
|
...options.value,
|
|
]
|
|
})
|
|
|
|
function formatPrice(value: number): string {
|
|
return value.toLocaleString('en-US')
|
|
}
|
|
|
|
onMounted(() => {
|
|
void loadOptions()
|
|
})
|
|
|
|
async function loadOptions() {
|
|
loading.value = true
|
|
try {
|
|
const response = await getZaarboxProducts()
|
|
options.value = response?.data?.items ?? []
|
|
} catch (e) {
|
|
console.error(e)
|
|
options.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function onSelectChange(val: string | undefined) {
|
|
emit('update:value', val ?? '')
|
|
}
|
|
</script>
|