boursecu_admin/src/pages/menuPages/withdraw/components/WithdrawMobileDetailSheet.vue

<template>
  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="sheetTitle">
    <template #default="{ item: row }">
      <MobileSheetHeader :subtitle="dateLabel(row)" :show-title="isMobile">
        <template #title>
          <div class="flex w-full items-center justify-between gap-3">
            <span class="min-w-0 truncate">{{ sheetTitle }}</span>
            <div class="flex shrink-0 items-center gap-2">
              <MobileIconButton
                v-if="!row.tracked_number"
                plain
                icon="vuesax-linear:tick-circle"
                color="#16A34A"
                :size="22"
                @click="$emit('withdraw', row)"
              />
              <MobileIconButton
                plain
                icon="vuesax-linear:3d-cube-scan"
                color="#1D4ED8"
                :size="22"
                @click="$emit('weight', row)"
              />
              <MobileIconButton
                v-if="showStatusActions(row)"
                plain
                icon="vuesax-linear:document-download"
                color="#1D4ED8"
                :size="22"
                @click="goToFactor(row)"
              />
              <ADropdown v-if="showStatusActions(row)" :trigger="['click']">
                <MobileIconButton plain icon="vuesax-linear:status-up" color="#CA8A04" :size="22" />
                <template #overlay>
                  <a-menu class="flex flex-col">
                    <a-menu-item
                      v-for="(statusItem, index) in statusOptions(row)"
                      :key="index"
                      class="m-1 rounded border-none px-2 py-1"
                      :style="{ color: statusItem[1].color }"
                      @click="$emit('changeStatus', row, statusItem)"
                    >
                      <span class="font-normal">{{ statusItem[1].title }}</span>
                    </a-menu-item>
                  </a-menu>
                </template>
              </ADropdown>
            </div>
          </div>
        </template>
      </MobileSheetHeader>

      <span class="inline-flex rounded-lg border px-2 py-0.5 text-xs font-600 border-amber-300 bg-amber-50 text-amber-700">
        {{ row.sts_str || '-' }}
      </span>

      <div class="space-y-2">
        <MobileStatCard bordered variant="danger" label="مقدار (ریال)" :value="usePrice(row.cash ?? 0, true, '')">
          <template #prefix>
            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#dc2626" />
          </template>
        </MobileStatCard>
        <MobileStatCard bordered variant="warning" label="طلا" :value="goldLabel(row)">
          <template #prefix>
            <BaseIcon icon="vuesax-linear:coin" size="18" color="#b45309" />
          </template>
        </MobileStatCard>
      </div>

      <MobileInfoGrid>
        <MobileDetailRow label="علت تراکنش" full-width :value="noteLabel(row)" />
        <MobileDetailRow label="شماره پیگیری" :value="row.tracked_number ?? '-'" />
        <MobileDetailRow label="کد سفارش" :value="row.id ?? '-'" />
        <MobileDetailRow label="کد کاربر" :value="row.customer_id ?? '-'" />
        <MobileDetailRow label="نام و نام خانوادگی" full-width :value="row.customer?.name || '-'" />
        <MobileDetailRow label="شماره کارت" full-width :value="row.bank_account?.cart_number || '-'" />
        <MobileDetailRow label="تاریخ ثبت" full-width :value="dateLabel(row)" />
      </MobileInfoGrid>
    </template>
  </MobileDetailSheet>
</template>

<script setup lang="ts">
import type { Withdraw } from '@/model/wallet'
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
import MobileIconButton from '@/components/mobile/MobileIconButton.vue'
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
import { status } from '@/pages/menuPages/withdraw/information/hooks/status'
import { isMobile } from '@core/utils/is'
import { toJalali } from '@core/utils/useDataTime'
import { usePrice } from '@core/utils/usePrice'
import { toNumber } from 'lodash'
import { useRouter } from 'vue-router'

const props = defineProps<{
  visible: boolean
  item: Withdraw | null
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'withdraw', item: Withdraw): void
  (e: 'weight', item: Withdraw): void
  (e: 'changeStatus', item: Withdraw, statusEntry: [string, (typeof status)[keyof typeof status]]): void
}>()

const router = useRouter()

const visibleProxy = computed({
  get: () => props.visible,
  set: (value: boolean) => emit('update:visible', value)
})

const sheetTitle = computed(() => props.item?.customer?.name || `برداشت #${props.item?.id ?? '-'}`)

function showStatusActions(row: Withdraw) {
  const sts = row.sts ?? 0
  return sts >= 50 && sts <= 70
}

function statusOptions(row: Withdraw) {
  return Object.entries(status).filter((item) => toNumber(item[0]) !== row.sts) as [string, (typeof status)[keyof typeof status]][]
}

function goToFactor(row: Withdraw) {
  if (!row.id) return
  router.push({ name: 'factor', params: { id: row.id } })
}

function dateLabel(row: Withdraw) {
  return row.created_at ? toJalali(row.created_at) : '-'
}

function noteLabel(row: Withdraw) {
  if (row.note == null || row.note === '') return '-'
  return String(row.note)
}

function goldLabel(row: Withdraw) {
  if (row.gold == null) return '-'
  return String(row.gold)
}
</script>