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

<template>
  <a-form :model="form" ref="formRef" autocomplete="off">
    <div class="space-y-3">
      <a-form-item name="mobile" :rules="inputLenRules(11)">
        <template #label>
          <AdminLabelWithHelp label="شماره موبایل مشتری" :help="giftCardMobileHelp" />
        </template>
        <BasicInput v-model:value="form.mobile" type="tel" placeholder="09123456789" />
      </a-form-item>

      <a-form-item name="name" :rules="inputRules()">
        <template #label>
          <AdminLabelWithHelp label="نام مشتری" :help="giftCardNameHelp" />
        </template>
        <BasicInput v-model:value="form.name" placeholder="نام و نام خانوادگی مشتری" />
      </a-form-item>

      <a-form-item name="unit" :rules="inputRules()">
        <template #label>
          <AdminLabelWithHelp label="نوع کارت هدیه" :help="giftCardUnitHelp" />
        </template>
        <a-radio-group v-model:value="form.unit" button-style="solid">
          <a-radio-button value="1">ریالی</a-radio-button>
          <a-radio-button value="2">{{ metalLabel.goldWalletShort() }}</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item name="count" :rules="inputRulesNumber()">
        <template #label>
          <AdminLabelWithHelp label="تعداد کدها" :help="giftCardCountHelp" />
        </template>
        <BasicInput v-model:value="form.count" type="tel" placeholder="تعداد کدهای کارت هدیه" />
      </a-form-item>

      <a-form-item name="amount" :rules="inputRulesNumber()">
        <template #label>
          <AdminLabelWithHelp
            :label="`مقدار ${form.unit === '2' ? '(گرم)' : '(ریال)'}`"
            :help="giftCardAmountHelp"
          />
        </template>
        <BasicInput
          v-model:value="form.amount"
          :addon-before="form.unit === '2' ? 'گرم' : 'ریال'"
          type="tel"
          placeholder="مقدار کارت هدیه"
        />
      </a-form-item>

      <a-form-item name="expiry_date" :rules="inputRules()">
        <template #label>
          <AdminLabelWithHelp label="تاریخ انقضا" :help="giftCardExpiryHelp" />
        </template>
        <BaseDatePicker v-model:value="form.expiry_date" format="YYYY-MM-DD" />
      </a-form-item>

      <a-form-item label="توضیحات" name="description" class="mb-0">
        <BasicTextArea v-model:value="form.description" place-holder="توضیحات اختیاری — فقط برای یادداشت شما در پنل" />
      </a-form-item>
    </div>
  </a-form>
</template>

<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue'
import type { GiftcardInput } from '@/model/giftCard'
import AdminLabelWithHelp from '@/components/AdminLabelWithHelp.vue'
import {
  giftCardAmountHelp,
  giftCardCountHelp,
  giftCardExpiryHelp,
  giftCardMobileHelp,
  giftCardNameHelp,
  giftCardUnitHelp,
} from '@/utils/adminHelpCopy'
import { inputLenRules, inputRules, inputRulesNumber } from '@/utils/inputRules'
import { metalLabel } from '@/utils/adminMetalLabels'

defineProps<{
  form: GiftcardInput
}>()

const formRef = ref<FormInstance>()

defineExpose({
  validateFields: () => formRef.value?.validateFields(),
  resetFields: () => formRef.value?.resetFields(),
})
</script>