<script setup>
import items from '~/data/practitioner.json'

function onChange(oldValue, newValue, el$) {
  el$.$parent.$parent.children$.value.update(el$.value)
}
</script>
<template>
  <ListElement name="identifier" :rules="['min:1']">
    <template #default="{ index }">
      <ObjectElement :name="index">
        <GroupElement name="type">
          <SelectElement name="name" :search="true" :items="items" data-key="option" :native="false" default="ktp"
            :columns="{
              container: 3,
            }" :can-clear="false" :can-deselect="false" />

          <TextElement v-for="item in items" :conditions="[['identifier.*.type.name', item.value]]" name="value_element"
            @change="onChange" :rules="['nullable', item.regex]" :messages="{
              regex: 'Format Nomor ID salah!',
            }" :placeholder="item.placeholder" :columns="{
              container: 9,
            }" :submit="false" />

          <HiddenElement name="value" :meta="true" />
        </GroupElement>
      </ObjectElement>
    </template>
  </ListElement>
</template>
