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="customer-sheet-actions grid grid-cols-2 gap-2">
        <BaseButton
          class="customer-sheet-btn w-full"
          size="middle"
          type="primary"
          icon="vuesax-linear:wallet-add"
          @click="$emit('chargeMoney', row)"
        >
          شارژ ریالی
        </BaseButton>
        <BaseButton
          class="customer-sheet-btn w-full"
          size="middle"
          type="primary"
          icon="vuesax-linear:wallet-money"
          @click="$emit('chargeGold', row)"
        >
          شارژ طلایی
        </BaseButton>
        <BaseButton
          v-if="!row.is_legal"
          class="customer-sheet-btn w-full"
          size="middle"
          type="default"
          icon="vuesax-linear:user-search"
          @click="$emit('confirmUser', row)"
        >
          تایید کاربر
        </BaseButton>
        <BaseButton
          class="customer-sheet-btn w-full"
          size="middle"
          type="default"
          icon="vuesax-linear:stickynote"
          @click="$emit('info', row)"
        >
          مشخصات کامل
        </BaseButton>
        <BaseButton
          class="customer-sheet-btn w-full"
          size="middle"
          type="default"
          icon="vuesax-linear:edit"
          @click="$emit('edit', row)"
        >
          ویرایش
        </BaseButton>
        <BaseButton
          class="customer-sheet-btn w-full"
          size="middle"
          type="default"
          icon="vuesax-linear:archive-tick"
          @click="$emit('archive', row)"
        >
          بایگانی
        </BaseButton>
        <BaseButton
          class="customer-sheet-btn w-full"
          size="middle"
          :type="row.active ? 'default' : 'primary'"
          :icon="row.active ? 'vuesax-linear:user-remove' : 'vuesax-linear:user-tick'"
          @click="$emit('toggleActive', row)"
        >
          {{ row.active ? 'غیرفعال کردن' : 'فعال کردن' }}
        </BaseButton>
        <BaseButton
          class="customer-sheet-btn 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="$emit('toggleTrade', row)"
        >
          {{ row.trade_active === 1 ? 'ممنوعیت سفارش' : 'مجاز کردن سفارش' }}
        </BaseButton>
      </div>

      <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 === 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="row.gold ?? '-'" />
        <MobileDetailRow label="آخرین بازدید" :value="lastSeen(row)" value-class="text-xs" />
      </MobileInfoGrid>
    </template>
  </MobileDetailSheet>
</template>

<script setup lang="ts">
import type { Customer } from '@/model/customer'
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, getGoldBalance } from '@/components/mobile/utils/wallet'
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: '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)
})

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) : '-'
}
</script>

<style scoped lang="less">
.customer-sheet-actions {
  :deep(.customer-sheet-btn.ant-btn) {
    display: inline-flex;
    width: 100%;
    justify-content: right;
    text-align: right;
  }

  :deep(.customer-sheet-btn.ant-btn > div) {
    width: 100%;
    justify-content: right !important;
  }
}
</style>