<script setup lang="ts">
import { httpManagerUsers } from "/@/api/netOrderEnter/netOrderEntry";
import { useUserInfo } from "/@/hooks/core/useUser";
import { useVModel } from "@vueuse/core"
import { ref } from "vue"

const props = defineProps<{ companyNo: string, modelValue: string }>()
const modelValue = useVModel(props, 'modelValue')

const state = ref({ options: [], loading: false })

const { userInfo } = useUserInfo()


async function onSearch(nickname){
  if(!nickname){ return }
  state.value.loading = true
  const { code, data } = await httpManagerUsers({ nickname, companyNo: props.companyNo, needRelation: true })
  state.value.loading = false
  if(code == 0){ state.value.options = (data?.list || []).map(item => ({  value: item.id, label: item.nickname, status: item.status })) }
}

async function handleSelection(){
  const { nickname, id } = userInfo.value
  await onSearch(nickname)
  modelValue.value = id
}

</script>

<template>
  <div class="w-full flex justify-between">
    <ElSelect 
      remote  
      filterable
      class="flex-1"
      reserve-keyword
      v-model="modelValue"
      :loading="state.loading"
      :remote-method="onSearch"
    >
      <ElOption 
        v-for="item in state.options"
        :value="item.value"
        :label="item.label"
        :disabled="item.status != '1'"
      />
    </ElSelect>

    <ElButton @click="handleSelection">
      选择当前账号
    </ElButton>
  </div>
</template>
