<!-- 
use 
  <mSelect 
    v-model="form.reditCode"
    placeholder="输入文字检索查询"
    style="width: 100%"
    clearable
    :lists="organizationList"
    lists_label="organizationName"
    lists_value="entrustOrganizationId"
    lists_key="entrustOrganizationId"
    :total="orgTotal"
    :pageSize="10"
    @handleChange="handleChangeredit"
  /> 
-->
<template>
  <el-select
    v-bind="_attrs"
    style="width: 100%"
    remote
    :loading="loading"
    :remote-method="remoteOrg"
  >
    <el-option
      v-for="(item, index) in mLists"
      :key="item[lists_key] || index"
      :label="`${item[lists_label]}${lists_vice_label && `(${item[lists_vice_label]})`}`"
      :value="item[lists_value]"
    >
    </el-option>
  </el-select>
</template>

<script setup name="mSelect">
import { computed, getCurrentInstance, reactive, toRef, useAttrs, watch, watchEffect } from 'vue'
const {proxy} = getCurrentInstance()

const props = defineProps({
  lists: { // 列表数据
    type: Array,
    default: () => []
  },
  lists_label: {
    type: String,
    default: 'label'
  },
  lists_label: {
    type: String,
    default: 'label'
  },
  lists_label_e: {
    type: String,
    default: 'value'
  },
  lists_key: {
    type: String,
    default: 'value'
  },
  lists_vice_label: {
    type: String,
    default: ''
  },
  filterStr: {
    type: String,
    default: 'filterStr'
  }
})

const {lists, lists_label, lists_value, lists_label_e, lists_key, lists_vice_label, filterStr} = props
const $attrs = useAttrs()
const _attrs = computed(() => {
  let attrs = { 
    ...$attrs,
    onFocus: remoteOrg.bind(null, '')
  }
  return attrs
})

const data = reactive({
  loading: false,
  mLists: [],
  queryDataStr: ''
})

const { loading, mLists, queryDataStr } = toRef(data)

watch(lists, (val) => {
  if (val) {
    mLists.value = val
  }
})

const emit = defineEmits();

const remoteOrg = (query) => {
  console.log('搜索' + query);
  loading = true;
  if (query != '') {
    queryDataStr = query ;
  } else {
    queryDataStr = '' ;

    return
  }

  const selector = lists.find(item => {
    return (
      item[lists_label].toLowerCase().indexOf(filterStr.toLowerCase()) > -1 ||
      item[lists_label_e].toLowerCase().indexOf(filterStr.toLowerCase()) > -1
    )
  })

  emit('handleChange', {
    ...selector
  })
  loading = false;
}
</script>

<style>

</style>