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

  const props = defineProps<{ initValue?: object; submit?: (value: unknown) => Promise<unknown> }>();

  const formRef = ref<FormInstance>();

  const formValue = ref({ identifier: '', level_title: '', level_intro: '', match_title: '', match_intro: '', ...props.initValue });

  const formRule = computed(() => {
    return {
      identifier: [{ required: true, message: '请输入分类' }],
      level_intro: [{ validator: (value: any, cb: any) => (formValue.value.level_title && !value ? cb('请输入等级通知内容') : {}) }],
      match_intro: [{ validator: (value: any, cb: any) => (formValue.value.match_title && !value ? cb('请输入合作通知内容') : {}) }],
    };
  });

  const onSubmit = async () => {
    const error = await formRef.value?.validate();
    return error ? Promise.reject(error) : props.submit?.(formValue.value);
  };

  const getIdentifier = () => formValue.value.identifier;

  defineExpose({ onSubmit, getIdentifier });
</script>

<template>
  <Form ref="formRef" :model="formValue" :rules="formRule as any" auto-label-width>
    <FormItem label="分类" field="identifier" show-colon>
      <Input
        v-model="formValue.identifier"
        placeholder="请输入"
        :max-length="32"
        show-word-limit
        @input="(value:any) => (formValue.identifier = value.replace(/[^A-Z]/g, ''))"
      />
      <template #extra> 仅允许输入A-Z字母组成字符串</template>
    </FormItem>
    <FormItem label="等级通知" field="level_title" show-colon>
      <Input v-model="formValue.level_title" placeholder="请输入" :max-length="64" show-word-limit />
    </FormItem>
    <FormItem field="intro">
      <Textarea v-model="formValue.level_intro" :max-length="500" show-word-limit :auto-size="{ minRows: 4, maxRows: 4 }" />
    </FormItem>
    <FormItem label="合作通知" field="match_title" show-colon>
      <Input v-model="formValue.match_title" placeholder="请输入" :max-length="64" show-word-limit />
    </FormItem>
    <FormItem field="match_intro">
      <Textarea v-model="formValue.match_intro" :max-length="500" show-word-limit :auto-size="{ minRows: 4, maxRows: 4 }" />
    </FormItem>
    <div style="color: rgba(44, 44, 44, 0.5); font-size: 14px; line-height: initial; margin-bottom: 6px">
      注意：如模板中要引用变量，请参照下方规则
    </div>
    <div style="color: #ff0000; font-size: 14px; line-height: initial">
      经纪人：{border}；歌手：{singer}；开始时间：{start}；结束时间：{end}；分类：{type}；厂牌：{brand}；歌曲名{song}
    </div>
  </Form>
</template>

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