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">{{ item.product.wallet.gold }}</span>
            <span>{{ getProductQuantityUnit(item.product) }}</span>
            <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">تعداد درخواستی:</div>
          <div
            class="flex items-center gap-1 "
            :class="variant === 'desktop' ? 'dpr-cart-row__input' : 'pr-cart-row__input'"
          >
            <BasicInput
              v-model:value="item.count"
              :addon-before="getProductQuantityUnit(item.product)"
              :addon-bg-color="config.config?.color"
              addon-text-color="white"
              type="text"
              inputmode="numeric"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
import { useConfigStore } from '@/store/configStore'
import type { CountPInventory } from '@/models/products'
import { getProductDisplayImage } from '@/utils/productAssets'
import { getProductQuantityUnit, getProductUnitWeightLabel } from '@/utils/productDealMethod'

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

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

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

const config = useConfigStore()

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>