<template>
  <div>
    <Field
      v-model="fieldValue"
      :label="item.label"
      v-bind="item"
      v-on="item.on || {}"
    >
      <template #input>
        <div :class="`w-full uno-px-10 ${inputClass}`">
          <WlInput
            v-model="fieldValue"
            :placeholder="inputPlacehoder"
            @onBlur="onInputBlur"
          />
        </div>
      </template>
    </Field>
  </div>
</template>

<script lang="ts" setup>
import { Field } from "vant";
import { ref, watch, watchEffect, computed } from "vue";
import WlInput from "@mobileUI/components/WlInput/src/index.vue";

type FieldValue = string | number;

type Props = {
  value: FieldValue;
  item: any;
  hasBorder?: boolean;
  placeholder?: string;
};

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

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

const fieldValue = ref<FieldValue>();

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}`;
});

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

const onInputBlur = () => {
  emit("onBlur", fieldValue.value);
};

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