<template>
  <div>
    <BasicDrawer
      showFooter
      v-bind="$attrs"
      @register="registerDrawer"
      width="45%"
      @ok="handleOnSubmit"
    >
      <BasicForm @register="registerForm">
        <template #selectMethods="{ model }">
          <SimpleRequest
            ref="simpleRequestRef"
            v-if="model['requestContentType'] === '0'"
            @activeKey="handleActiveKey"
            :method="model['requestContentType']"
          />
          <SimpleRequest
            ref="simpleRequestRef"
            @activeKey="handleActiveKey"
            v-else-if="model['requestContentType'] === '2'"
            :method="model['requestContentType']"
          />
        </template>
        <template #testSql="{ model }">
          <TestSql
            ref="testSqlRef"
            v-if="model['requestContentType'] === '1'"
            :method="model['requestContentType']"
          />
        </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 { findDictItemByCode } from '/@/api/system/dict';

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

  const { createMessage } = useMessage();

  const isUpdate = ref(false);

  const putId = ref('');

  const activeKey = 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) => {
    setDrawerProps({ loading: true });
    await nextTick();
    await resetFields();
    nextTick(() => simpleRequestRef.value?.resetValue());
    nextTick(() => testSqlRef.value?.resetValue());
    const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
    setDrawerProps({ title });
    isUpdate.value = data.isUpdate;
    !isUpdate.value ? (putId.value = '') : (putId.value = data.record.id);
    if (isUpdate.value) {
      await setFieldsValue({
        ...data.record,
        requestContentType: String(data.record?.requestContentType),
        requestSQLContent: JSON.parse(data.record?.requestParams)?.requestSQLContent?.sql,
      });
      await nextTick(() =>
        setTimeout(() => {
          simpleRequestRef.value?.setValue(data.record);
        }, 200)
      );
      const res = await findDictItemByCode({
        dictCode:
          data.record?.requestContentType === 1
            ? 'dataview_select_sql_request'
            : 'dataview_select_request',
      });
      const options = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
      updateSchema({
        field: 'requestHttpType',
        componentProps: {
          options,
        },
      });
    }
    setDrawerProps({ loading: false });
  });

  const handleActiveKey = (v) => (activeKey.value = v);

  const handleOnSubmit = async () => {
    setDrawerProps({ loading: true });
    try {
      const values = await validate();
      if (!values) return;
      const Objects = simpleRequestRef.value?.getValue();
      const data = {
        ...values,
        id: !putId.value ? null : putId.value,
        requestParams: JSON.stringify({
          requestSQLContent: {
            sql: values?.requestSQLContent,
          },
          type: activeKey.value,
          Params: activeKey.value === 'Params' ? Objects : {},
          Body: activeKey.value === 'Body' ? Objects : {},
          Header: activeKey.value === 'Header' ? Objects : {},
        }),
      };
      !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data);
      emits('success');
      closeDrawer();
      createMessage.success(`${!isUpdate.value ? '新增' : '修改'}成功`);
    } finally {
      setDrawerProps({ loading: false });
    }
  };
</script>