<script lang="ts" setup>
import DictApi from '@/pages/sys/dict/dict-api.ts'
import Utils from '@/common/utils'

const props = defineProps<{
  dictKey: string
}>()

const loading = ref(false)

const dictItems = Utils.resetAble(reactive<DictItemTypes.SearchDictItemResult[]>([]))

function loadData(txt?: string) {
  loading.value = true
  DictApi.obtainDictData({dictKey: props.dictKey, txt})
    .then(res => {
      dictItems.$reset(res.data)
    })
    .finally(() => {
      loading.value = false
    })
}

onMounted(loadData)

defineExpose({
  loadData,
})

</script>

<template>
  <ElSelect :loading="loading" :remote-method="loadData" filterable remote remote-show-suffix reserve-keyword v-bind="$attrs">
    <ElOption v-for="item in dictItems"
      :key="item.id"
      :label="item.txt" :value="item.val"/>
  </ElSelect>
</template>

<style lang="stylus" scoped>

</style>
