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

  const { publicStatusOption, applyStatusOption, manageStatusOption } = useProjectApi;

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

  const formRef = ref<FormInstance>();

  const formRule = {
    cover: [{ required: true, message: '请上传厂牌图片' }],
    name: [{ required: true, message: '请输入厂牌名称' }],
    intro: [{ type: 'string', max: 100, message: '厂牌简介不能超过100字' }],
    is_public: [{ required: true, message: '请确认是否仅显示自己创建的试唱歌曲' }],
    is_can_apply: [{ required: true, message: '请确认是否允许提交歌曲上架' }],
    is_can_manage: [{ required: true, message: '请确认是否允许自行添加外部成员' }],
    is_can_demo_apply: [{ required: true, message: '请确认是否允许提交Demo上架' }],
    is_demo_audit: [{ required: true, message: '请确认Demo上架是否需要审核' }],
  } 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);
  };

  const masterOption = ref<User[]>([]);

  defineExpose({ onSubmit });

  onBeforeMount(async () => {
    if (props.modelValue?.id) {
      await useProjectApi
        .manageUsers(props.modelValue?.id as number, { fetchType: 'all', setColumn: ['id', 'nick_name'], status: 1 })
        .then(({ data }) => {
          masterOption.value = [{ id: 0, nick_name: '无' } as User, ...data];
        });
    }
  });
</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.trim="formValue.name" placeholder="请输入" :max-length="30" show-word-limit />
    </FormItem>
    <FormItem hide-label row-class="mb-0">
      <FormItem v-if="!hideMaster" label="主理人" field="master_id" row-class="formItemRow" show-colon>
        <Select
          v-model.number="formValue.master_id"
          :field-names="{ value: 'id', label: 'nick_name' }"
          :fallback-option="false"
          :options="masterOption"
          placeholder="请选择"
        />
      </FormItem>
      <FormItem label="是否允许提交歌曲上架" field="is_can_apply" row-class="formItemRow" show-colon>
        <Select v-model.number="formValue.is_can_apply" :options="applyStatusOption" placeholder="请选择" />
      </FormItem>
    </FormItem>
    <FormItem hide-label row-class="mb-0">
      <FormItem label="仅显示自己创建的试唱歌曲" field="is_public" row-class="formItemRow" show-colon>
        <Select v-model.number="formValue.is_public" :options="publicStatusOption" placeholder="请选择" />
      </FormItem>
      <FormItem label="是否允许自行添加外部成员" field="is_can_manage" row-class="formItemRow" show-colon>
        <Select v-model.number="formValue.is_can_manage" :options="manageStatusOption" placeholder="请选择" />
      </FormItem>
    </FormItem>
    <FormItem hide-label row-class="mb-0">
      <FormItem label="是否允许提交Demo上架" field="is_can_demo_apply" row-class="formItemRow" show-colon>
        <Select v-model.number="formValue.is_can_demo_apply" :options="applyStatusOption" placeholder="请选择" />
      </FormItem>
      <!--      <FormItem label="Demo上架是否需要审核" field="is_demo_audit" row-class="formItemRow" show-colon>-->
      <!--        <Select v-model.number="formValue.is_demo_audit" :options="applyStatusOption" placeholder="请选择" />-->
      <!--      </FormItem>-->
    </FormItem>
    <FormItem label="厂牌简介" field="intro" row-class="mb-0" show-colon>
      <Textarea v-model.trim="formValue.intro" :auto-size="{ maxRows: 4, minRows: 4 }" :max-length="50" show-word-limit />
    </FormItem>
  </Form>
</template>

<style scoped lang="less">
  .formItemRow:not(:first-child) {
    margin-left: 8px;
  }
</style>