<script lang="ts" setup>
  import { nextTick, ref, unref, computed } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { formSchema } from './config';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { JSONEditor } from '/@/components/CodeEditor';
  import { createApplicationApi, editApplicationApi } from '/@/api/application/api';
  import { ApplicationApiItemType } from '/@/api/application/model/api';

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

  const { t } = useI18n();

  const { createMessage } = useMessage();

  const handleCount = ref<Number>(); // 0 新增 1 编辑 2 详情

  const recordData = ref<ApplicationApiItemType>();

  const jsonIsValid = ref(true);

  const [registerForm, { resetFields, validate, setFieldsValue, setProps }] = useForm({
    labelWidth: 120,
    schemas: formSchema,
    showActionButtonGroup: false,
  });

  const cacheTitle = computed(() =>
    unref(handleCount) === 0
      ? t('application.api.action.create')
      : unref(handleCount) === 1
      ? t('application.api.action.edit')
      : t('application.api.action.detail')
  );

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ loading: true });
    await resetFields();
    handleCount.value = data.isUpdate;
    recordData.value = data.record;
    if (unref(handleCount) === 2) {
      setProps({ disabled: true });
    } else {
      setProps({ disabled: false });
    }
    try {
      await nextTick();
      setFieldsValue(data.record);
    } finally {
      setDrawerProps({ loading: false });
    }
  });

  const getValue = async () => {
    const values = await validate();
    if (!values) return;
    try {
      JSON.parse(values['param']);
      jsonIsValid.value = true;
    } catch (e) {
      jsonIsValid.value = false;
      console.error(e);
    }
    if (!jsonIsValid.value) return;
    const mergeValue = {
      ...recordData.value,
      ...values,
    };
    if (handleCount.value === 0) {
      Reflect.set(values, 'param', JSON.parse(values['param']));
      await createApplicationApi(values);
    } else {
      Reflect.set(mergeValue, 'param', JSON.parse(mergeValue['param']));
      await editApplicationApi(mergeValue);
    }
    createMessage.success(
      unref(handleCount) === 0 ? t('common.createSuccessText') : t('common.editSuccessText')
    );
    closeDrawer();
    setTimeout(() => {
      emits('success');
    }, 500);
  };

  const handleSubmit = () => getValue();
</script>

<template>
  <div>
    <BasicDrawer
      destroyOnClose
      v-bind="$attrs"
      :showFooter="handleCount !== 2"
      :title="cacheTitle"
      width="30%"
      :maskClosable="true"
      @register="registerDrawer"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">
        <template #interfaceParamsSlot="{ model, field }">
          <JSONEditor v-model:value="model[field]" />
        </template>
      </BasicForm>
    </BasicDrawer>
  </div>
</template>

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