<script setup lang="ts">
  import { Form, FormItem, Input } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import AvatarUpload from '@/components/avatar-upload/index.vue';
  import TagSelect from '@/components/tag-select/index.vue';
  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
  import { get, set } from 'lodash';
  import { useVModels } from '@vueuse/core';

  const props = withDefaults(defineProps<{ loading?: boolean; modelValue?: any; filterProject?: (value: any) => boolean }>(), {
    filterProject: () => true,
  });

  const emits = defineEmits(['update:modelValue', 'update:loading']);

  const formRef = ref<FormInstance>();
  const { modelValue: formValue } = useVModels(props, emits);

  const formRule = {
    'cover': [{ type: 'string', required: true, message: '请上传活动封面' }],
    'song_name': [{ type: 'string', required: true, message: '请输入歌曲名称' }],
    'expand.tag_ids': [
      { type: 'array', required: false, message: '请选择关联标签' },
      { type: 'array', maxLength: 3, message: '关联标签最多选中3个' },
    ],
    'project_id': [{ type: 'number', min: 1, required: true, message: '请选择关联厂牌' }],
  } as Record<string, FieldRule[]>;

  const tagIds = computed({
    get: () => get(formValue.value, 'expand.tag_ids', []),
    set: (val) => set(formValue.value, 'expand.tag_ids', val),
  });

  defineExpose({
    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
  });
</script>

<template>
  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
    <FormItem label="封面图片" field="cover" :show-colon="true">
      <AvatarUpload v-model="formValue.cover" :size="100" shape="square" />
    </FormItem>
    <FormItem label="歌曲名称" field="song_name" :show-colon="true">
      <Input v-model="formValue.song_name" :max-length="100" :show-word-limit="true" placeholder="请输入" />
    </FormItem>
    <FormItem label="曲风标签" field="expand.tag_ids" :show-colon="true">
      <TagSelect v-model="tagIds" :multiple="true" :limit="3" placeholder="请选择" limit-error-msg="关联标签最多选中3个" />
    </FormItem>
  </Form>
</template>

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