<script setup lang="ts">
import { computed, getCurrentInstance } from 'vue'
import { LABEL_KEY } from './common'
const $t: any = getCurrentInstance()?.appContext.config.globalProperties.$t

const props = defineProps<{
  label: string
  required?: boolean
  hideLabel?: boolean
  rules?: any[]
}>()

const rules = computed(() =>
  [
    {
      validator(rule: any, value: any, callback: any) {
        if (props.required && (value === undefined || value === null || (typeof value === 'string' && value.trim() === ''))) {
          callback(`${$t('check_not_null')?.replace(LABEL_KEY, props.label)}`)
        } else {
          callback()
        }
      }, trigger: ['change', 'blur'], message: `${$t('check_not_null')?.replace(LABEL_KEY, props.label)}`
    },
    ...(props.rules || [])]
)
</script>

<template>
  <el-form-item class="custom-form-item" :label="(hideLabel ? undefined : label) || ''" :required="required"
    :rules="rules" style="width: 100%">
    <slot />
  </el-form-item>
</template>