<template>
            <el-select v-model="userId"  filterable remote style="width:100%;"   :placeholder="props.placeholder"
              :remote-method="remoteMethod" :loading="loading" >
              <el-option v-for="item in options" :key="item.userId" :label="item.nickName" :value="item.userId" >
                <div class="option">
                  <div><el-avatar style="--el-avatar-size:2.2em;" :src="item.avatar" /></div>
                  <div>{{ item.nickName }}</div>
                  <div>
                    {{ item.userName }}
                  </div>
                  <div>{{ item.phonenumber }}</div>
                </div>

              </el-option>
            </el-select>
</template>
<script setup>
import { ref,computed,onMounted,watch } from "vue";
import {searchUser,searchUsers} from '@/api/system/user'

const props = defineProps({
  modelValue : {
    type:String
  },
  placeholder: {
    type:String,
    default: "请选择关联用户"
  },
  role:{
    type:String,
    default:""
  }
});

const emits = defineEmits(["update:modelValue"])

const userId = computed({
  get(){
   return props.modelValue;
  },
  set(value){
    emits("update:modelValue",value);
  }
});

const options = ref([]);
const loading = ref(false);

const remoteMethod = async(query)=>{
  loading.value = true;
  let r = await searchUsers({key:query,roleKey:props.role,max:10});
  options.value = r.data;
  loading.value = false;
}

const init = async()=>{
  if(userId.value){
    let r = await searchUser(userId.value);
    options.value = [r.data];
  }else{
    remoteMethod("");
  }
}
watch(userId,init);
onMounted(init);

</script>
<style lang="scss" scoped>
.option {
  display: grid;
  width: 20rem;
  font-size: .8rem;
  grid-template-columns: 2.5rem 6rem 7rem 1fr;

  &>:nth-child(3),&>:nth-child(4) {
    font-weight: normal;
    font-size: .7rem;
    opacity: .6;
  }
}
</style>