<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="添加SQL"
    width="500px"
    @fullscreen="onFullscreen"
    @ok="submit"
  >
    <Alert message="@param 与主表关联参数值，比如 where id = @param;" show-icon />
    <Divider />
    <BasicForm @register="viewRegister" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { defineEmits, ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { Alert, Divider } from 'ant-design-vue';
  import { getStep1_View } from './pageStepData';
  import { functionGetDataColName } from '@/api/demo/formScheme';

  const emit = defineEmits(['viewdata']);

  // 异步传参
  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    const record = {};
    record.dbcode = data.record.name;
    record.sql = data.record.sql;
    setModalProps({ confirmLoading: false });
    setFieldsValue(record);
  });

  const [viewRegister, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
    schemas: getStep1_View,
    showResetButton: false,
    showSubmitButton: false,
  });

  // 表格数据提交
  async function submit() {
    let formdata = getFieldsValue();
    let query = {
      dbcode: formdata.dbcode,
      sql: formdata.sql,
    };
    formdata.columns = await functionGetDataColName(query);
    emit('viewdata', formdata);
    resetFields();
    closeModal();
  }
</script>
