<template>
  <div>
    <BasicDrawer
      destroyOnClose
      showFooter
      v-bind="$attrs"
      @register="registerDrawer"
      width="50%"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">
        <template #selectMethods="{ model }">
          <SimpleRequest
            ref="simpleRequestRef"
            v-if="model['requestContentType'] === '0' || model['requestContentType'] === '2'"
            :requestTypeAndUrl="model['requestHttpTypeAndUrl']"
            :method="model['requestContentType']"
            :requestOriginUrl="model['requestOriginUrl']"
            :originUrlType="model['originUrlType']"
          />
        </template>
        <template #testSql="{ model }">
          <div style="margin: auto 7.5rem">
            <TestSql
              ref="testSqlRef"
              v-if="model['requestContentType'] === '1'"
              :method="model['requestContentType']"
            />
          </div>
        </template>
      </BasicForm>
    </BasicDrawer>
  </div>
</template>
<script lang="ts" setup name="publicApi">
  import { ref, nextTick } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas } from './config';
  import SimpleRequest from './components/SimpleRequest/index.vue';
  import { TestSql } from './components/TestSql/index';
  import {
    saveDataViewInterface,
    updateDataViewInterface,
  } from '/@/api/bigscreen/center/bigscreenCenter';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUtils } from './hooks/useUtils';

  const { resetReqHttpType } = useUtils();

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

  const { createMessage } = useMessage();

  const isUpdate = ref(false);

  const putId = ref('');

  const simpleRequestRef = ref<InstanceType<typeof SimpleRequest>>();

  const testSqlRef = ref<InstanceType<typeof TestSql>>();

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

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    await resetFields();
    await nextTick();
    setFieldsValue(resetReqHttpType);
    const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
    setDrawerProps({ title });
    updateSchema({
      field: 'requestHttpTypeAndUrl',
      componentProps: {
        type: '0',
      },
    });
    isUpdate.value = data.isUpdate;
    !isUpdate.value ? (putId.value = '') : (putId.value = data.record.id);
    simpleRequestRef.value?.resetValue() && testSqlRef.value?.resetValue();
    if (isUpdate.value) {
      await setFieldsValue({
        ...data.record,
        requestContentType: String(data.record?.requestContentType),
        requestSQLContent: JSON.parse(data.record?.requestParams)?.requestSQLContent?.sql,
        originUrlType: data.record?.requestOriginUrl?.startsWith('localhost')
          ? 'server_url'
          : 'custom_url',
        requestHttpTypeAndUrl: {
          requestHttpType: data.record?.requestHttpType,
          requestUrl: data.record?.requestUrl,
        },
      });
      await nextTick(() => simpleRequestRef.value?.setValue(data.record));
      updateSchema({
        field: 'requestHttpTypeAndUrl',
        componentProps: {
          type: String(data.record?.requestContentType),
        },
      });
    }
  });

  const handleSubmit = async () => {
    setDrawerProps({ loading: true });
    try {
      const values = await validate();
      if (!values) return;
      const Objects = simpleRequestRef.value?.getValue(true);
      const requestOriginUrl =
        values['originUrlType'] === 'server_url' ? 'localhost' : values['requestOriginUrl'];
      const data = {
        ...values,
        id: !putId.value ? null : putId.value,
        requestParams: JSON.stringify({
          requestSQLContent: {
            sql: values?.requestSQLContent,
          },
          ...Objects,
        }),
        requestOriginUrl,
        requestHttpType: values['requestHttpTypeAndUrl']?.requestHttpType,
        requestUrl: values['requestHttpTypeAndUrl']?.requestUrl,
      };
      Reflect.deleteProperty(data, 'requestHttpTypeAndUrl');
      if (values['requestContentType'] === '2') Reflect.deleteProperty(data, 'requestHttpType');
      !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data);
      emits('success');
      closeDrawer();
      createMessage.success(`${!isUpdate.value ? '新增' : '修改'}公共接口成功`);
    } finally {
      setDrawerProps({ loading: false });
    }
  };
</script>