<template>
  <div class="mt-8">
    <div>
      <Button @click="showTestEditCell = true" type="primary"> 测试一下 </Button>
    </div>
    <div v-if="showTestEditCell" class="mt-8">
      <a-row type="flex" justify="center">
        <a-col :span="3"> 参数设置 </a-col>
        <a-col :span="21">
          <TestEditCellTable ref="testEditCellTableRef" :method="method" />
        </a-col>
      </a-row>
    </div>
  </div>
  <div v-if="showTestEditCell" class="mt-8">
    <div>
      <Button @click="handleExcute" type="primary"> 执行 </Button>
    </div>
    <div class="mt-8">
      <a-row type="flex" justify="center">
        <a-col :span="3"> 测试结果 </a-col>
        <a-col :span="21">
          <a-textarea v-model:value="testResult" placeholder="测试结果为：" :rows="6" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script lang="ts" setup name="testSql">
  import { ref } from 'vue';
  import { Button } from 'ant-design-vue';
  import { TestEditCellTable } from '../TestEditCellTable/index';

  defineProps({
    method: {
      type: String,
    },
  });

  const showTestEditCell = ref(false);

  const testEditCellTableRef = ref<InstanceType<typeof TestEditCellTable>>();

  const testResult = ref('');

  const handleExcute = async () => {
    const params = testEditCellTableRef.value?.getValue();
    testResult.value = JSON.stringify(params);
  };
</script>

<style scoped lang="less"></style>