boursecu_admin/src/pages/menuPages/giftCards/components/GiftCardCodesSheet.vue

<template>
  <BasicActionSheet
    v-model:visible="visibleProxy"
    title="لیست کدهای کارت هدیه"
    modal-width="80%"
    drawer-height="90vh"
    :showButton="true"
    :showCancel="true"
    :showOk="false"
    cancel-text="بستن"
    @cancel="close"
    @close="close"
  >
    <div class="mb-3 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
      <div class="min-w-0 space-y-1">
        <p v-if="giftCardCustomer" class="m-0 text-13px font-600" style="color: var(--admin-text)">
          مشتری: {{ giftCardCustomer.name }} — <span dir="ltr">{{ giftCardCustomer.mobile }}</span>
        </p>
        <p v-else class="m-0 text-13px font-600" style="color: var(--admin-text)">
          کد عمومی — بدون مشتری مشخص
        </p>
        <p class="m-0 text-13px text-[var(--admin-text-secondary)]">
          {{ codes.length }} کد — دانلود به صورت اکسل یا PDF
        </p>
      </div>
      <a-dropdown
        :trigger="['click']"
        placement="bottomLeft"
        :overlay-style="{ zIndex: SELECT_DROPDOWN_Z_INDEX }"
      >
        <BaseButton
          type="default"
          size="small"
          icon="vuesax-linear:document-download"
          :disabled="!codes.length"
        >
          دانلود
        </BaseButton>
        <template #overlay>
          <a-menu @click="handleDownload">
            <a-menu-item key="excel">اکسل (CSV)</a-menu-item>
            <a-menu-item key="pdf">PDF</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>

    <a-table
      class="hidden md:block"
      :columns="columns"
      :data-source="codes"
      :pagination="{ pageSize: 10 }"
      row-key="id"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">{{ index + 1 }}</template>
        <template v-else-if="column.key === 'sts'">
          <CustomTag v-if="record.sts === 1" textColor="#ca8a04" bgColor="#fef3c7">فعال</CustomTag>
          <CustomTag v-else-if="record.sts === 2" textColor="#25855A" bgColor="#E3F4E9">استفاده شده</CustomTag>
          <CustomTag v-else textColor="#C53030" bgColor="#FECACA">غیرفعال</CustomTag>
        </template>
        <template v-else-if="column.key === 'unit'">
          <CustomTag v-if="record.unit === 2" textColor="#C53030" bgColor="#FECACA">{{ metalLabel.goldWalletShort() }}</CustomTag>
          <CustomTag v-else textColor="#25855A" bgColor="#E3F4E9">ریالی</CustomTag>
        </template>
        <template v-else-if="column.key === 'amount'">
          {{ record.amount }} {{ record.unit === 2 ? 'گرم' : 'ریال' }}
        </template>
        <template v-else-if="column.key === 'expiry_date'">
          {{ record.expiry_date ? toJalali(record.expiry_date) : '-' }}
        </template>
        <template v-else-if="column.key === 'used_at'">
          {{ record.used_at ? toJalali(record.used_at) : '-' }}
        </template>
        <template v-else-if="column.key === 'assigned_to_name'">
          {{ record.assigned_to?.name ?? '-' }}
        </template>
        <template v-else-if="column.key === 'assigned_to_mobile'">
          {{ record.assigned_to?.mobile ?? '-' }}
        </template>
      </template>
    </a-table>

    <div class="space-y-2 md:hidden">
      <GiftCardCodeMobileListItem
        v-for="item in codes"
        :key="item.id"
        :item="item"
        @open="openSheet"
      />
    </div>

    <GiftCardCodeMobileDetailSheet v-model:visible="sheetVisible" :item="selectedItem" />
  </BasicActionSheet>
</template>

<script setup lang="ts">
import type { Giftcard, Giftcardcode } from '@/model/giftCard'
import BasicActionSheet from '@/components/BasicActionSheet.vue'
import CustomTag from '@/components/CustomTag.vue'
import { useMobileDetailSheet } from '@/components/mobile/composables/useMobileDetailSheet'
import { metalLabel } from '@/utils/adminMetalLabels'
import { toJalali } from '@core/utils/useDataTime'
import GiftCardCodeMobileDetailSheet from './GiftCardCodeMobileDetailSheet.vue'
import GiftCardCodeMobileListItem from './GiftCardCodeMobileListItem.vue'
import {
  downloadGiftCardCodesExcel,
  downloadGiftCardCodesPdf,
  type GiftCardCodesExportMeta
} from '../utils/exportGiftCardCodes'
import { resolveGiftCardCustomer } from '../utils/giftCardCustomer'
import { SELECT_DROPDOWN_Z_INDEX } from '@/constants/overlayZIndex'

const props = defineProps<{
  visible: boolean
  codes: Giftcardcode[]
  giftCard?: Giftcard | null
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

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

const { sheetVisible, selectedItem, openSheet } = useMobileDetailSheet<Giftcardcode>()

const columns = [
  { title: 'ردیف', key: 'index', dataIndex: 'index' },
  { title: 'کد', dataIndex: 'code', key: 'code' },
  { title: 'نوع', dataIndex: 'unit', key: 'unit' },
  { title: 'مقدار', dataIndex: 'amount', key: 'amount' },
  { title: 'وضعیت', dataIndex: 'sts', key: 'sts' },
  { title: 'تاریخ انقضا', dataIndex: 'expiry_date', key: 'expiry_date' },
  { title: 'تاریخ استفاده', dataIndex: 'used_at', key: 'used_at' },
  { title: 'نام استفاده‌کننده', dataIndex: 'assigned_to.name', key: 'assigned_to_name' },
  { title: 'موبایل استفاده‌کننده', dataIndex: 'assigned_to.mobile', key: 'assigned_to_mobile' }
]

function close() {
  visibleProxy.value = false
}

const giftCardCustomer = computed(() => resolveGiftCardCustomer(props.giftCard))

const exportMeta = computed<GiftCardCodesExportMeta>(() => ({
  id: props.giftCard?.id,
  unit: props.giftCard?.unit,
  count: props.giftCard?.count,
  customerName: giftCardCustomer.value?.name,
  customerMobile: giftCardCustomer.value?.mobile,
  createdAt: props.giftCard?.created_at
}))

function handleDownload({ key }: { key: string }) {
  if (!props.codes.length) return
  if (key === 'excel') {
    downloadGiftCardCodesExcel(props.codes, exportMeta.value)
    return
  }
  if (key === 'pdf') {
    downloadGiftCardCodesPdf(props.codes, exportMeta.value)
  }
}
</script>