<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { FieldsEnum, schemas, ViewTypeEnum } from './config';
  import { DataBoardRecord } from '/@/api/dataBoard/model';
  import { Alert } from 'ant-design-vue';
  import { ref, unref } from 'vue';
  import { nextTick } from 'vue';

  const props = defineProps<{
    shareApi?: (...args: any[]) => Promise<any>;
  }>();

  const loading = ref(false);
  const record = ref<DataBoardRecord>({} as unknown as DataBoardRecord);

  const [register, { closeModal }] = useModalInner(async (data: DataBoardRecord) => {
    record.value = data;
    await nextTick();
    setFieldsValue({
      [FieldsEnum.IS_SHARE]: data.viewType === ViewTypeEnum.PUBLIC_VIEW,
      [FieldsEnum.ACCESS_CREDENTIALS]: data.accessCredentials,
    });
  });

  const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
    schemas,
    showActionButtonGroup: false,
    layout: 'inline',
    labelWidth: 120,
  });

  const emit = defineEmits(['register', 'success']);

  const handleSubmit = async () => {
    try {
      loading.value = true;
      const value = getFieldsValue();
      const { id } = unref(record);
      await props?.shareApi?.({ id, ...value });
      closeModal();
      emit('success');
    } finally {
      loading.value = false;
    }
  };
</script>

<template>
  <BasicModal title="分享" @register="register" @ok="handleSubmit" :okButtonProps="{ loading }">
    <Alert
      class="!mb-4"
      type="info"
      message="私有视图只有项目成员可以浏览,公开视图拥有一个公开的 URL,任何人无需登录即可浏览."
    />
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>