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

<template>
  <div
    class="rounded-lg shadow-md mx-2 bg-gradient-to-l from-primary rounded-lg p-[2px] to-transparent"
    :class="{ 'dpr-item': variant === 'desktop' }"
  >
    <div class="rounded-lg flex flex-col gap-2 bg-white p-2">
      <div class="flex justify-between">
        <div class="font-bold">شماره سند: {{ props.item.id }}</div>
        <div class="font-bold">{{ toJalali(props.item.created_at) }}</div>
      </div>
      <div class="flex justify-between">
        <div class="flex flex-col w-full gap-1">
          <div
            v-for="tx in props.item.transaction"
            :key="tx.id ?? tx.title"
            class="w-full flex justify-between"
          >
            <div class="flex items-center gap-1">
              <div class="w-7 h-7 flex justify-center rounded-lg bg-gray-100">
                <img
                  width="30"
                  class="p-1 object-contain"
                  :src="getProductDisplayImage(tx.product)"
                  alt=""
                />
              </div>
              <div>{{ tx.title }}</div>
            </div>
            <div>{{ tx.gold * -1 }} عدد</div>
          </div>
        </div>
      </div>
      <div class="flex justify-between">
        <div class="font-bold">وضعیت:</div>
        <ATag color="blue" class="!py-1 !px-2 !ml-0">
          {{ props.item.sts_str }}
        </ATag>
      </div>
      <ADivider class="!m-1" />
      <div class="flex flex-col justify-between">
        <div class="font-bold">آدرس:</div>
        <div>
          {{ props.item.address.province }}/{{ props.item.address.city }}/{{ props.item.address.address }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Physicalreceive } from '@/models/physicalreceive'
import { toJalali } from '@/utils/useDateTime'
import { getProductDisplayImage } from '@/utils/productAssets'

interface Prop {
  item: Physicalreceive
  variant?: 'mobile' | 'desktop'
}

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