<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 { 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 [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 });
    }
  });


</script>

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

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