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

<template>
  <MobileDetailSheet v-model:visible="visibleProxy" :item="item" :title="item?.name || ''">
    <template #default="{ item: row }">
      <MobileSheetHeader :title="row.name || '-'" :show-title="isMobile">
        <template #actions>
          <MobileIconButton plain icon="vuesax-linear:archive-tick" color="#e3bf00" :size="22" @click="closeAndEmit('archive', row)" />
          <MobileIconButton
            plain
            :icon="row.active ? 'vuesax-linear:user-tick' : 'vuesax-linear:user-remove'"
            :color="row.active ? '#54AD06' : '#ad0627'"
            :size="22"
            @click="confirmToggleActive(row)"
          />
          <MobileIconButton plain icon="vuesax-linear:wallet-add" color="#9333ea" :size="22" @click="closeAndEmit('chargeMoney', row)" />
          <MobileIconButton plain icon="vuesax-linear:wallet-money" color="#ea580c" :size="22" @click="closeAndEmit('chargeGold', row)" />
          <MobileIconButton plain icon="vuesax-linear:stickynote" color="#10913A" :size="22" @click="closeAndEmit('info', row)" />
          <MobileIconButton
            plain
            :icon="row.trade_active ? 'vuesax-linear:box-tick' : 'vuesax-linear:box-remove'"
            :color="row.trade_active ? '#54AD06' : '#ad0627'"
            :size="22"
            @click="confirmToggleTrade(row)"
          />
          <MobileIconButton
            v-if="!(row as any).is_legal"
            plain
            icon="vuesax-linear:user-search"
            color="#0d9488"
            :size="22"
            @click="closeAndEmit('confirmUser', row)"
          />
        </template>
      </MobileSheetHeader>

      <div class="space-y-2">
        <MobileStatCard bordered variant="success" label="موجودی طلایی" :value="`${goldBalance(row)} گرم`">
          <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 ? 'text-green-700' : 'text-red-600'"
        >
          {{ row.trade_active ? 'مجاز' : 'غیر مجاز' }}
        </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="row.gold ?? '-'" />
        <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 MobileIconButton from '@/components/mobile/MobileIconButton.vue'
import MobileInfoGrid from '@/components/mobile/MobileInfoGrid.vue'
import MobileSheetHeader from '@/components/mobile/MobileSheetHeader.vue'
import { getCashBalance, getGoldBalance } from '@/components/mobile/utils/wallet'
import { isMobile } from '@core/utils/is'
import { toJalali } from '@core/utils/useDataTime'
import { usePrice } from '@core/utils/usePrice'

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

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'info', 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)
})

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

function goldBalance(row: Customer) {
  return getGoldBalance(row.wallet)
}

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

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

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
      ? 'آیا سفارش دهی را غیرمجاز می‌کنید؟'
      : 'آیا سفارش دهی را مجاز می‌کنید؟',
    okText: 'تایید',
    cancelText: 'رد',
    centered: true,
    zIndex: MODAL_ABOVE_ACTION_SHEET_Z_INDEX,
    onOk: () => emit('toggleTrade', row)
  })
}
</script>