<el-autocomplete
  style="width: 100%;"
  debounce="500"
  v-model="formLabelAlign.companyName"
  :fetch-suggestions="searchCompany"
  placeholder="请输入选择您所在的企业/组织机构名称"
  :loading="remoteLoading"
  loading-text="数据加载中" 
>
  <template #default="{ item }">
    <span class="link" v-html="item.queryLabel"></span>
  </template>
</el-autocomplete>

// 搜索企业
const searchCompany = async (queryString, cb) => {
  remoteMethod(queryString).then(data => {
    cb(data);
  })
}
const remoteLoading = ref(false)
const companyNameOptions = ref([])
const remoteMethod = (query) => {
  return new Promise((resolve, reject) => {
    companyNameOptions.value = []
    if (query.length >= 4) {
      remoteLoading.value = true
      const params = {
        keyword: query,
        pageNo: 1,
        pageSize: 10
      };
      getCompanyName(params).then(res => {
        remoteLoading.value = false
        if (res.code == 0) {
          const list = res.data
          companyNameOptions.value = list.map(item => ({
            queryLabel: item.companyName.replace(query, `<span style="color: #0070ef;">${query}</span>`),
            value: item.companyName,
            label: item.companyName
          }));
          companyNameOptions.value.push({
            queryLabel: `<span style="color: #888;">如没有您想要的结果，请输入更详细的公司名称</span>`,
            value: formLabelAlign.companyName,
          })
          resolve(companyNameOptions.value);
        } else {
          reject('Failed to fetch company names');
        }
      }).catch(error => {
        remoteLoading.value = false;
        reject(error);
      });
    } else {
      resolve([]);
    }
  });
}