<script setup lang="ts">
  import { Form, FormItem, InputTag } from '@arco-design/web-vue';
  import UserSelect from '@/components/user-select/index.vue';

  import { ref, computed } from 'vue';
  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
  import { useVModels } from '@vueuse/core';
  import { get, set } from 'lodash';

  const props = defineProps<{ loading?: boolean; modelValue?: any }>();
  const emits = defineEmits(['update:modelValue', 'update:loading']);

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

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

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

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

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

  const checkMaxUser = (value: any, cb: (error?: string) => void) => (value && value.length > 2 ? cb('最大选择2人') : false);

  const formRule = {
    'expand.lyricist.supplement': [{ type: 'array', validator: (value, cb) => checkMaxUser(value, cb) }],
    'expand.composer.supplement': [{ type: 'array', validator: (value, cb) => checkMaxUser(value, cb) }],
    'estimate_release_at': [{ required: true, message: '请选择预计发布时间' }],
  } as Record<string, FieldRule[]>;

  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="expand.lyricist.ids" :show-colon="true">
      <UserSelect v-model="lyricistIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
    </FormItem>
    <FormItem label="词作者(未注册)" field="expand.lyricist.supplement" :show-colon="true">
      <InputTag v-model="lyricistSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
      <template #extra>
        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
      </template>
    </FormItem>
    <FormItem label="曲作者(用户)" field="expand.composer.ids" :show-colon="true">
      <UserSelect v-model="composerIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
    </FormItem>
    <FormItem label="曲作者(未注册)" field="expand.composer.supplement" :show-colon="true">
      <InputTag v-model="composerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
      <template #extra>
        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
      </template>
    </FormItem>
  </Form>
</template>

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