<template>
  <syDialogInput
    class="w-full"
    type="textarea"
    rows="5"
    :value="modelValue"
    @update:value="(e) => $emit('update:modelValue', e)"
    :maxLength="maxLength"
    v-bind="$attrs"
  ></syDialogInput>
  <div class="text-right w-full num">
    {{ modelValue.length }} / {{ maxLength }}
  </div>
</template>

<script setup lang="ts">
import { syDialogInput } from "cqk-sy-ui";
withDefaults(
  defineProps<{
    modelValue: string;
    maxLength: number;
  }>(),
  {}
);
</script>

<style scoped>
.num {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666c70;
}
</style>
