<template>
  <el-input
    v-model="textareaModel"
    v-bind="$attrs"
    maxlength="200"
    placeholder="不符合时必填，请输入实际情况，1-200字"
    type="textarea"
    :rows="4"
  />
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  const props = defineProps<{
    actualSituation: string;
  }>();

  const emit = defineEmits(['update:actualSituation']);

  const textareaModel = ref(props.actualSituation);

  // 监听输入值变化，向父组件发送更新事件
  watch(textareaModel, (newValue) => {
    emit('update:actualSituation', newValue);
  });

  // 监听props变化，更新本地值
  watch(
    () => props.actualSituation,
    (newValue) => {
      textareaModel.value = newValue;
    },
  );
</script>

<style lang="scss" scoped>
  .el-input {
    width: 100%;
  }
</style>
