<script setup lang="ts">
import { Form, FormItem, Input, Message, Select } from '@arco-design/web-vue';
import { computed, ref } from 'vue';
import AvatarUpload from '@/components/avatar-upload/index.vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { useSelectionStore } from '@/store';
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),
});

const { activityTagOptions, projectOptions } = useSelectionStore();

const onTagExceedLimitError = (content: string, duration = 1000) => Message.warning({ content, duration });

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

<template>
  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true">
    <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">
      <Select
        v-model="tagIds"
        :options="activityTagOptions"
        :limit="3"
        :field-names="{ value: 'id', label: 'name' }"
        :fallback-option="false"
        :virtual-list-props="{ height: 200 }"
        :multiple="true"
        placeholder="请选择"
        @exceed-limit="onTagExceedLimitError('关联标签最多选中3个')"
      />
    </FormItem>
    <FormItem label="关联厂牌" field="project_id" :show-colon="true">
      <Select
        v-model="formValue.project_id"
        :options="projectOptions.filter((item) => filterProject(item))"
        :field-names="{ value: 'id', label: 'name' }"
        :fallback-option="false"
        :allow-search="true"
        placeholder="请选择"
      />
    </FormItem>
  </Form>
</template>

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