<template>
  <div>
    <div
      class="el-form-item"
      :class="{
        'is-required': isRequried && label,
      }"
      style="margin-bottom: 12px"
      v-if="label || $slots.label"
    >
      <label for="powerOfAttorney" class="el-form-item__label relative">
        <slot name="label">
          {{ label }}
        </slot>
      </label>
    </div>
    <ElFormItem
      label=""
      :prop="prop"
      style="margin-bottom: 25px"
      :error="error"
    >
      <slot></slot>
    </ElFormItem>
  </div>
</template>

<script setup lang="ts">
import { ElFormItem, formContextKey } from "element-plus";
import { computed, inject, toRaw } from "vue";

const formContext = inject(formContextKey, undefined);

const props = defineProps<{
  prop: string;
  label?: string;
  rules?: any;
  required?: boolean;
  error?: string;
}>();

const isRequried = computed(() => {
  const rules = (toRaw(formContext!.rules![props.prop]) as any[]) || [];
  return rules.some((rule: any) => rule.required === true) || props.required;
});
</script>

<style></style>
