<script setup>
import { computed } from "vue";
const props = defineProps({
  groupKey: { type: [String, null], required: false },
  itemCode: { type: [String, null], required: false },
  locale: { type: String, required: false, default: "TH" },
  cache: { type: [Boolean, Number], required: false, default: false },
  notFoundText: { type: String, required: false },
  placeholder: { type: String, required: false }
});
const computedNotFoundText = computed(() => {
  return props.notFoundText || `${props.itemCode}`;
});
const computedPlaceholder = computed(() => {
  return props.placeholder || `${props.groupKey}(${props.itemCode})`;
});
const computedItemTitle = computed(() => {
  return props.locale == "TH" ? "itemValue" : (result) => result["itemValueAlternative"] || result["itemValue"];
});
</script>

<template>
  <model-label
      model-name="masterItemByGroupKeyAndItemCode"
      :model-by="{ groupKey: props.groupKey, itemCode: props.itemCode }"
      :item-title="computedItemTitle"
      :not-found-text="computedNotFoundText"
      :placeholder="computedPlaceholder"
      :cache="props.cache"
  >
    <template v-for="(_, name, index) in $slots" :key="index" #[name]="slotData">
      <slot :name="name" v-bind="slotData || {}" />
    </template>
  </model-label>
</template>
