boursecu_user/src/views/base/physicalReceive/components/PhysicalReceiveCartRow.vue

<template>
  <div>
    <div class="flex">
      <div class="bg-gray-100 m-2 rounded-lg w-18 h-18 flex justify-center p-1 shrink-0">
        <img :src="displayImage" class="object-contain w-full h-full" alt="" />
      </div>
      <div class="w-full min-w-0">
        <div class="pr-cart-row__head">
          <div class="truncate text-base font-bold">{{ item.product.title }}</div>
          <BasicButton
            icon="vuesax-linear:trash"
            icon-class="text-red"
            class="pr-cart-row__trash shrink-0"
            @click="emit('remove', item.product.id)"
          />
          <div class="pr-cart-row__stock text-xs">
            <span>مقدار موجودی</span>
            <span class="font-bold">{{ displayGold }}</span>
            <span>{{ quantityUnit }}</span>
            <div
              v-if="minDeliveryQuantity > 0"
              class="mt-0.5 w-full text-xs text-gray-500"
            >
              حداقل مقدار تحویل:
              <span class="font-bold text-gray-700">{{ displayMinDelivery }}</span>
              {{ quantityUnit }}
            </div>
            <div
              v-if="getProductUnitWeightLabel(item.product)"
              class="mt-0.5 text-xs text-gray-500"
            >
              هر عدد {{ getProductUnitWeightLabel(item.product) }}
            </div>
          </div>
        </div>
        <div class="mt-2 flex justify-between items-center gap-2">
          <div class="shrink-0">{{ isCountBased ? 'تعداد درخواستی:' : 'مقدار درخواستی:' }}</div>
          <div
            class="flex items-center gap-1"
            :class="variant === 'desktop' ? 'dpr-cart-row__input' : 'pr-cart-row__input'"
            @focusin="selectCountInput"
          >
            <BasicInput
              v-model:value="item.count"
              :addon-before="quantityUnit"
              type="number"
              :inputmode="isCountBased ? 'numeric' : 'decimal'"
              @update:value="onCountInput"
            />
          </div>
        </div>
        <div v-if="countError" class="mt-1 text-xs text-red-600">{{ countError }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
import type { CountPInventory } from '@/models/products'
import { getProductDisplayImage } from '@/utils/productAssets'
import {
  getProductQuantityUnit,
  getProductUnitWeightLabel,
  isCountBasedProduct,
} from '@/utils/productDealMethod'
import { formatGoldAmount, usePriceWithoutType } from '@/utils/usePrice'
import { normalizeDecimalInput } from '@/utils/persianDigits'

interface Props {
  item: CountPInventory
  variant?: 'mobile' | 'desktop'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'mobile',
})

const countError = ref('')
const isCountBased = computed(() => isCountBasedProduct(props.item.product))
const quantityUnit = computed(() => getProductQuantityUnit(props.item.product))

const displayImage = computed(() =>
  getProductDisplayImage({
    group_type: props.item.product.group_type,
    title: props.item.product.title,
    file: props.item.product.file,
  })
)

const displayGold = computed(() => {
  const gold = Number(props.item.product.wallet?.gold ?? 0)
  return isCountBased.value ? usePriceWithoutType(gold, false) : formatGoldAmount(gold)
})

const minDeliveryQuantity = computed(() => {
  const min = Number(props.item.product.min_physical_delivery_quantity ?? 0)
  return Number.isFinite(min) && min > 0 ? min : 0
})

const displayMinDelivery = computed(() => {
  if (minDeliveryQuantity.value <= 0) return ''
  return isCountBased.value
    ? usePriceWithoutType(minDeliveryQuantity.value, false)
    : formatGoldAmount(minDeliveryQuantity.value)
})

function selectCountInput(e: FocusEvent) {
  const el = e.target as HTMLInputElement | null
  if (!el || el.tagName !== 'INPUT' || typeof el.select !== 'function') return
  // تا کاربر با تایپ عدد جدید، مقدار قبلی را جایگزین کند
  requestAnimationFrame(() => el.select())
}

function onCountInput(raw: string | number) {
  countError.value = ''
  const normalized = normalizeDecimalInput(String(raw ?? '').trim(), {
    commaAsThousand: isCountBased.value,
  })
  if (!normalized) {
    props.item.count = 0 as any
    return
  }

  const numeric = Number(normalized)
  if (!Number.isFinite(numeric)) {
    countError.value = 'مقدار معتبر وارد کنید'
    return
  }

  if (isCountBased.value) {
    if (numeric % 1 !== 0) {
      countError.value = 'برای محصول تعدادی فقط عدد صحیح مجاز است'
      props.item.count = Math.floor(numeric) as any
      return
    }
    props.item.count = Math.floor(numeric) as any
  }
}

watch(
  () => props.item.count,
  (value) => {
    if (!isCountBased.value) return
    const numeric = Number(value)
    if (Number.isFinite(numeric) && numeric % 1 !== 0) {
      props.item.count = Math.floor(numeric) as any
      countError.value = 'برای محصول تعدادی فقط عدد صحیح مجاز است'
    }
  }
)

const emit = defineEmits<{
  remove: [id: number]
}>()
</script>

<style scoped lang="less">
.pr-cart-row__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.5rem;
  row-gap: 0.125rem;
  align-items: start;
}

.pr-cart-row__trash {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

.pr-cart-row__stock {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.pr-cart-row__input {
  width: auto;
  max-width: 10rem;

  :deep(.noname-input),
  :deep(.ant-input-group-wrapper) {
    width: 100%;
  }

  :deep(.ant-input-group-addon) {
    min-width: 3.75rem;
    padding-inline: 6px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
  }
}
</style>