boursecu_admin/src/pages/menuPages/customers/base/components/CustomerMobileDetailSheet.vue

<template>
  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" title="">
    <template #default="{ item: row }">
      <h2 class="text-base font-700 leading-relaxed text-gray-900">{{ row.name || '-' }}</h2>
      <p v-if="row.mobile" class="text-sm text-gray-500" dir="ltr">{{ row.mobile }}</p>

      <div class="grid grid-cols-2 gap-2">
        <BaseButton class="w-full" size="middle" type="primary" icon="vuesax-linear:wallet-add" @click="closeAndEmit('chargeMoney', row)">
          شارژ ریالی
        </BaseButton>
        <BaseButton class="w-full" size="middle" type="primary" icon="vuesax-linear:wallet-money" @click="closeAndEmit('chargeGold', row)">
          {{ metalLabel.goldChargeShort() }}
        </BaseButton>
        <BaseButton
          v-if="!row.is_legal"
          class="w-full"
          size="middle"
          type="default"
          icon="vuesax-linear:user-search"
          @click="closeAndEmit('confirmUser', row)"
        >
          تایید کاربر
        </BaseButton>
        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:stickynote" @click="closeAndEmit('info', row)">
          مشخصات کامل
        </BaseButton>
        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:edit" @click="closeAndEmit('edit', row)">
          ویرایش
        </BaseButton>
        <BaseButton class="w-full" size="middle" type="default" icon="vuesax-linear:archive-tick" @click="closeAndEmit('archive', row)">
          بایگانی
        </BaseButton>
        <BaseButton
          class="w-full"
          size="middle"
          :type="row.active ? 'default' : 'primary'"
          :icon="row.active ? 'vuesax-linear:user-remove' : 'vuesax-linear:user-tick'"
          @click="confirmToggleActive(row)"
        >
          {{ row.active ? 'غیرفعال کردن' : 'فعال کردن' }}
        </BaseButton>
        <BaseButton
          class="w-full"
          size="middle"
          :type="row.trade_active === 1 ? 'default' : 'primary'"
          :icon="row.trade_active === 1 ? 'vuesax-linear:box-remove' : 'vuesax-linear:box-tick'"
          @click="confirmToggleTrade(row)"
        >
          {{ row.trade_active === 1 ? 'ممنوعیت سفارش' : 'مجاز کردن سفارش' }}
        </BaseButton>
      </div>

      <div class="space-y-2">
        <MobileStatCard
          v-for="entry in metalBalanceEntries(row)"
          :key="entry.metal_id"
          bordered
          variant="success"
          :label="customerWalletMetalBalanceTitle(entry.metal_id, entry.label)"
          :value="entry.value"
        >
          <template #prefix>
            <BaseIcon icon="vuesax-linear:coin" size="18" color="#15803d" />
          </template>
        </MobileStatCard>
        <MobileStatCard
          bordered
          variant="success"
          label="موجودی ریالی"
          :value="usePrice(cashBalance(row), true, '')"
        >
          <template #prefix>
            <BaseIcon icon="vuesax-linear:empty-wallet" size="18" color="#15803d" />
          </template>
        </MobileStatCard>
      </div>

      <MobileInfoGrid>
        <MobileDetailRow label="وضعیت کاربر" full-width :value-class="row.active ? 'text-green-700' : 'text-red-600'">
          {{ row.active ? 'فعال' : 'غیرفعال' }}
        </MobileDetailRow>
        <MobileDetailRow
          label="وضعیت سفارش دهی"
          full-width
          :value-class="row.trade_active === 1 ? 'text-green-700' : 'text-red-600'"
        >
          {{ row.trade_active === 1 ? 'مجاز' : 'غیر مجاز' }}
        </MobileDetailRow>
        <MobileDetailRow label="کد کاربری" :value="row.id ?? '-'" />
        <MobileDetailRow label="نوع کاربر" :value="row.type_str || '-'" />
        <MobileDetailRow label="کد معرف" :value="row.referral_id ?? '-'" />
        <MobileDetailRow label="نام معرف کاربر" :value="row.referral?.name ?? '-'" />
        <MobileDetailRow label="آخرین بازدید" :value="lastSeen(row)" value-class="text-xs" />
      </MobileInfoGrid>
    </template>
  </MobileDetailSheet>
</template>

<script setup lang="ts">
import { Modal } from 'ant-design-vue'
import type { Customer } from '@/model/customer'
import { MODAL_ABOVE_ACTION_SHEET_Z_INDEX } from '@/constants/overlayZIndex'
import MobileDetailRow from '@/components/mobile/MobileDetailRow.vue'
import MobileStatCard from '@/components/mobile/MobileStatCard.vue'
import MobileDetailSheet from '@/components/mobile/MobileDetailSheet.vue'
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
import { getCashBalance } from '@/components/mobile/utils/wallet'
import { toJalali } from '@core/utils/useDataTime'
import { usePrice } from '@core/utils/usePrice'
import { customerWalletMetalBalanceTitle, metalLabel } from '@/utils/adminMetalLabels'
import type { CustomerMetalColumn } from '../hooks/customerColumns'
import { formatMetalDisplayValue, metalCellValue, metalDisplayUnit } from '@/utils/metalWeight'

const props = defineProps<{
  visible: boolean
  item: Customer | null
  metals?: CustomerMetalColumn[]
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'info', item: Customer): void
  (e: 'edit', item: Customer): void
  (e: 'archive', item: Customer): void
  (e: 'toggleActive', item: Customer): void
  (e: 'chargeMoney', item: Customer): void
  (e: 'chargeGold', item: Customer): void
  (e: 'toggleTrade', item: Customer): void
  (e: 'confirmUser', item: Customer): void
}>()

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

type SheetEmit = 'archive' | 'chargeMoney' | 'chargeGold' | 'info' | 'confirmUser' | 'edit'

function closeAndEmit(event: SheetEmit, row: Customer) {
  visibleProxy.value = false
  emit(event, row)
}

function confirmToggleActive(row: Customer) {
  Modal.confirm({
    title: row.active ? 'آیا حساب کاربری را غیرفعال می‌کنید؟' : 'آیا حساب کاربری را فعال می‌کنید؟',
    okText: 'تایید',
    cancelText: 'رد',
    centered: true,
    zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
    onOk: () => emit('toggleActive', row)
  })
}

function confirmToggleTrade(row: Customer) {
  Modal.confirm({
    title: row.trade_active === 1 ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟' : 'آیا سفارش دهی را مجاز می‌کنید؟',
    okText: 'تایید',
    cancelText: 'رد',
    centered: true,
    zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
    onOk: () => emit('toggleTrade', row)
  })
}

function cashBalance(row: Customer) {
  return getCashBalance(row.wallet)
}

function metalBalanceEntries(row: Customer) {
  const metals = props.metals?.length
    ? props.metals
    : [{ metal_id: 1, label: 'طلا' }]

  return metals
    .map((metal) => {
      const value = metalCellValue(row as Record<string, unknown>, metal.metal_id, 'wallet_metal_gold')
      return {
        metal_id: metal.metal_id,
        label: metal.label,
        value: formatMetalDisplayValue(value, metal.metal_id)
      }
    })
    .filter((entry) => {
      const numeric = metalCellValue(row as Record<string, unknown>, entry.metal_id, 'wallet_metal_gold')
      return numeric !== 0
    })
}

function lastSeen(row: Customer) {
  return row.last_seen_at ? toJalali(row.last_seen_at) : '-'
}
</script>