<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'"
            :method="model['requestContentType']"
          />
          <SimpleRequest
            ref="simpleRequestRef"
            v-if="model['requestContentType'] === '2'"
            :method="model['requestContentType']"
          />
        </template>
        <template #testSql="{ model }">
          <TestSql
            v-if="model['requestContentType'] === '1'"
            :method="model['requestContentType']"
          />
        </template>
      </BasicForm>
    </BasicDrawer>
  </div>
</template>
<script lang="ts" setup name="publicApi">
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas } from './config';
  import { SimpleRequest } from './components/SimpleRequest';
  import { TestSql } from './components/TestSql/index';

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

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

  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    await resetFields();
    const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
    setDrawerProps({ title });
    setFieldsValue({ ...data.record });
  });

  const handleOnSubmit = async () => {
    const values = await validate();
    if (!values) return;
    const params = simpleRequestRef?.value?.getValue();
    const data = {
      ...values,
      requestParams: {
        params,
      },
    };
    console.log('Get form values', data);
  };
</script>