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

<template>
  <div @click="infoVisible = true">
    <!--    {{  item}}-->
    <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>{{ item.title }}</div>
          <div>{{ toJalaliOutOfUTC(item.expire_at) }}</div>
        </div>
        <div class="flex justify-between mt-2">
          <div :class="item.gold >= 0? 'text-green-600':'text-red-600'"
               class="text-gray-500 text-xs  number-ltr">{{ item.gold }}
            <div>{{item.unit}}</div>
          </div>
          <div class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
            <div :class="item.cash > 0 ? 'text-green-600':'text-red-600'" class="text-base">
              {{ usePriceWithoutType(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">{{ typeof parseInt((Math.abs(item.cash) / Math.abs(item.gold)).toFixed(0)) }}</div>-->
        <div class="text-base">{{ usePriceWithoutType(parseInt((Math.abs(item.cash) / Math.abs(item.gold)).toFixed(0))) }}</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">
          {{ item.order?.sts_str ?? item.withdraw?.sts_str }}
        </ATag>
      </div>
    </div>
    <!--    <div v-else class="h-8"></div>-->
    <a-divider class="!my-3" />
    <BasicActionSheet v-model:show="infoVisible">
      <div class="font-bold text-lg">{{ props.item.title }}</div>
      <div class="mb-8rem mt-5">
        <div class="flex justify-between mb-3">
          <div class="text-primary">مبلغ:</div>
          <div :class="item.cash > 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
            <div class="text-base ml-1">{{ usePriceWithoutType(item.cash?? 0) }}</div>
            ریال
          </div>
        </div>
        <div v-if="item.order" class="flex justify-between mb-3">
          <div class="text-primary">قیمت هر گرم {{ getTradePriceUnitLabel() }} حین معامله:</div>
          <div class="flex text-xs items-center number-ltr">
            <div class="text-base ml-1">{{ usePriceWithoutType(item.order?.price?? 0) }}</div>
            ریال
          </div>
        </div>
        <div class="flex justify-between mb-3">
          <div class="text-primary">مقدار {{ item.wallet?.product ? item.wallet.product.title : getMeltedGoldTradeLabel() }} مبادله شده:</div>
          <div :class="item.gold >= 0? 'text-green-600' : 'text-red-600'" class="flex flex-col items-end text-xs number-ltr">
            <div class="flex items-center">
              <div class="text-base ml-1">{{ item.gold }}</div>
              {{ item.unit }}
            </div>
            <div
              v-if="item.wallet?.product && getProductTotalWeightLabel(Math.abs(item.gold ?? 0), item.wallet.product)"
              class="text-gray-500"
            >
              {{ getProductTotalWeightLabel(Math.abs(item.gold ?? 0), item.wallet.product) }}
            </div>
          </div>
        </div>
        <div class="flex justify-between mb-3">
          <div class="text-primary">{{ getCashWalletLabel(item.wallet?.product?.group_type) }}:</div>
          <div :class="item.cash > 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
            <div class="text-base">{{ usePriceWithoutType(item.balance_cash ?? 0) }}</div>
            ریال
          </div>
        </div>
        <div class="flex justify-between mb-3" v-if="item.wallet?.product">
          <div class="text-primary">موجودی {{item.wallet.product.title}}:</div>
          <div class="flex flex-col items-end text-xs text-yellow-700">
            <div class="flex items-center">
              <div class="text-base ml-1">{{ item.balance_gold }}</div>
              {{ getProductQuantityUnit(item.wallet.product) }}
            </div>
            <div v-if="getProductUnitWeightLabel(item.wallet.product)" class="text-gray-500">
              هر عدد {{ getProductUnitWeightLabel(item.wallet.product) }}
            </div>
          </div>
        </div>
        <div class="flex justify-between mb-3" v-else>
          <div class="text-primary">{{ getGoldWalletLabel(item.wallet?.product?.group_type) }}:</div>
          <div class="flex text-xs text-yellow-700 items-center">
            <div class="text-base ml-1">{{ item.balance_gold }}</div>
            {{ getWeightUnit() }}
          </div>
        </div>
        <!--        <div class="flex justify-between mb-3">
                  <div class="text-primary">موجودی کیف پول:</div>
                  <div class="flex text-xs items-center" :class="isUp? 'text-green-600' : 'text-red-600'"><div class="text-base">{{usePriceWithoutType(12000000)}}</div>ریال</div>
                </div>
                <div class="flex justify-between mb-3">
                  <div class="text-primary">موجودی کیف طلا:</div>
                  <div class="flex items-center" :class="isUp? 'text-red-600' : 'text-green-600'">60 گرم</div>
                </div>-->
        <div class="flex justify-between mb-3">
          <div class="text-primary">وضعیت:</div>
          <div class="flex text-xs items-center">
            <ATag :color="item.active? 'blue': 'blue'" class="!py-1 !px-6 !ml-0">
              {{ item.order?.sts_str ?? item.withdraw?.sts_str }}
            </ATag>
          </div>
        </div>
        <div class="flex justify-between mb-3">
          <div class="text-primary">تاریخ:</div>
          <div>{{ toJalaliNotime(item.expire_at) }}</div>
        </div>
        <div class="flex justify-between mb-3">
          <div class="text-primary">زمان:</div>
          <div>{{ toTime(item.expire_at) }}</div>
        </div>
        <!--        <div class="flex justify-between mb-3">
                  <div class="text-primary">وضعیت معامله:</div>
                  <div class="flex text-xs items-center">
                    <ATag class="!py-1 !px-6 !ml-0" color="orange">
                      معاملات باز
                    </ATag>
                  </div>
                </div>-->
        <div v-if="item.eaj" class="flex justify-between mb-3">
          <div class="text-primary">مهلت ارسال فیش:</div>
          <div>{{ item.eaj }}</div>
        </div>
        <BasicButton class="w-full mt-5" @click="infoVisible = false">بازگشت</BasicButton>
      </div>
    </BasicActionSheet>
  </div>

</template>

<script lang="ts" setup>
import Icon from '@/components/BasicPacks/BasicIcon.vue'
import { usePriceWithoutType } from '../../../../utils/usePrice'
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
import { computed, ref } from 'vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import type { Transaction } from '@/models/transaction'
import { getCashWalletLabel, getGoldWalletLabel, getMeltedGoldTradeLabel, getProductQuantityUnit, getProductTotalWeightLabel, getProductUnitWeightLabel, getTradePriceUnitLabel, getWeightUnit } from '@/utils/productDealMethod'
import { toJalaliNotime, toJalaliOutOfUTC, toTime } from '../../../../utils/useDateTime'

const infoVisible = ref<boolean>(false)

interface Prop {
  item: Transaction
}

const props = withDefaults(defineProps<Prop>(), {})
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)
/*const title = computed(() => {
  if (isUp.value) {
    if (isGold.value) {
      return 'واریز ریالی'
    } else {
      return 'خرید طلا'
    }
  } else {
    if (isGold.value) {
      return 'برداشت ریالی'
    } else {
      return 'فروش طلا'
    }
  }
})*/
</script>

<style scoped>

</style>