<template>
  <div class="company-search-field">
    <Field
      v-model="fieldValue"
      :label="item.label"
      v-bind="item"
      v-on="item.on || {}"
    >
      <template #input>
        <WlPopover v-model="popoverVisible" :placement="placement">
          <div class="uno-max-h-150 scroll-y uno-pt-10">
            <div
              v-for="item in companyList"
              :key="item.companyCreditCode"
              class="w-full uno-px-10 uno-pb-10"
              @click="onPopoverSelect(item)"
            >
              {{ item.companyName }}
            </div>
          </div>
          <template #reference>
            <div :class="`w-full box-border uno-px-10 ${inputClass}`">
              <WlInput
                v-model="fieldValue"
                :placeholder="inputPlacehoder"
                :need-debounce="true"
                @onChange="onSearch"
              />
            </div>
          </template>
        </WlPopover>
      </template>
    </Field>
  </div>
</template>

<script lang="ts" setup>
import { Field } from "vant";
import type { PopoverPlacement } from "vant";
import Store from "@mobileUI/store";
import { ref, watch, watchEffect, computed, nextTick } from "vue";
import WlInput from "@mobileUI/components/WlInput/src/index.vue";
import WlPopover from "@mobileUI/components/WlPopover/src/index.vue";
import { getSearchCompany } from "@mobileUI/components/BCRenderFormNew/src/api";
import { TCompanySearchList } from "@mobileUI/typings/BCRenderFormNew";

type Props = {
  value: string | number;
  item: any;
  hasBorder?: boolean;
  placeholder?: string;
  placement?: PopoverPlacement;
};

const props = withDefaults(defineProps<Props>(), {
  value: "",
  item: () => {},
  placeholder: "",
  hasBorder: false,
  placement: "bottom-start",
});

const emit = defineEmits<{
  (e: "update:value", val: string): void;
}>();

const fieldValue = ref<string | number>();
const popoverVisible = ref(false);

const inputClass = computed(() => {
  return props.hasBorder
    ? `border-1 border-solid border-border-color uno-radius-6`
    : "";
});

const inputPlacehoder = computed(() => {
  return props.placeholder ? props.placeholder : `请输入${props?.item?.label}`;
});

const companyList = ref<TCompanySearchList[]>([]);

const onPopoverSelect = (item: TCompanySearchList) => {
  fieldValue.value = item.companyName;
};

const onSearch = async (val: string) => {
  const result = await getSearchCompany({
    corp_id: Store.corp_id,
    appid: Store.app_id,
    name: val,
    scene: 1,
  });
  companyList.value = (result.data?.list ?? []).slice(0, 10).map((res) => {
    return {
      companyName: res.name,
      companyCreditCode: res.credit_code,
      companyPlatFormId: res.platform_id,
    };
  });
  nextTick(() => {
    popoverVisible.value = true;
  });
};

watch(
  () => fieldValue.value,
  (val: string) => {
    emit("update:value", val);
  },
);

watchEffect(() => {
  fieldValue.value = props.value;
});
</script>

<style lang="scss" scoped>
.company-search-field {
  &:deep .van-popover__wrapper {
    width: inherit;
  }
}
</style>
