<script setup lang="ts">
import { type Person } from '/@src/utils/types'
import { getUserList } from '/src/service/UserApi'

const model = defineModel<Person[]>()
const userSession = useUserSession()
const dataUser = reactive({
  userSession: null,
})

// onBeforeMount(() => {
//   dataUser.userSession = userSession.user.data
//   const sessioinData = [{
//     gubunCd: '0000', //구분
//     gubunNm: '입안',
//     deptNm: dataUser.userSession.dept.deptNm,
//     sabun: dataUser.userSession.sabun,
//     name: dataUser.userSession.name,
//     attendCd: '', // 비고
//
//   }]
//   model.value = sessioinData
// })
const initiator = ref<Person | null>(null)

onBeforeMount(() => {
  dataUser.userSession = userSession.user.data
  initiator.value = {
    gubunCd: '0000',
    gubunNm: '입안',
    deptNm: dataUser.userSession.dept.deptNm,
    sabun: dataUser.userSession.sabun,
    name: dataUser.userSession.name,
    attendCd: '',
  }
})


const props = defineProps({
  label: {
    type: String,
    default: '직원검색',
  },
  placeholder: {
    type: String,
  },
  disabled: {
    type: Boolean
  },
  modelValue: {
    type: Object,
    default: () => ({}),
  },
})

export interface VUserEmits {
  (e: 'update:modelValue', value: any): void
}
const emits = defineEmits<VUserEmits>()
const tagsOptions = ref([])

const approvers = ref()

watch(() => props.modelValue, (newVal) => {
  if (newVal.length > 0) {
    emits('update:modelValue', approvers)
    approvers.value = []
  }
})
const onKeyup = async (e: any) => {
  const regex_jaeum = /[ㄱ-ㅎ]/g
  if (e.key === 'Enter') {
    if (e.target.value.match(regex_jaeum) === null) {
      try {
        const res = await getUserList({params:{name : e.target.value}})

        if (res.length > 0) {
          tagsOptions.value = res
        }
      } catch (e) {
        console.error('Error fetching user list:', e)
      }
    }
    if (e.target.value === '') {
      tagsOptions.value = []
    }
  }
}
</script>

<template>
  <VField v-slot="{ id }" class="pr-2 is-autocomplete-select">
    <VLabel class="has-fullwidth">
      {{props.label}}
    </VLabel>
    <VControl icon="lucide:search">
      <Multiselect
        v-model="approvers"
        :attrs="{ id }"
        :searchable="true"
        :disabled="props.disabled"
        :options="tagsOptions"
        mode="multiple"
        noResultsText="조회된 결과가 없습니다."
        noOptionsText="검색된 결과가 없습니다."
        :placeholder="props.placeholder"
        @keyup="onKeyup"
        @update:modelValue="(val) => {
          emits('update:modelValue', val)
        }"
      >
        <template #multiplelabel="{ values }">
          <div class="multiselect-multiple-label pl-6">
            {{props.placeholder}}
          </div>
        </template>
      </Multiselect>
    </VControl>
  </VField>
</template>

<style scoped lang="scss">
.field {
  padding-bottom: 10px !important;
  .label {
    font-size: 1.3em;
    color: var(--modal-text) !important;
  }
}
</style>