boursecu_user/src/views/base/transactions/components/Item.vue

<template>
  <button
    v-if="variant === 'desktop'"
    type="button"
    class="dtxn-row"
    @click="infoVisible = true"
  >
    <span
      class="dtxn-row__icon"
      :class="isUp ? 'dtxn-row__icon--up' : 'dtxn-row__icon--down'"
    >
      <Icon :icon="`vuesax-linear:${isUp ? 'arrow-up-2' : 'arrow-down-2'}`" size="18" />
    </span>
    <div class="dtxn-row__main">
      <p class="dtxn-row__title">{{ props.item.title }}</p>
      <div class="dtxn-row__meta">
        <span>{{ toJalaliOutOfUTC(props.item.expire_at) }}</span>
        <span :class="goldAmount >= 0 ? 'text-green-600' : 'text-red-600'">
          {{ formatGoldAmount(goldAmount) }} {{ props.item.unit }}
        </span>
        <span v-if="isGold">
          قیمت معامله:
          {{ usePriceWithoutType(tradePrice) }}
          ریال
        </span>
      </div>
    </div>
    <div
      class="dtxn-row__amount"
      :class="props.item.cash > 0 ? 'dtxn-row__amount--up' : 'dtxn-row__amount--down'"
    >
      {{ usePriceWithoutType(props.item.cash ?? 0) }} ریال
    </div>
    <div class="dtxn-row__status">
      <ATag color="blue" class="!py-1 !px-4 !ml-0 !text-xs">
        {{ props.item.order?.sts_str ?? props.item.withdraw?.sts_str }}
      </ATag>
    </div>
  </button>

  <div v-else @click="infoVisible = true">
    <div class="flex">
      <div
        :class="isUp ? 'bg-green-50' : 'bg-red-50'"
        class="rounded-lg p-3 h-fit w-fit flex justify-center items-center"
      >
        <Icon
          :class="isUp ? 'text-green-600' : 'text-red-600'"
          :icon="`vuesax-linear:${isUp ? 'arrow-up-2' : 'arrow-down-2'}`"
        />
      </div>
      <div class="w-full mr-3">
        <div class="flex justify-between w-full">
          <div>{{ props.item.title }}</div>
          <div>{{ toJalaliOutOfUTC(props.item.expire_at) }}</div>
        </div>
        <div class="flex justify-between mt-2">
          <div
            :class="goldAmount >= 0 ? 'text-green-600' : 'text-red-600'"
            class="text-gray-500 text-xs number-ltr"
          >
            {{ formatGoldAmount(goldAmount) }}
            <div>{{ props.item.unit }}</div>
          </div>
          <div class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
            <div :class="props.item.cash > 0 ? 'text-green-600' : 'text-red-600'" class="text-base">
              {{ usePriceWithoutType(props.item.cash ?? 0) }}
            </div>
            ریال
          </div>
        </div>
      </div>
    </div>
    <div v-if="isGold" class="flex w-full justify-between mt-2">
      <div class="text-gray-500">قیمت معامله:</div>
      <div class="text-gray-500 flex gap-1 text-xs items-center">
        <div class="text-base">
          {{ usePriceWithoutType(tradePrice) }}
        </div>
        ریال
      </div>
    </div>
    <div class="flex w-full justify-between mt-2">
      <div class="text-gray-500">وضعیت :</div>
      <div class="text-gray-500 flex gap-1 text-xs items-center">
        <ATag class="!py-1 !px-6 !ml-0" color="blue">
          {{ props.item.order?.sts_str ?? props.item.withdraw?.sts_str }}
        </ATag>
      </div>
    </div>
    <a-divider class="!my-3" />
  </div>

  <BasicActionSheet v-if="variant !== 'desktop'" v-model:show="infoVisible">
    <div class="font-bold text-lg">{{ props.item.title }}</div>
    <TransactionDetailPanel :item="props.item" variant="mobile" />
    <BasicButton class="w-full mt-5" @click="infoVisible = false">بازگشت</BasicButton>
  </BasicActionSheet>

  <BasicModal
    v-else
    v-model:visible="infoVisible"
    :title="props.item.title"
    width="520px"
    custom-footer
    destroy-on-close
  >
    <TransactionDetailPanel :item="props.item" variant="desktop" />
    <template #footer>
      <BasicButton class="w-full" @click="infoVisible = false">بستن</BasicButton>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
import Icon from '@/components/BasicPacks/BasicIcon.vue'
import {
  formatGoldAmount,
  getTransactionGoldAmount,
  getTransactionTradePrice,
  usePriceWithoutType,
} from '@/utils/usePrice'
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
import BasicModal from '@/components/BasicPacks/BasicModal.vue'
import { computed, ref } from 'vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import type { Transaction } from '@/models/transaction'
import { toJalaliOutOfUTC } from '@/utils/useDateTime'
import TransactionDetailPanel from './TransactionDetailPanel.vue'

const infoVisible = ref(false)

const props = withDefaults(
  defineProps<{
    item: Transaction
    variant?: 'mobile' | 'desktop'
  }>(),
  { variant: 'mobile' },
)

const goldAmount = computed(() => getTransactionGoldAmount(props.item))
const tradePrice = computed(() => getTransactionTradePrice(props.item))

const isUp = computed(
  () =>
    props.item.type === 3
    || props.item.type === 1
    || props.item.type === 8
    || props.item.type === 9,
)
const isGold = computed(
  () => props.item.type === 1 || props.item.type === 2 || props.item.type === 10,
)
</script>