
<!-- 实时搜索下拉框组件 -->
<template>
    <el-select v-model="value" remote :placeholder="placeholder" style="width: 100%;"  filterable :remote-method="remoteMethod" :loading="loading" clearable 
    :multiple="multiple" :collapse-tags="multiple" :collapse-tags-tooltip="multiple">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue'
import { handleSelectData } from '@/framework/utils/standard/dataHandleUtil.ts'
/**
 * 实时检索组件
 * SearchSelect 
 * @author nielang
 * @description 用于实时检索的下拉框
 * @property {String} modelValue 使用v-model
 * @property {String} placeholder input的placeholder
 * @property {Boolean} multiple 是否支持多选
 * @property {Function} request 接口请求函数，默认请求参数{'keyword':'关键字'}
 * @property {Function} customRequestHandle 自定义请求参数处理
 * @property {Function} customResponseHandle 自定义响应结果处理
 * @property {Boolean} showOptionValue 选项中是否显示value属性，使用customResponseHandle后，该参数失效
 */
const props = defineProps({
    modelValue:{
        type: String,
        default: "",
    },
    placeholder: {
        type: String,
        default: "请输入关键字",
    },
    multiple: {
        type: Boolean,
        default: false,
    },
    
    request:{
        type: Function,
        require: true
    },
    customRequestHandle: {
        type: Function,
        require: false
    },
    customResponseHandle: {
        type: Function,
        require: false
    },
    showOptionValue: {
        type: Boolean,
        default: true,
    },
})

const emit = defineEmits(['update:modelValue'])
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const loading = ref(false);
interface ListItem {
    value: string
    label: string
}

const options = ref<ListItem[]>([])
const remoteMethod = (keyword: string) => {
    if (keyword) {
        loading.value = true
        if (props.request) {
            let params:any = {keyword:keyword}
            //自定义请求参数处理
            if(props.customRequestHandle)
                params=props.customRequestHandle(params)
            props.request(params).then((data: any) => {
                //自定义响应结果处理
                if(props.customRequestHandle){
                    options.value=props.customResponseHandle(data)
                }else{
                    options.value=handleSelectData(data,props.showOptionValue)
                }
            })
        }
        loading.value = false
    } else {
        options.value = []
    }
}

</script>

<style scoped>

</style>