<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)
const approvers = ref<Person[]>([])

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 apprLine = computed(() => {
  return initiator.value ? [initiator.value, ...approvers.value] : [...approvers.value]
})

watch(apprLine, (val) => {
  model.value = val
})


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

const tagsOptions = ref([])

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) {
          res.forEach(u => {
            if (model.value?.length > 0) {
              const ignore = model.value.reduce((a: Person, b: Person) => {
                return a.sabun + '|' + b.sabun
              })

              if (typeof ignore !== 'object') {
                if (ignore.includes(u.sabun)) {
                  u['disabled'] = true
                }
              } else {
                if (ignore.sabun.includes(u.sabun)) {
                  u['disabled'] = true
                }
              }
            }
          })
          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"
      >
        <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>