<template>
  <div>
    <BasicDrawer
      destroyOnClose
      showFooter
      v-bind="$attrs"
      @register="registerDrawer"
      width="50%"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">
        <template #selectMethods="{ model }">
          <p style="display: none">{{
            watchRequestHttpTypeAndUrl(model['requestHttpTypeAndUrl'])
          }}</p>
          <SimpleRequest
            ref="simpleRequestRef"
            v-if="model['requestContentType'] === '0' || model['requestContentType'] === '2'"
            :requestTypeAndUrl="model['requestHttpTypeAndUrl']"
            :method="model['requestContentType']"
            :requestOriginUrl="model['requestOriginUrl']"
            :originUrlType="model['originUrlType']"
            :interfaceType="model['interfaceType']"
          />
        </template>
        <template #testSql="{ model }">
          <div style="margin: auto 7.5rem">
            <TestSql
              ref="testSqlRef"
              v-if="model['requestContentType'] === '1'"
              :method="model['requestContentType']"
            />
          </div>
        </template>
        <template #slotFillAddress="{ model }">
          <div>
            <template v-if="model['originUrlType'] === 'custom_url'">
              <Tag
                v-if="model['requestOriginUrl']"
                color="blue"
                style="width: 35vw; white-space: normal; height: auto"
              >
                {{ ` ${model['requestOriginUrl'] + model['requestHttpTypeAndUrl']?.requestUrl}` }}
              </Tag>
            </template>
          </div>
        </template>
        <template #slotServerAddress="{ model }">
          <div>
            <Tag
              v-if="model['originUrlType'] === 'server_url'"
              color="blue"
              style="width: 35vw; white-space: normal; height: auto"
            >
              {{
                ` ${`${templateFillAddress(model['requestContentType'], model['originUrlType'])}${
                  model['requestHttpTypeAndUrl']?.requestUrl
                }`} 
                `
              }}
            </Tag>
          </div>
        </template>
      </BasicForm>
    </BasicDrawer>
  </div>
</template>
<script lang="ts" setup name="publicApi">
  import { ref, nextTick, watch } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas } from './config/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';
  import { Tag } from 'ant-design-vue';

  const { resetReqHttpType, isServerUrl } = 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 templateFillAddress = (method, type) => {
    return isServerUrl(method, type);
  };

  const watchRequestHttpTypeAndUrlStr = ref('');

  const watchRequestHttpTypeAndUrl = (o) => {
    watchRequestHttpTypeAndUrlStr.value = o;
  };

  watch(
    () => watchRequestHttpTypeAndUrlStr.value,
    (newValue: any) => {
      if (!newValue?.requestUrl) return;
      if (newValue?.requestUrl.includes('{entityType}')) {
        simpleRequestRef.value?.setValue(null, true, [
          {
            key: 'scope',
            value: 'entityType',
            required: true,
          },
        ]);
      }
    },
    {
      deep: true,
    }
  );

  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, false, []));
      updateSchema({
        field: 'requestHttpTypeAndUrl',
        componentProps: {
          type: String(data.record?.requestContentType),
        },
      });
    }
  });

  const handleSubmit = async () => {
    setDrawerProps({ loading: true });
    try {
      const values = await validate();
      if (!values) return;
      const isRequestHttpTypeAndUrlEmpty = values?.requestHttpTypeAndUrl;
      if (values.requestContentType === '0') {
        if (
          !Reflect.get(isRequestHttpTypeAndUrlEmpty, 'requestHttpType') ||
          !Reflect.get(isRequestHttpTypeAndUrlEmpty, 'requestUrl')
        ) {
          createMessage.error('请填写请求类型&地址');
          throw Error('请填写请求类型&地址');
        }
      } else if (values.requestContentType === '2') {
        if (!Reflect.get(isRequestHttpTypeAndUrlEmpty, 'requestUrl')) {
          createMessage.error('请填写请求类型&地址');
          throw Error('请填写请求类型&地址');
        }
      }
      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>