<script setup lang="ts">
import { ref, shallowRef, computed } from "vue";
import { httpCompany } from "/@/api/user";
import { useResponseHandle } from "/@/hooks/core/useAsync";
import { useUserStore } from "/@/store/modules/user";

const emit = defineEmits(["change"]);
const actived = shallowRef("");

// const list = ref<any[]>([]);
const responseHandle = useResponseHandle();

const userStore = useUserStore();

const list = computed(() => userStore.business);

async function requestCompanies(isIntial: boolean,value:string) {
  const [first] = userStore.business || [];
  const { companyCode } = first || {};

  if (value) { 
    actived.value = value;
    handleChange(value);
  }else if (isIntial) {
    actived.value = companyCode;
    handleChange(companyCode);
  }
}

async function intialData(value: string) {
  requestCompanies(true, value);
}

async function handleChange(value) {
  emit("change", value);
}

defineExpose({
  intialData
});
</script>

<template>
  <ElSelect
    filterable
    v-model="actived"
    :remote-method="requestCompanies"
    style="width: 100%"
    @change="handleChange"
  >
    <ElOption
      v-for="opt in list"
      :key="opt.companyCode"
      :value="opt.companyCode"
      :label="opt.companyName"
    />
  </ElSelect>
</template>
