<template>
  <!-- <el-select-v2
    v-model="selectValue"
    style="width: 240px"
    filterable
    remote
    :remote-method="remoteMethod"
    clearable
    :props="{
      label: props.labelStr,
      value: props.valueStr,
    }"
    :options="options"
    :loading="loading"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <template #default="{ item }">
      <span>{{ item[props.labelStr] }}</span>
      <span>
        {{ item[props.valueStr] }}
      </span>
    </template>
  </el-select-v2> -->
  <el-autocomplete
    v-model="selectValue"
    :trigger-on-focus="false"
    :fetch-suggestions="remoteMethod"
    placeholder="Please input"
    @select="handleChange"
  />
</template>
<script setup>
import { useVModel } from '@vueuse/core';
import { computed, watch } from 'vue';

const props = defineProps({
  modalValue: [String, Number],
  placeholder: {
    type: String,
    default: () => '请输入项目代码,项目名称,搜索值'
  },
  fun: [Function],
  labelStr: {
    type: String,
  },
  valueStr: {
    type: String,
  },
})

const emits = defineEmits(['update:modalValue', 'handleChange']);

//这里使用vueuse中的useVModel,也可以不使用，自己写也行。
const selectValue = computed({
  get() {
    return props.modalValue
  },
  set(val) {
    emits('update:modalValue', val)
  }
})

const options = ref([])
const loading = ref(false)
 
// watch(
// 	() => props.vModel,
// 	(newValue, oldValue) => {
//     console.log(newValue,oldValue);
    
// 		vModel.value = props.modelValue;
// 	},
// 	{ immediate: true, deep: true }
// );
 
const remoteMethod = (query, cb) => {
  if (props.fun) {
    props.fun({
      keyword: query
    }).then(res => {
      options.value = res?.rows || []
      cb(options.value)
    })
  } else {
    options.value = []
    cb([])
  }
};

const handleChange = (val) => {
  const findValue = options.value.find(i => i[props.valueStr] == val)
  emits('handleChange', findValue)
};

</script>


<style scoped lang='scss'>

</style>