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 label="شماره موبایل مشتری" name="mobile" :rules="inputLenRules(11)">
        <BasicInput v-model:value="form.mobile" type="tel" placeholder="09123456789" />
        <AdminFieldHelp :text="giftCardMobileHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item label="نام مشتری" name="name" :rules="inputRules()">
        <BasicInput v-model:value="form.name" placeholder="نام و نام خانوادگی مشتری" />
        <AdminFieldHelp :text="giftCardNameHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item label="نوع کارت هدیه" name="unit" :rules="inputRules()">
        <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>
        <AdminFieldHelp :text="giftCardUnitHelp" root-class="mt-1" />
      </a-form-item>

      <a-form-item label="تعداد کدها" name="count" :rules="inputRulesNumber()">
        <BasicInput v-model:value="form.count" type="tel" placeholder="تعداد کدهای کارت هدیه" />
        <AdminFieldHelp :text="giftCardCountHelp" root-class="mt-1" />
      </a-form-item>

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

      <a-form-item label="تاریخ انقضا" name="expiry_date" :rules="inputRules()">
        <BaseDatePicker v-model:value="form.expiry_date" format="YYYY-MM-DD" />
        <AdminFieldHelp :text="giftCardExpiryHelp" root-class="mt-1" />
      </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 AdminFieldHelp from '@/components/AdminFieldHelp.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>