<template>
  <div class="wl-render-input">
    <WlInput
      :paddingLeft="0"
      v-model="inputValue"
      v-bind="$attrs"
      @onChange="onInputChange"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "RfInput",
};
</script>

<script lang="ts" setup>
import { ref, watchEffect, watch } from "vue";
import WlInput from "@mobileUI/components/WlInput/src/index.vue";
type Props = {
  modelValue?: string;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
});

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

const onInputChange = (val) => {
  emit("update:modelValue", val);
  emit("onChange", val);
};

const inputValue = ref("");

watchEffect(() => {
  inputValue.value = props.modelValue;
});

watch(
  () => inputValue.value,
  (val) => {
    onInputChange(val);
  },
);
</script>

<style lang="scss">
.render-form[data-weiling-mobile-ui-bc-render-form] {
  .wl-render-input {
    flex: 1;
    color: rgba(48, 50, 51, 1);
    font-weight: 400;
    border-radius: j(8);
    font-size: j(17);
    margin: j(10) 0;
  }
}
</style>
