<script setup lang="ts">
import { Form, FormItem, Input, Textarea } from '@arco-design/web-vue';
import AvatarUpload from '@/components/avatar-upload/index.vue';
import { computed, ref } from 'vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { Project } from '@/types/project';

type AttributeType = Omit<Project, 'id'>;

const props = defineProps<{ modelValue: AttributeType; submit?: (value: AttributeType) => Promise<Project> }>();
const emits = defineEmits<{ (e: 'update:modelValue', value: AttributeType): void }>();

const formRef = ref<FormInstance>();

const formRule = {
  cover: [{ required: true, message: '请上传厂牌图片' }],
  name: [{ required: true, message: '请输入厂牌名称' }],
  intro: [{ type: 'string', max: 100, message: '厂牌简介不能超过100字' }],
} as Record<string, FieldRule[]>;

const formValue = computed({
  get: () => props.modelValue,
  set: (val) => emits('update:modelValue', val),
});

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

  return error ? Promise.reject(error) : props.submit?.(formValue.value);
};
defineExpose({ onSubmit });
</script>

<template>
  <Form ref="formRef" layout="vertical" :model="formValue" :rules="formRule">
    <FormItem hide-label content-class="justify-center" :wrapper-col-props="{ alignItems: 'center' }">
      <AvatarUpload v-model="formValue.cover" :size="100" />
    </FormItem>
    <FormItem label="厂牌名称" field="name" show-colon>
      <Input v-model="formValue.name" placeholder="请输入" :max-length="30" show-word-limit />
    </FormItem>
    <FormItem label="厂牌简介" field="intro" row-class="mb-0" show-colon>
      <Textarea v-model="formValue.intro" :auto-size="{ maxRows: 4, minRows: 4 }" :max-length="50" show-word-limit />
    </FormItem>
  </Form>
</template>

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