<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
            v-if="
              [RequestMethodTypeEnum.COMMOM, RequestMethodTypeEnum.WEBSOCKET].includes(
                model['requestContentType']
              )
            "
            ref="simpleRequestRef"
            :requestTypeAndUrl="model['requestHttpTypeAndUrl']"
            :method="model['requestContentType']"
            :requestOriginUrl="model['requestOriginUrl']"
            :originUrlType="model['originUrlType']"
            :interfaceType="model['interfaceType']"
            :filterValue="editSetFilter"
          />
        </template>
        <template #slotFillAddress="{ model }">
          <div>
            <template v-if="[RequestOriginTypeEnum.CUSTOM_URL].includes(model['originUrlType'])">
              <Tag v-if="model['requestOriginUrl']" color="blue" class="tag-text">
                {{ ` ${model['requestOriginUrl'] + model['requestHttpTypeAndUrl']?.requestUrl}` }}
              </Tag>
            </template>
          </div>
        </template>
        <template #slotServerAddress="{ model }">
          <div>
            <Tag
              v-if="[RequestOriginTypeEnum.SERVER_URL].includes(model['originUrlType'])"
              color="blue"
              class="tag-text"
            >
              {{
                ` ${`${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 {
    saveDataViewInterface,
    updateDataViewInterface,
  } from '/@/api/bigscreen/center/bigscreenCenter';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUtils } from './hooks/useUtils';
  import { Tag } from 'ant-design-vue';
  import { RequestMethodTypeEnum, RequestOriginTypeEnum } from './config/enum';
  import { useI18n } from '/@/hooks/web/useI18n';

  const {
    resetReqHttpType,
    isServerUrl,
    resetUpdateSchema,
    validateRequestTypeAndUrl,
    getOriginUrlType,
  } = useUtils();

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

  const { createMessage } = useMessage();

  const { t } = useI18n();

  const isUpdate = ref(false);

  const putId = ref('');

  const editSetFilter = ref('');

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

  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: 160,
    schemas: schemas(),
    showActionButtonGroup: false,
  });

  const updatePartFormScheme = (requestType: string) => {
    updateSchema({
      field: 'requestHttpTypeAndUrl',
      componentProps: {
        type: requestType,
      },
    });
  };

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    await resetFields();
    await nextTick();
    setFieldsValue(resetReqHttpType);
    const title = `${
      !data.isUpdate ? t('visual.dataview.addtext') : t('visual.dataview.editText')
    }${t('visual.dataview.publicInterface')}`;
    setDrawerProps({ title });
    updateSchema(resetUpdateSchema);
    isUpdate.value = data.isUpdate;
    !isUpdate.value ? (putId.value = '') : (putId.value = data.record?.id);
    simpleRequestRef.value?.resetValue();
    editSetFilter.value = '';
    if (isUpdate.value) {
      editSetFilter.value = data.record?.filter;
      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, []);
        updatePartFormScheme(String(data.record?.requestContentType));
      });
    } else {
      await updatePartFormScheme(RequestMethodTypeEnum.COMMOM);
    }
  });

  const handleSubmit = async () => {
    try {
      setDrawerProps({ loading: true });
      const values = await validate();
      if (!values) return;
      validateRequestTypeAndUrl(values);
      const Objects = simpleRequestRef.value?.getValue(true) || {};
      const filter = simpleRequestRef.value?.getFilterValue();
      const requestOriginUrl = getOriginUrlType(values);
      const params = (Objects as Recordable)?.Params?.filter((item) => item.key);
      (Objects as Recordable).Params = params;
      const data = {
        ...values,
        id: !putId.value ? null : putId.value,
        requestParams: JSON.stringify({
          requestSQLContent: {
            sql: values?.requestSQLContent,
          },
          ...Objects,
        }),
        filter: !putId.value ? filter : filter ? filter : editSetFilter.value,
        requestOriginUrl,
        requestHttpType: values['requestHttpTypeAndUrl']?.requestHttpType,
        requestUrl: values['requestHttpTypeAndUrl']?.requestUrl,
      };
      Reflect.deleteProperty(data, 'requestHttpTypeAndUrl');
      if (values['requestContentType'] === RequestMethodTypeEnum.WEBSOCKET)
        Reflect.deleteProperty(data, 'requestHttpType');
      !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data);
      emits('success');
      closeDrawer();
      createMessage.success(
        `${!isUpdate.value ? t('common.createSuccessText') : t('common.editSuccessText')}`
      );
    } finally {
      setDrawerProps({ loading: false });
    }
  };
</script>

<style lang="less" scoped>
  .tag-text {
    width: 35vw;
    white-space: normal;
    height: auto;
  }
</style>