<template>
  <div class="wl-render-textarea">
    <WlTextarea
      :paddingLeft="0"
      v-model="inputValue"
      v-bind="$attrs"
      @onChange="onInputChange"
      :needDebounce="false"
    />
  </div>
</template>

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

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

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

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

const inputValue = ref("");

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

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