<template>
  <div class="l-from-body">
    <a-form
      ref="formRef"
      :rules="data.rules"
      :model="data.formData"
      labelAlign="left"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="SQL语句" name="Sql">
        <a-textarea v-model:value="data.formData.Sql" placeholder="SQL语句" :rows="4" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';

  const formRef = ref<any>();
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  const data = reactive({
    formData: {
      Sql: '',
      type: '7',
    },
    rules: {
      Sql: [{ required: true, message: '请输入SQL语句' }],
    },
  });
  function validateForm() {
    formRef.value
      .validate()
      .then(async () => {
        return true;
      })
      .catch(async () => {
        return false;
      });
  }
  function getForm() {
    let rows = data.formData;
    rows.name = data.formData.Sql;
    return rows;
  }
  defineExpose({
    getForm,
    validateForm,
  });
</script>
<style scoped>
  .l-from-body {
    padding: 10px;
  }
</style>
