<script setup lang="ts">
  import { Form, FormItem, Input, Textarea } from '@arco-design/web-vue';
  import { useVModel } from '@vueuse/core';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { ref } from 'vue';

  const props = defineProps<{ modelValue: { name: string; intro: string }; submit?: () => Promise<any> }>();
  const emit = defineEmits(['update:modelValue']);

  const formRef = ref<FormInstance>();
  const formValue = useVModel(props, 'modelValue', emit);
  const formRule = {
    name: [{ required: true, message: '请输入名称' }],
    intro: [{ max: 500, message: '描述长度超出限制' }],
  };

  const onSubmit = async () => {
    const error = await formRef.value?.validate();

    return error ? Promise.reject(error) : props.submit?.();
  };

  defineExpose({ onSubmit });
</script>

<template>
  <Form ref="formRef" :model="formValue" :rules="formRule" auto-label-width>
    <FormItem label="名称" field="name">
      <Input v-model="formValue.name" placeholder="请输入" :max-length="25" show-word-limit />
    </FormItem>
    <FormItem label="描述" field="intro" row-class="mb-0">
      <Textarea v-model="formValue.intro" placeholder="请输入" :auto-size="{ minRows: 3, maxRows: 6 }" :max-length="500" show-word-limit />
    </FormItem>
  </Form>
</template>

<style scoped lang="less"></style>